Embed Web3Auth Wallet Without Modal

Help - Plug n Play
1

Hello Web3Auth Team, I saw this asked back in February and was wondering if there were any updates with the roll out of the new v10? I’d also like to integrate wallet services but have it on-page vs modal popup.

Also, if it is still modal only, how can I trigger the modal with my own button & showWidgetButton: false?

Thank you

2

Hi Thomas, thanks for reaching out and for your detailed question!

Summary of Your Request:

  • You want to embed Web3Auth wallet services directly on the page (not as a modal).
  • You’re checking if this is possible in v10 of the Plug n Play SDK.
  • If modal is still required, you want to trigger it with your own button and hide the default widget button (showWidgetButton: false).

Current Status & Guidance:

1. Embedding Web3Auth Wallet On-Page (No Modal)

  • As of Web3Auth v10, the SDK is unified under @web3auth/modal.

  • The recommended approach for custom UI (no modal) is to use the connectTo method, which allows you to build your own UI and trigger authentication flows programmatically.

  • However, the wallet UI (Wallet Services) is still primarily modal-based. There is currently no official support for a fully embeddable wallet UI directly on the page. This feature has been requested by others, but as of v10, it’s not available yet.

2. Triggering Modal Programmatically with Custom Button

  • You can hide the default widget button by setting showWidgetButton: false.
  • To trigger the modal with your own button, you should call the web3auth.connect() method (or connectTo for specific flows) in your button’s onClick handler.

Example:

// Hide the default widget button in your config
const web3auth = new Web3Auth({
  clientId: "YOUR_CLIENT_ID",
  web3AuthNetwork: "sapphire_mainnet",
  uiConfig: { showWidgetButton: false }
});
await web3auth.init();

// Your custom button handler
const handleLogin = async () => {
  await web3auth.connect(); // This opens the modal
};

Next Steps:

  • If you want to build a fully custom wallet UI, please let us know your use case so we can pass along your feedback to the product team.
  • If you need code snippets or a sample repo for custom button integration, let us know your framework (React, Vue, etc.) and we’ll provide an example.

References:

Let us know if you have further questions or need help with implementation!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

3

I’m able to trigger wallet ui thanks to the bot reply. Checking back in to ask if we can have custom components for wallet or if it is still modal only as of now?

4

Hey @mrcampbell404
I am not able to comprehend you.
Do you mean that you do not wish to use the Web3Auth pre-defined modal?

image
image473×607 19.6 KB

if yes, then this example should help.

5

My apologies, I was in a hurry. Looking at my web app from mobile, I have 3 links - Dashboard, Vaults, and Wallet. When the user clicks Dashboard or Vaults, they navigate to the page; but when they click Wallet, it triggers the popup modal. Is there a way I can embed this into the page or am I able to make my own custom UI components to customize the wallet experience?

image
image1144×2012 64.9 KB