Manifold for Developers
Search…
⌃K
Links

Customization & Styling

Changing how the Connect Widget looks

Optional Properties

Additional Connect Widget display settings are available out of the box by specifying the following props:
  • data-override-connect-text - Overrides the default "Connect" button text so you can customize to anything you'd like.
  • data-show-balance - (boolean) displays the ETH balance of the user's wallet next to their name.
  • data-show-chain - (boolean) displays a network connection indicator to the left of the button text (e.g. green for mainnet) when true.
Here's an example of styling the Connect Button by data-show-chain, and data-show-balance.
<div
data-widget="m-connect"
data-show-chain="true"
data-show-balance="true"
data-client-id="<your app client id>"
data-app-name="<your app name>"
data-network="<your desired network's chain id>"
></div>
Once the user successfully connects you can see the additional UI elements rendered (default styling).
It's also important to note that when the user is connected and clicks on their name, a dropdown will appear displaying a Disconnect option.

Custom CSS

By default the Connect Widget uses a standard html button style, however, we've built the widget to allow custom CSS styling as desired to fit the look and feel of your website or application. Here's an example of how to add custom CSS styling and button text upon installation. Inspect the comments in the HTML and CSS files for more information.

CodePen

Open in a new window to see more clearly