diff --git a/docusaurus.config.js b/docusaurus.config.js
index d49bfc2eb4e..9f786df226f 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -412,6 +412,12 @@ const config = {
},
},
},
+ announcementBar: {
+ id: 'support_us',
+ content:
+ 'NEW! Build embedded wallets with MetaMask using the Embedded Wallets SDK. Instantly onboard users with social logins, passkeys, and more.',
+ isCloseable: false,
+ },
}),
}
diff --git a/sdk/introduction/welcome.md b/sdk/introduction/welcome.md
index 493462233ab..363ab43a141 100644
--- a/sdk/introduction/welcome.md
+++ b/sdk/introduction/welcome.md
@@ -16,6 +16,11 @@ With the SDK, you can:
[Get started with JavaScript and Wagmi.](quickstart/javascript-wagmi.md)
+:::tip Build embedded wallet experiences that work seamlessly with MetaMask
+Introducing our latest [Embedded Wallets SDK](https://web3auth.io/docs) (previously Web3Auth), you can now onboard users
+instantly and design seamless onchain experiences with social logins, passkeys and more.
+:::
+
## Why use the SDK?
The benefits of using MetaMask SDK include the following:
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9c5ce534c37..9d938a71f10 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -28,6 +28,13 @@ export default function Home(): JSX.Element {
"Use the Wallet API to integrate your dapp with MetaMask. Connect to the MetaMask browser extension and interact with your users' accounts.",
href: '/wallet',
theme: '',
+ },
+ {
+ title: 'Embedded Wallets',
+ description:
+ 'Use the Embedded Wallets SDK (Web3Auth) to onboard power users and first-time users in seconds via social logins, passkeys, or by integrating your own authentication providers.',
+ href: 'https://web3auth.io/docs',
+ theme: '',
},
{
title: 'Snaps',
diff --git a/src/scss/custom.scss b/src/scss/custom.scss
index 5002169ab5a..f7531a7d577 100644
--- a/src/scss/custom.scss
+++ b/src/scss/custom.scss
@@ -768,4 +768,37 @@ ol {
.resources-dropdown-menu a {
width: 100%; // Makes each box take full width of dropdown
}
-}
\ No newline at end of file
+}
+
+div[class^='announcementBar_'] {
+ font-family: var(--font-mm-centra);
+ font-size: 1.4rem;
+ padding: 1rem 2rem;
+ text-align: center;
+ border-bottom: 1px solid var(--general-gray-light);
+ background-color: var(--developer-purple-light);
+ color: var(--color-text);
+
+ a {
+ color: var(--ifm-link-color);
+ text-decoration: underline;
+ font-weight: 500;
+
+ &:hover {
+ color: var(--ifm-link-hover-color);
+ }
+ }
+
+ [data-theme='dark'] & {
+ background-color: var(--developer-purple-light);
+ color: var(--general-black);
+
+ a {
+ color: var(--general-black);
+
+ &:hover {
+ color: var(--developer-purple);
+ }
+ }
+ }
+}