Customization

Overview

The SDK offers a flexible and modular customization system designed to adapt to your brand identity, user needs, and accessibility standards—whether you're launching a quick integration or implementing a deeply tailored experience. A key advantage of this system is that you can start broad and refine as needed. Begin by applying global changes to colors, typography, and styles at the theme level. Then, if needed, progressively fine-tune individual components or interactive states. Each section supports partial configuration—you only need to override the values that are relevant for your use case. Any keys left undefined will automatically fall back to the SDK’s default values, ensuring robustness and ease of maintenance. This approach enables teams to deliver a cohesive, accessible, and brand-aligned experience with minimal effort, while still offering full control for advanced customization.

The sections that follow detail how to configure:

• Texts (labels, messages, instructions, accessibility strings)

• Media (illustrations and image assets per screen and device type)

• Styles (design tokens, layout, colors, and typography)

• Components (buttons, header, spinner, and more)

With this structure, you can create a customized user experience that feels natively integrated into your product—without sacrificing speed or maintainability.

Texts

The new system also provides flexible control over the text content displayed throughout the interface. Instead of editing hardcoded labels or messages in multiple places, you can now configure all user-facing texts from a centralized section. This approach allows you to easily adapt the language to suit your brand tone, localization needs, or specific use cases, whether it's updating button labels, instructions, error messages, or screen titles. By modifying just a few key parameters, you can ensure that the entire experience feels cohesive, consistent, and aligned with the expectations of your users.

Below is the full JSON structure containing all the configurable text elements used throughout the interface. This includes everything from screen titles and helper messages to button text and accessibility descriptions.

⬇ Download English Texts

⬇ Download Spanish Texts

You are not required to modify the entire structure. The configuration is highly flexible, allowing you to override only the specific text entries you want to customize. If a given key is not explicitly redefined, the SDK will automatically fall back to its default value ensuring smooth operation even with partial configurations.

In general, text entries apply to both active and passive flows, however, some text keys are nested under either active or passive, and those will only apply to their corresponding flow type.

For example, if your integration uses an active flow and you provide a value for texts.instructions.passive.title, that text will not be used. Instead, you must use the corresponding key: texts.instructions.active.title.

This gives you full control over the messaging without unnecessary complexity, making it easier to maintain consistency and adapt the interface to your product's voice and audience.

Take into account that ASCII codes (e.g., \n) will not be interpreted and will be shown as-is. Only some HTML tags can be used in section titles and subtitles to better adapt the messaging. If an unsupported tag is included, the text will be rendered as plain text.

The list of allowed tags is as follows:

• <b></b>
• <i></i>
• <br/>
• <ul></ul>
• <li></li>
• <ol></ol>

Example of title and subtitle with HTML inside:

"texts": {
    "instructions": {
        "passive": {
            "title": "Take a photo of <b>your face</b>",
            "subtitle": "<i>Follow these steps:</i> <ol><li><b>Frame your face</b> in the camera</li><li>Maintain a <b>neutral expression</b></li></ol>"
        }
    }
}

Desktop	Mobile

Recommendations

Titles and Subtitles

• Use short, descriptive, and action-oriented titles
  Titles should clearly indicate the action the user is expected to perform.
  ✦ Example: “Take a selfie”, “Show the front of your document”

• Subtitles should expand or clarify the instruction
  They offer supporting context to the title in a more detailed or reassuring tone.
  ✦ Example: “Make sure your face is centered and well lit”

• Avoid vague or generic labels
  Texts like “Step 1” or “Instruction screen” do not help users anticipate what they need to do next.

• Maintain clear text hierarchy
  Titles should be visually prominent. Subtitles should follow in lighter or smaller weight.

Feedback and System Messages

• Feedback should reflect the specific system activity
  Replace generic loading phrases with descriptive messages:
  ✦ “Analyzing selfie…”, “Verifying back side…”, “Finalizing check…”

• Error messages should be neutral and constructive
  Avoid blame or overly technical language.
  ✦ Prefer: “Face not visible — please align your face within the frame”
  ✗ Avoid: “Error: Face detection failed”

Readability and Accessibility

• Keep text clear, concise, and scannable
  Users tend to scan rather than read. Prioritize brevity and clarity over formality or marketing tone.

• Avoid excessive formatting
  Do not overuse bold, italics, or underlining. These should be reserved for minimal emphasis, not used for entire sentences or instructions.

• Maintain visual consistency
  Use the same tone and sentence structure across screens to improve predictability and reduce cognitive load.

Media

The new system also provides flexible control over the media content displayed throughout the interface.

Instead of editing media in multiple places, you can now configure all images from a centralized section. By modifying just a few media, you can ensure that the entire experience feels cohesive, consistent, and aligned with the expectations of your users.

Below is the full JSON structure containing all the configurable media elements used throughout the interface.

⬇ Download Media

You are not required to modify the entire structure. The configuration is highly flexible, allowing you to override only the specific media entries you want to customize. If a given key is not explicitly redefined, the SDK will automatically fall back to its default value—ensuring smooth operation even with partial configurations.

This gives you full control over the media without unnecessary complexity, making it easier to maintain consistency and adapt the interface to your product's look and feel.

Example of media configuration:

"media": {
    "instructions": {
        "desktopPassive": "/images/selfie_desktop.png",
        "mobilePassive": "/images/selfie_mobile.png",
        "desktopActive": "/images/selfie-active_desktop.png",
        "mobileActive": "/images/selfie-active.gif"
    },
}

Recommendations

File format

We support all image formats natively handled by the user's web browser, but we recommend modern formats for the best balance of quality and file size.

• Static images: Use WebP (best for web) or standard JPEG/PNG. Use PNG only if you need transparency.
• Animated images: Use GIF for very short, simple animations.

File weight and performance

The larger the file size, the longer it will take to load. Large files can significantly slow down the rendering of your content, especially for users on slower network connections or older devices.

Descriptive and Accessible Visuals

• Prioritize descriptive, instructional visuals
  Illustrations and animations should clearly demonstrate the expected user behavior:
  ✦ Example: Show how to position the face, maintain lighting, or perform head movements.

• All media should include alternative text for screen readers
  Alternative text can be configured directly in the JSON text structure. These descriptions help users with visual impairments understand the context or purpose of the image or animation.

• Make alternative text specific and actionable
  ✦ Example: “Illustration of a person aligning their face in the oval frame” is more useful than “Selfie image”.

• Avoid leaving media without a text fallback
  When media is purely visual, ensure it doesn’t carry the sole instructional value. Pair with a textual explanation for redundancy and accessibility.

• Looping animations should not distract
  Loop behavior can be helpful when the action needs to be repeated, but it should not cause visual fatigue or interfere with reading other elements on screen.

Style

The new system based on design tokens transforms how you customize and manage the interface across your product.

Instead of manually overriding styles in multiple places, you can now adjust a centralized set of tokens that control key visual properties such as colors, typography, and more. By updating just a few parameters, you can apply consistent branding across all components and views.

This not only helps ensure visual consistency and accessibility, but also reduces the effort and time required for implementation and future maintenance. Design tokens act as a single source of truth for your UI’s appearance, making the customization process more scalable, predictable, and easier to maintain over time.

Below is the full JSON structure containing all the configurable styles used throughout the interface.

⬇ Download Styles

You are not required to modify the entire structure.

Three Levels of Customization

The customization system is structured in three progressive levels:

1. Theme Level (Global)

Apply your brand’s visual identity across the interface by adjusting a centralized set of tokens:

• Brand colors (primary and secondary)
• Typography (primary and secondary font families)

This is the recommended starting point for fast, system-wide consistency.

2. Component Level

Override the appearance of specific UI elements without affecting the rest of the system:

• Header
• Buttons (primary, secondary, icon)
• Cards
• Spinner

Control design tokens such as colors, borders, and icon styles at the component level.

3. Interactive States

Define how components behave visually in response to user actions, such as hover or pressed states. Customize:

• Backgrounds
• Icon and text colors
• Border styles

This level provides precision over interactive behavior and reinforces a consistent experience.

Recommendations

Typography

• font.familyPrimary
  Used in larger sizes for titles and headers. A slightly more expressive or “display-style” font can be used here, as long as legibility is preserved.

• font.familySecondary
  Applied to subtitles, buttons, and general interface components. This font should prioritize readability at small sizes and across different screen types.

Colors

• brandPrimaryColor
  Represents your main brand color, used in primary buttons and highlights.

• brandSecondaryColor
  Typically used in secondary buttons and accent elements. Choose a color that complements your primary brand tone.

• darkTextColor
  Used for primary text (titles, subtitles, body content).
  Given that the SDK background is white, this value should always be a dark tone to ensure proper contrast. Avoid using light or low-contrast colors here.

Accessibility and Contrast

• The default theme already meets WCAG 2.2 contrast standards for accessibility.

• When modifying colors—especially darkTextColor, brandPrimaryColor, or background tones—it is the integrator’s responsibility to validate the contrast ratios.

• We recommend using online contrast checker tools such as:
  • WebAIM Contrast Checker
  • Colorable

Theme Level

The first level of configuration, known as the theme level, allows you to personalize the interface by adjusting just a few key parameters related to colors and fonts.

Using the styles.theme configuration, you can define the following core design tokens:

• darkTextColor – Main color used for high-contrast text.
• brandPrimaryColor – Main brand color used across the UI for primary actions and highlights.
• brandSecondaryColor – Secondary brand color used for accenting and complementary elements.
• font.familyPrimary – The primary typeface used throughout the interface.
• font.familySecondary – A secondary typeface for alternative or stylistic uses.

IMPORTANT

• Any changes made to these values will have a global impact on the appearance of components across the system.
• It's important to validate your customizations carefully to ensure they maintain a consistent and accessible user experience.

This approach provides a fast and efficient way to align the interface with your brand identity without needing to adjust individual components.

Applies to

• darkTextColor: Titles, subtitles, feedback messages in capture, icons.
• brandPrimaryColor: Loading Spinner, background color of primary buttons, color text of secondary buttons, close button color.
• brandSecondaryColor: background color of secondary buttons.
• font.familyPrimary: Titles.
• font.familySecondary: Subtitles, buttons and feedback messages in capture.

Here is an example in desktop of how screens in the flow would visually change by updating the parameters mentioned above.

"styles": {
    "theme": {
        "darkTextColor": "#242323",
        "brandPrimaryColor": "#A50050",
        "brandSecondaryColor": "#E5D0DA",
        "font": { 
            "familyPrimary": "Arial", 
            "familySecondary": "Open Sans" 
        }
    }
}

Desktop

	Default	After Customization
Loading
Instructions Passive
Instructions Active
Loading Capture
Capture Passive
Capture Passive (help modal)
Capture Active
Capture Active (help modal)
Review (only Passive flow)
Exit confirmation modal (apply all screens)
Error Permissions
Error Verification
Error No Movement
Focus Error

Mobile

	Default	After Customization
Loading
Instructions Passive
Instructions Active
Loading Capture
Capture Passive
Capture Passive (help modal)
Capture Active
Capture Active (help modal)
Review (only Passive flow)
Exit confirmation modal (apply all screens)
Error Permissions
Error Verification
Error No Movement
Focus Error

Component Level

While the custom level offers a fast way to globally apply brand identity, sometimes finer control is needed.

That’s where the component-level customization comes in.

This second level allows you to override the styles of specific components in the interface.

Using the styles.components configuration, you can target individual UI elements—such as buttons, icon buttons, spinner, or header adjust their appearance more precisely.

You can define properties like colors, borders, icons, and more for each component.

This provides the flexibility to go beyond global themes and fine-tune the user experience in specific screens or use cases, always maintaining visual coherence with the broader design system.

IMPORTANT

• Keep in mind that when you modify a component, the changes will apply across all views where that component is used.
• For example, if you change the colors of the primary button, the update will reflect in every view where that button appears. It’s not possible to modify a single instance — all buttons using that parameter will be affected.

In the following section, you'll find a list of customizable components, along with the available parameters and the screens where they are applied.

Header

The Header is a key visual and structural element within the interface.
It appears at the top of the screen and contains the logo. The logo can be customised using the media.logo and media.logoSmall options in the configuration.

Desktop	Mobile

As explained in the configuration section, it is possible to remove the logo from the interface by adjusting the appropriate parameter.

When the logo is disabled, the entire header component will be hidden from the view.

If your integration does not require a logo or you prefer a more minimal interface, disabling the header can help simplify the visual layout.

Applies to

	Desktop	Mobile
Loading
Instructions Passive
Instructions Active
Capture Passive
Capture Active
Review (only Passive flow)
Error Permissions
Error Verification
Error Mo Movement
Focus Error

Parameter	Description
borderColor	Border color
borderWidth	Border width
backgroundColor	Background color

Example of header modified:

"styles": {
    "components": {
        "header": {
            "backgroundColor": "#E5D0DA",
            "borderColor": "#A50050",
            "borderWidth": "15px"
        }
    }
}

Button

General

Applies to

All buttons

The button component allows for detailed visual customization to better match your brand identity and UI style. You can configure the following aspects individually:

• Background color
• Border color
• Border width
• Text (label) color
• Border radius

Within the product, the following button types are supported:

• Primary button – used for main actions

• Secondary button – used for complementary or navigation actions

• Tertiary button – used for cancel or exit actions

• Icon button – used for actions represented by an icon (e.g., closing, skipping, etc.)

Each type has its own set of customizable properties, allowing you to adjust the appearance of each variant independently. However, the borderRadius property is shared across all button types. This means that by changing it once, the same corner rounding will apply to primary, secondary, and icon buttons. For example, if your product design uses a flatter style, setting the borderRadius to 0px will make all buttons appear more rectangular. On the other hand, increasing this value will result in a more rounded appearance across the interface. This flexibility lets you fine-tune the visual feel of the interface while maintaining consistency across all interactive elements.

Keep in mind that when you modify the button, the changes will apply across all views where it is used

Primary Button

This is the button used for main actions, related to starting or continuing the process.

Applies to

	Desktop	Mobile
Instructions Passive
Instructions Active
Review (only Passive flow)
Error Verification
Error No movement
Focus Error

These properties allow you to fine-tune its appearance and behavior to better align with your brand and user experience needs.

Below is a comprehensive list of all the properties that can be customized for the button component.

Parameter	Description
backgroundColorPrimary	Background color
labelColorPrimary	Label color (text)
borderColorPrimary	Border color
borderWidthPrimary	Border width

Example of primary button modified:

"styles": {
    "components": {
        "button": {
            "backgroundColorPrimary": "#A50050",
            "labelColorPrimary": "#FFFFFF",
            "borderColorPrimary": "#E5D0DA",
            "borderWidthPrimary": "5px",
            "buttonRadius": "15px"
        }
    }
}

Secondary Button

This button is for secondary actions, such as repeating the previous step.

Applies to

	Desktop	Mobile
Review (only Passive flow)

These properties allow you to fine-tune its appearance and behavior to better align with your brand and user experience needs.

Below is a comprehensive list of all the properties that can be customized for the button component.

Parameter	Description
backgroundColorSecondary	Background color
labelColorSecondary	Label color (text)
borderColorSecondary	Border color
borderWidthSecondary	Border width

Example of secondary button modified:

"styles": {
    "components": {
        "button": {
            "backgroundColorSecondary": "#E5D0DA",
            "labelColorSecondary": "#000000",
            "borderColorSecondary": "#A50050",
            "borderWidthSecondary": "5px",
            "buttonRadius": "15px"
        }
    }
}

Tertiary Button

This button is for exit actions, like canceling the process.

Tertiary	Tertiary Inverse

Applies to

	Desktop	Mobile
Instructions Passive
Instructions Active
Capture Passive (help button)
Capture Active (help button)
Exit confirmation modal (apply all screens)

These properties allow you to fine-tune its appearance and behavior to better align with your brand and user experience needs.

Below is a comprehensive list of all the properties that can be customized for the button component.

Parameter	Description
backgroundColorTertiary	Background color
labelColorTertiary	Label color (text)
borderColorTertiary	Border color
borderWidthTertiary	Border width
backgroundColorTertiaryInverse	Background color for specific situations
labelColorTertiarInverse	Label color (text) for specific situations
borderColorTertiaryInverse	Border color for specific situations
borderWidthTertiaryInverse	Border width for specific situations

Please note that both the default tertiary style and its inverse are applied to the capture help button. - When there is no detection, the background is captured by the camera and therefore requires certain styles to prevent the text from being unreadable. In this case, the inverse mode is applied. - When there is detection, the background turns white and the text should be dark. In this case, the default mode is used.

Tertiary help button default (with detection)	Tertiary help button inverse (without detection)

Example of tertiary button modified:

"styles": {
    "button": {
        "backgroundColorTertiary": "#F3F6FB",
        "iconColorTertiary": "#6D4C41",
        "labelColorTertiary": "#6D4C41",
        "borderColorTertiary": "#BCAAA4",
        "borderWidthTertiary": "5px",
        "backgroundColorTertiaryInverse": "#F7EAF2",
        "iconColorTertiaryInverse": "#C2185B",
        "labelColorTertiaryInverse": "#C2185B",
        "borderColorTertiaryInverse": "#F8BBD0",
        "borderWidthTertiaryInverse": "5px",
        "buttonRadius": "15px"
    }
}

Tertiary	Tertiary Inverse

Interactive states

Applies to

	Desktop	Mobile
Instructions Passive
Instructions Active
Review (only Passive flow)
Error Verification
Error No movement

The SDK allows you to customize the interactive states of buttons—such as hover and pressed—through a set of general-purpose color overlay parameters:

Parameter	Description
colorDefaultHover	Hover color
colorDefaultPressed	Pressed color
colorInverseHover	Hover color inverse
colorInversePressed	Pressed color inverse

These parameters apply a semi-transparent color layer over the button's base style during interaction. This is useful for creating subtle feedback without redefining the full component style.

Default behavior

Primary buttons use a light semi-transparent overlay on top of their background.

Secondary and icon buttons use a dark overlay to create a stronger contrast on interaction.

This approach offers a quick and effective way to visually distinguish interactive states with minimal configuration effort.

When to use these parameters

Use the colorDefault and colorInverse values when:

• You want to maintain the button’s base appearance.
• You just need a consistent visual cue (e.g., a light/dark tint on hover/pressed).
• You prefer not to modify background, text, or borders individually.

When to use specific parameters instead

If you want full control over the button’s appearance during interactive states (e.g., change text color, background color, borders, etc.), you should use the dedicated interaction parameters available for each button type:

• backgroundColorPrimaryHover, labelColorPrimaryPressed, etc.
• These allow granular changes to every visual aspect of the button.

This distinction gives you the flexibility to:

• Apply a fast, unified effect across buttons using overlay colors, or
• Create custom interaction styles on a per-component basis when needed.

Below is a comprehensive list of all the properties that can be customized for the button component.

Parameter	Description
backgroundColorPrimaryHover	Background color when hovered
backgroundColorPrimaryPressed	Background color when pressed
labelColorPrimaryHover	Label color (text) when hovered
labelColorPrimaryPressed	Label color (text) when pressed
borderColorPrimaryHover	Border color when hovered
borderColorPrimaryPressed	Border color when pressed
borderWidthPrimaryHover	Border width when hovered
borderWidthPrimaryPressed	Border width when pressed
backgroundColorSecondaryHover	Background color when hovered
backgroundColorSecondaryPressed	Background color when pressed
labelColorSecondaryHover	Label color (text) when hovered
labelColorSecondaryPressed	Label color (text) when pressed
borderColorSecondaryHover	Border color when hovered
borderColorSecondaryPressed	Border color when pressed
borderWidthSecondaryHover	Border width when hovered
borderWidthSecondaryPressed	Border width when pressed
backgroundColorTertiaryHover	Background color when hovered
backgroundColorTertiaryPressed	Background color when pressed
labelColorTertiaryHover	Label color (text) when hovered
labelColorTertiaryPressed	Label color (text) when pressed
borderColorTertiaryHover	Border color when hovered
borderColorTertiaryPressed	Border color when pressed
borderWidthTertiaryHover	Border width when hovered
borderWidthTertiaryPressed	Border width when pressed

Example of the interactive states of the button modified:

"styles": {
    "components": {
        "button": {
            "colorDefaultHover":"#e69da9",
            "colorDefaultPressed":"#a8641c",
            "colorInverseHover":"#b55ef0",
            "colorInversePressed":"#b1f6e3",
            "interactiveStates": {
                "backgroundColorPrimaryHover": "#F0E0F0",
                "backgroundColorPrimaryPressed": "#D0B0D0",
                "labelColorPrimaryHover": "#222222",
                "labelColorPrimaryPressed": "#111111",
                "borderColorPrimaryHover": "#A50050",
                "borderColorPrimaryPressed": "#800030",
                "borderWidthPrimaryHover": "3px",
                "borderWidthPrimaryPressed": "4px",
                "backgroundColorSecondaryHover": "#E0F0E0",
                "backgroundColorSecondaryPressed": "#B0D0B0",
                "labelColorSecondaryHover": "#222222",
                "labelColorSecondaryPressed": "#111111",
                "borderColorSecondaryHover": "#0050A5",
                "borderColorSecondaryPressed": "#003080",
                "borderWidthSecondaryHover": "3px",
                "borderWidthSecondaryPressed": "4px",
                "backgroundColorTertiaryHover": "#F8BBD0",
                "backgroundColorTertiaryPressed": "#C2185B",
                "iconColorTertiaryHover": "#C2185B",
                "iconColorTertiaryPressed": "#F8BBD0",
                "labelColorTertiaryHover": "#C2185B",
                "labelColorTertiaryPressed": "#F8BBD0",
                "borderColorTertiaryHover": "#F8BBD0",
                "borderColorTertiaryPressed": "#C2185B",
                "borderWidthTertiaryHover": "2px",
                "borderWidthTertiaryPressed": "4px",
                "backgroundColorTertiaryInverseHover": "#E3F2FD",
                "backgroundColorTertiaryInversePressed": "#90CAF9",
                "iconColorTertiaryInverseHover": "#1976D2",
                "iconColorTertiaryInversePressed": "#E3F2FD",
                "labelColorTertiaryInverseHover": "#1976D2",
                "labelColorTertiaryInversePressed": "#E3F2FD",
                "borderColorTertiaryInverseHover": "#E3F2FD",
                "borderColorTertiaryInversePressed": "#1976D2",
                "borderWidthTertiaryInverseHover": "2px",
                "borderWidthTertiaryInversePressed": "4px"
            }
        }
    }
}

Icon button

The icon button component is designed for actions that are represented primarily by an icon rather than text. It is commonly used for secondary or contextual actions.

Icon buttons help keep the interface clean and intuitive, especially in places where space is limited or where a visual symbol is more effective than a label.

Close button

Applies to

	Desktop	Mobile
Instructions Passive
Instructions Active
Capture Passive
Capture Active
Review (only Passive flow)
Error Permissions

You can fully customize the appearance of icon buttons to match your brand and user experience requirements.

This includes adjusting the icon color, background, border, and interactive states such as hover and pressed.

By fine-tuning these properties, you ensure that icon buttons remain visually consistent and accessible throughout your application.

Keep in mind that when you modify the icon button, the changes will apply across all views where it is used, regardless of whether the icon changes.

Below is a comprehensive list of all the properties that can be customized for the icon button component.

Parameter	Description
backgroundColorTertiary	Background color
iconColorTertiary	Icon color
borderColorTertiary	Border color
borderWidthTertiary	Border width
borderRadius	Border radius
colorHover	Color when hovered
colorPressed	Color when pressed

Example of icon button modified:

"styles": {
    "components": {
        "iconButton": {
            "backgroundColorTertiary": "#E5D0DA",
            "iconColorTertiary": "#A50050",
            "borderColorTertiary": "#A50050",
            "borderWidthTertiary": "5px",
            "borderRadius": "8px",
            "colorHover": "#F0E0F0",
            "colorPressed": "#D0B0D0"
        }
    }
}

Interactive states

Interactive states define how the button component visually responds to user interactions such as hovering or pressing.

These properties allow you to customize the appearance of the button in different states, ensuring a consistent and engaging user experience that aligns with your brand guidelines.

You can adjust colors, borders, and other visual aspects for each interaction state to provide clear feedback and improve usability.

Applies to

	Desktop	Mobile
Instructions Passive
Instructions Active
Capture Passive
Capture Active
Review (only Passive flow)
Error Permissions

Below is a comprehensive list of all the properties that can be customized for the icon button component.

Parameter	Description
backgroundColorTertiaryHover	Background color when hovered
backgroundColorTertiaryPressed	Background color when pressed
iconColorTertiaryHover	Icon color when hovered
iconColorTertiaryPressed	Icon color when pressed
borderColorTertiaryHover	Border color when hovered
borderColorTertiaryHover	Border color when pressed
borderWidthTertiaryHover	Border width when hovered
borderWidthTertiaryPressed	Border width when pressed

Example of interactive states of the icon button modified:

"styles": {
    "components": {
        "iconButton": {
            "interactiveStates": {
                "backgroundColorTertiaryHover": "#F5F5F5",
                "backgroundColorTertiaryPressed": "#E5D0DA",
                "iconColorTertiaryHover": "#A50050",
                "iconColorTertiaryPressed": "#E5D0DA",
                "borderColorTertiaryHover": "#E5D0DA",
                "borderColorTertiaryPressed": "#A50050",
                "borderWidthTertiaryHover": "2px",
                "borderWidthTertiaryPressed": "4px"
            }
        }
    }
}

Spinner

The spinner component provides a visual indication that a process is ongoing, such as loading data or waiting for a response. It helps reassure users that the system is working and encourages them to wait until the current operation is complete.

Applies to

	Desktop	Mobile
Loading
Capture

You can customize the appearance of the spinner to match your brand's style.

Below is a comprehensive list of all the properties that can be customized for the spinner component.

Parameter	Description
containerColor	Container color
progressColor	Progress color

Example of the spinner modified:

"styles": {
    "components": {
        "spinner": {
            "containerColor": "#E5D0DA",
            "progressColor": "#A50050"
        }
    }
}

Modal

The modal component is a popup window that appears on top of the main application content. It is used to display important information or to request user action before continuing.

Help modal

In this case, the modal component provides guidance on how to complete the capture process. For each capture status, it displays the corresponding instructions needed to continue the flow. To learn more about how to enable or disable the help button, go to helpModalShow in the configuration section.

Applies to

	Desktop	Mobile
Capture Passive
Capture Active

Error Modal

In this case, the modal provides information about errors that occurred during the capture process.

Applies to

	Desktop	Mobile
Focus Error
Error Verification
Error No movement

You can customize the appearance of the help modal to match your brand's style.

Below is a comprehensive list of all the properties that can be customized for the help modal component.

Parameter	Description
backgroundColor	Background color
borderColor	Border color
borderRadius	Border radius
borderWidth	Border width
descriptionColor	Description color
titleColor	Title color

Example of the help modal modified:

"styles": {
    "components": {
        "modal": {
            "backgroundColor": "#E5D0DA",
            "borderColor": "#A50050",
            "borderRadius": "2px",
            "borderWidth": "4px",
            "descriptionColor": "#A50050",
            "titleColor": "#A50050"
        }
    }
}

Exit confirmation modal

In this case, the modal acts as a confirmation dialog that asks the user if they really want to leave the process, preventing accidental exits.

|

Applies to

	Desktop	Mobile
All screens

You can customize the appearance of the exit confirmation modal to match your brand's style.

Below is a comprehensive list of all the properties that can be customized for the exit confirmation modal component.

Parameter	Description
backgroundColor	Background color
borderColor	Border color
borderRadius	Border radius
borderWidth	Border width
descriptionColor	Description color
titleColor	Title color

Example of the exit confirmation modal modified:

"styles": {
    "components": {
        "modal": {
            "backgroundColor": "#E5D0DA",
            "borderColor": "#A50050",
            "borderRadius": "2px",
            "borderWidth": "4px",
            "descriptionColor": "#A50050",
            "titleColor": "#A50050"
        }
    }
}