Customizing Signup/Login UI

As you can see on the demo, you can configure the login page in many different ways. This page walks you through where to find those configuration options.

For the most part you will find them in the “Log in & User Profile” section of the Dynamic Dashboard.

Choose login methods to display and in what order

As far as the login methods to display, this is determined firstly by whatever you have enabled at the time, but you can override it using Login Views and also handle custom ordering there - learn more in the tutorial.

Embedded Widget or Button

By default, if you use our DynamicWidget, it will show up as a button which opens the login screen in a modal. You can change this to an embedded widget so that the whole signup/login modal shows up directly on the page.

You can see both these options in action on the demo in the “Widget integration” section under “Design”. Learn more about the standard widget here and the embedded widget here.

Email Continue button

By default, we split email login into two components, an input and a continue button directly below it. You can merge them into one single component using the “Display email submit button inside the input field” button in “Design Settings”.

Expanded vs Collapsed wallet list

The login screen normally lists wallets one by one, which can clutter the screen if branded wallet login is not the most important thing to your users. You can collapse this list down into a single “Continue with a wallet” button (which will in turn open this list) but using the “Collapse wallet list” button in “Design Settings”.

Splitting Social & Email

The social and email sections of the login screen are bundled together by default i.e. without an OR seperator like with branded wallets, but you can change this using the “Split email and social into separate sections” button in “Design Settings”.

Social above email

The default UI shows email login above social if both are enabled. You can switch the default ordering using the “Place social above email section” button in “Design Settings”.

Changing the text

You can change any part of the text which is shown in the login UI using our translations feature - learn more about that in the tutorial.

Adjusting Signup/Login button

If you want to change the text/css, please refer to the Changing CSS section below. To change the text itself, we will use the innerButtonComponent prop on the DynamicWidget. This prop allows us to pass in a JSX element that will be rendered as the button.

<DynamicWidget
  innerButtonComponent={<button>My Custom Connect Wallet Button</button>}
>
  {/* ... rest of your app ... */}
</DynamicWidget>

If you want to use your own custom button we can use setShowAuthFlow available though the useDynamicContext hook.

We access it like this:

const { setShowAuthFlow } = useDynamicContext();

We can then use this function to trigger the Dynamic Connect Wallet flow when our custom button is clicked.

<button onClick={() => setShowAuthFlow(true)}>
  My Custom Connect Wallet Button
</button>

Adding your own sections

You can inject your own custom content into the login UI using our Custom Widget Content tutorial.

Changing the CSS

We offer multiple ways of changing/overriding the CSS in the login view as well as every other view:

Themes

You can use a theme to override the default styles of components cohesively. Learn more.

CSS Variables

You can use CSS variables to override individual styles of the UI components.

Learn more.

Custom CSS

You can add custom CSS in order to ignore all Dynamic styles and create your own.

Learn more.