Styling and CSS Customization

Low Code Integrations

If you have chosen a low code integration or are using the quick start guide you can style the web flow application though the Dashboard.

User interface (UI) customization

  1. Log in to Dashboard > Configuration > Customization. The first section lets you customize some or all of the elements listed in the next steps.
  2. To add your logo, click in the Logo field, navigate to and select the saved logo file on your computer, and then click Open. The logo must be saved in JPG, PNG, or SVG format.
  3. Add a Subtitle.
  4. Use the Button slider to adjust the corner radius.
  5. Change the Button Color and Button Color Text. You can click the colored area on the left of each field to use a selector or enter RGB values, or you can enter a hexadecimal (HEX) color code directly in the field.
  6. Click the radio button to include a custom CSS stylesheet. For more information on this advanced option, see the next section on this page.
  7. If you don't want the Incode branding to show to your end users, select the Hide footer branding checkbox.
  8. When you are finished, click Update UI.

Content customization

  1. If you haven't already done so, log in to Dashboard > Configuration > Customization.
  2. Scroll down to the Content section. This section lets you customize the text fields in your integration.
  3. Enter a Headline for your finish screen. The default value is Thank you.
  4. Enter the Body Text for your finish screen. The default value is Your verification is complete.
  5. Enter SMS Text for the text message your users receive to start onboarding.
  6. When you are finished, click Update content.

Use a custom CSS file

You can use custom CSS stylesheets to adjust the look and feel of your app. This is an advanced technique. For best results, we recommend that your developers use the developer tools in their browser to identify specific DOM elements which can be styled.

In general, all elements prefixed with CSS selector named Incode can be referenced and styled in a CSS file, as shown here in the following image. Elements that don't have this prefix are not available for customization.

Sample CSS file

To see a sample custom CSS implementation, go to:

📘

NOTE

You may need to use the keyword !important to ensure the custom styling is honored property.