Overview

A cascading style sheet (CSS) changes how existing elements are displayed in your verification. With Custom CSS, You can customize your verifications appearance beyond the settings available on the Workflow > Customize> Styling section within your flow builder. For example:

You can use CSS to set rounded corners to your buttons
You can add custom CSS to your entire verification front end, or to a specific section of a screen.

Considerations before using custom CSS

Writing Selectors

Avoid deeply nested selectors
Avoid dynamically generated class names.
- Avoid:PopupWindow_main__h0uKyis dynamically generated
- Instead: usetext-titleis not dynamically generated

Other considerations

We recommend using one of the provided fonts within the 'customize' tab in the dashboard. If you allow other custom fonts via custom CSS, those custom fonts are a separate resource that are downloaded by browsers before text is rendered, which can impact a verification overall performance and security. It's your responsibility to ensure that your verification isn't negatively affected by custom fonts.
Depending on the CSS customization you do, updating your SDK might cause your custom CSS to stop functioning.
Metamap doesn't currently support advanced customizations such as copywriting override, icons or assets replacement, animations and other...

Screens or flows not supported

Custom CSS should support all common screens, but some may not be scoped yet. Reach out to us if that's the case.

Adding custom CSS

Custom CSS can be added via the 'custom CSS' input within Dashboard > Workflow > Customize > Custom CSS.

Steps

Log in to your Dashboard
Select Worflows on your dashboard nav bar
Select a specific workflow
Once inside the workflow editor:
1. Click "🖌️-Customize" button on top navigation (next to Save & Preview)
2. Click "Custom CSS" button
3. Add your code on the provided container

Select a flow and navigate to Custom CSS by clicking the "🖌️-Customize" button.

Examples

[class^="Button_root__"] {
    border-radius: 30px;
}

/* using static value */
.text-title {
  color: black;
}

/* using css variable */
.text-title {
  color: var(--error-color);
}

:root {
  --unit: 8px;
  --border-radius: 0px
}

[data-qa="Title"] {
  font-size: 20px;
}

Additional resources for CSS

Customizing your CSS requires some familiarity with CSS and HTML. Before you customize your verification, make sure that you understand browser support level by using sites like: https://caniuse.com/

If you're interested in learning more about CSS, then you can explore some of the following resources: