Docs

ConnectEmbed

The ConnectEmbed component renders the same modal interface as ConnectEmbed, enabling a sign-in flow without an overlay. This method is more helpful in implementing full-page sign-in flows.

Get started

  • Install

    Install the Connect SDK

    npm i thirdweb
  • Obtain Client Id

    On the thirdweb dashboard, navigate to settings to create an API Key to obtain a Client Id.

  • Add ConnectEmbed component

    In your application, initialize and add the ConnectEmbed component by passing in your Client Id.

    import { ThirdwebProvider, ConnectEmbed } from "thirdweb/react";
    const client = createThirdwebClient({ clientId: your_client_id });
    export default function App() {
    return (
    <ThirdwebProvider>
    <ConnectEmbed client={client} />
    </ThirdwebProvider>
    );
    }
  • Configure login options

    Configure the wallets property to enable various login options such as email & phone number, socials, and EOAs such as MetaMask or Phantom.

    import { ConnectEmbed } from "thirdweb/react";
    import { createWallet, inAppWallet } from "thirdweb/wallets";
    const wallets = [
    inAppWallet(),
    createWallet("io.metamask"),
    createWallet("com.coinbase.wallet"),
    createWallet("me.rainbow"),
    ];
    export default function App() {
    return (
    <ThirdwebProvider>
    <ConnectEmbed client={client} wallets={wallets} />
    </ThirdwebProvider>
    );
    }

    View full list of support wallets.

  • Customize theme

    Use the default light and dark theme or override the default theme to customize the appearance of the modal.

    import { ConnectEmbed } from "thirdweb/react";
    import { lightTheme } from "thirdweb/react";
    const customTheme = lightTheme({
    colors: {
    modalBg: "red",
    },
    });
    export default function App() {
    return (
    <ThirdwebProvider>
    <ConnectEmbed client={client} theme={customTheme} />
    </ThirdwebProvider>
    );
    }

    View full theme properties.

To fully customize and learn more about the ConnectEmbed properties, view the full reference.

connect-embed-example

Example of how to use ConnectEmbed component created in a Next application.