All Drop-In UI Components (aka “Drop-Ins”) can be customized across Web, iOS and Android to promote consistency in your brand.

In this guide, we discuss:

• Theming Drop-In UI Components
• Theme Definitions

Theming Drop-Ins

To change the look and feel you will need to define a collection of style variables, called a theme. The theme is passed directly into the render command of the Client SDKs. This enables different theme definitions per Drop-In instance included in your app.

1
<script type="module">
2
    import { renderW9Collection } from "https://js.withabound.com/latest-major/abound-client-sdk.js";
3
4
    // define your brand's theme object
5
    const yourBrandsTheme = {
6
        color: {
7
            background: "#ffffff",
8
        },
9
        shape: {
10
            cornerRadius: "3px",
11
        },
12
        text: {
13
            size: "16px",
14
        },
15
        button: {
16
            color: {
17
                activeBackground: "#655BEF",
18
            },
19
        },
20
    };
21
22
// define your brand's custom text content object
23
const yourBrandsContent = {
24
submitButton: "Complete",
25
loadingButton: "In Progress",
26
loadingPrompt: "Please Wait",
27
errorMessage: "Incorrect",
28
};
29
30
    renderW9Collection({
31
        accessToken: "accessToken_sampleeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2OTY5ODczNTcsImV4cCI6MTY5Njk4NzY1NywiYXVkIjoiYXBwSWRfc2FtcGxlcU5oVmNkWVFZVSIsImlzcyI6Imh0dHBzOi8vc2FuZGJveC1hcGkud2l0aGFib3VuZC5jb20vdjQiLCJzdWIiOiJ1c2VySWRfc2FtcGxlWEdNRm5oT3BlUiJ9.-NrPVQvsnM8vJouyuP5yeFGlYb1xGgR-gS3v87p5BQk",
32
        theme: yourBrandsTheme, // add your custom theme to the render method parameters.
33
      	content: yourBrandsContent // add your custom content to the render method parameters.
34
    });
35
36
</script>

Theme Definitions

Style variables are organized into three primary sections: Text, Shape, and Color.

Additionally, there are component-specific sections, such as Button, that allow for further styling that is not covered in the primary sections.

Text Style Variables

All style variables in this section are nested under the text namespace (e.g. yourBrandsTheme.text.size).

Shape Style Variables

All style variables in this section are nested under the shape namespace (e.g. yourBrandsTheme.shape.cornerRadius).

Color Style Variables

All style variables in this section are nested under the color namespace (e.g. yourBrandsTheme.color.background).

Button Style Variables

All style variables in this section are nested under the color namespace (e.g. yourBrandsTheme.button.text.size, yourBrandsTheme.button.color.border).

Custom Content Definitions

Text content can be customized for a specific component using the content parameter. See the documentation for each component for more information.