Styling Drop-Ins

All Drop-In UI Components are required to be styled to match your brand’s look and feel. This is accomplished by passing a styles object into the “render” function of the Client SDKs.

The styles object is a required parameter and must be passed in every time you render a Drop-In UI Component.

Avoid directly styling the DOM

Please avoid directly styling the DOM. We cannot guarantee that IDs, classes, and DOM structure will remain consistent as we maintain these components.

Styling Options

There are four main nested sections of the styles object: colors, typography, buttons, and formInputs. Below is a breakdown of each section:

Colors

The colors section is used to define the general color palette of the Drop-In UI Components.

Colors data structure
1{
2  "colors": {
3    "background": "#fff",
4    "primary": "#655bef",
5    "secondary": "rgba(101, 91, 239, 0.16)",
6    "success": "#49d8cd",
7    "warning": "#d89a49",
8    "error": "#d84949"
9  }
10}

Typography

The typography section is used to define the font styles of the Drop-In UI Components.

Typography data structure
1{
2  "typography": {
3    "common": {
4      "color": "#222",
5      "family": "Inter, sans-serif",
6      "size": "14px"
7    },
8    "headings": {
9      "pageHeading": {
10        "color": "#222",
11        "family": "Inter, sans-serif",
12        "size": "32px",
13        "weight": "800"
14      },
15      "pageSubheading": {
16        "color": "#6c6c6c",
17        "family": "Inter, sans-serif",
18        "size": "18px",
19        "weight": "400"
20      },
21      "sectionHeading": {
22        "color": "#655bef",
23        "family": "Inter, sans-serif",
24        "size": "24px",
25        "weight": "800"
26      },
27      "sectionSubheading": {
28        "color": "#555",
29        "family": "Inter, sans-serif",
30        "size": "14px",
31        "weight": "400"
32      }
33    },
34    "formInputLabels": {
35      "color": "#222",
36      "family": "Inter, sans-serif",
37      "size": "14px",
38      "weight": "400"
39    }
40  }
41}

Buttons

The buttons section is used to define the styles the various states of buttons used in the Drop-In UI Components.

Buttons data structure
1{
2  "buttons": {
3    "primary": {
4      "default": {
5        "backgroundColor": "#655bef",
6        "border": {
7          "color": "#fff",
8          "radius": "8px",
9          "width": "3px"
10        },
11        "font": {
12          "color": "#fff",
13          "family": "Inter, sans-serif",
14          "size": "16px",
15          "weight": "600"
16        }
17      },
18      "hover": {
19        "backgroundColor": "#4d45ba",
20        "border": {
21          "color": "#fff",
22          "radius": "8px",
23          "width": "3px"
24        },
25        "font": {
26          "color": "#fff"
27        }
28      },
29      "active": {
30        "backgroundColor": "#655bef",
31        "border": {
32          "color": "#beb9f8",
33          "radius": "8px",
34          "width": "3px"
35        },
36        "font": {
37          "color": "#fff"
38        }
39      },
40      "disabled": {
41        "backgroundColor": "#d4d6d6",
42        "border": {
43          "color": "#fff",
44          "radius": "8px",
45          "width": "3px"
46        },
47        "font": {
48          "color": "#fff"
49        }
50      }
51    }
52  }
53}

Form Inputs

The formInputs section is used to define the styles of form inputs, such as text select inputs, in the Drop-In UI Components.

Form Inputs data structure
1{
2  "formInputs": {
3    "default": {
4      "backgroundColor": "#fff",
5      "border": {
6        "color": "#d4d6d6",
7        "radius": "4px",
8        "width": "2px"
9      },
10      "font": {
11        "color": "#000",
12        "placeholderColor": "#8e8e8e",
13        "size": "14px",
14        "weight": "400"
15      }
16    },
17    "hover": {
18      "backgroundColor": "#fff",
19      "border": {
20        "color": "#d4d6d6",
21        "radius": "4px",
22        "width": "2px"
23      },
24      "font": {
25        "color": "#000"
26      }
27    },
28    "active": {
29      "backgroundColor": "#fff",
30      "border": {
31        "color": "#655bef",
32        "radius": "4px",
33        "width": "2px"
34      },
35      "font": {
36        "color": "#000"
37      }
38    },
39    "disabled": {
40      "backgroundColor": "#e3e6e6",
41      "border": {
42        "color": "#d4d6d6",
43        "radius": "4px",
44        "width": "2px"
45      },
46      "font": {
47        "color": "#8e8e8e"
48      }
49    }
50  }
51}

Styles Object

Putting this all together, here is the full styles object with example values. Every value is required.

Styles object
1{
2  "colors": {
3    "background": "#fff",
4    "primary": "#655bef",
5    "secondary": "rgba(101, 91, 239, 0.16)",
6    "success": "#49d8cd",
7    "warning": "#d89a49",
8    "error": "#d84949"
9  },
10  "typography": {
11    "common": {
12      "color": "#222",
13      "family": "Inter, sans-serif",
14      "size": "14px"
15    },
16    "headings": {
17      "pageHeading": {
18        "color": "#222",
19        "family": "Inter, sans-serif",
20        "size": "32px",
21        "weight": "800"
22      },
23      "pageSubheading": {
24        "color": "#6c6c6c",
25        "family": "Inter, sans-serif",
26        "size": "18px",
27        "weight": "400"
28      },
29      "sectionHeading": {
30        "color": "#655bef",
31        "family": "Inter, sans-serif",
32        "size": "24px",
33        "weight": "800"
34      },
35      "sectionSubheading": {
36        "color": "#555",
37        "family": "Inter, sans-serif",
38        "size": "14px",
39        "weight": "400"
40      }
41    },
42    "formInputLabels": {
43      "color": "#222",
44      "family": "Inter, sans-serif",
45      "size": "14px",
46      "weight": "400"
47    }
48  },
49  "buttons": {
50    "primary": {
51      "default": {
52        "backgroundColor": "#655bef",
53        "border": {
54          "color": "#fff",
55          "radius": "8px",
56          "width": "3px"
57        },
58        "font": {
59          "color": "#fff",
60          "family": "Inter, sans-serif",
61          "size": "16px",
62          "weight": "600"
63        }
64      },
65      "hover": {
66        "backgroundColor": "#4d45ba",
67        "border": {
68          "color": "#fff",
69          "radius": "8px",
70          "width": "3px"
71        },
72        "font": {
73          "color": "#fff"
74        }
75      },
76      "active": {
77        "backgroundColor": "#655bef",
78        "border": {
79          "color": "#beb9f8",
80          "radius": "8px",
81          "width": "3px"
82        },
83        "font": {
84          "color": "#fff"
85        }
86      },
87      "disabled": {
88        "backgroundColor": "#d4d6d6",
89        "border": {
90          "color": "#fff",
91          "radius": "8px",
92          "width": "3px"
93        },
94        "font": {
95          "color": "#fff"
96        }
97      }
98    }
99  },
100  "formInputs": {
101    "default": {
102      "backgroundColor": "#fff",
103      "border": {
104        "color": "#d4d6d6",
105        "radius": "4px",
106        "width": "2px"
107      },
108      "font": {
109        "color": "#000",
110        "placeholderColor": "#8e8e8e",
111        "size": "14px",
112        "weight": "400"
113      }
114    },
115    "hover": {
116      "backgroundColor": "#fff",
117      "border": {
118        "color": "#d4d6d6",
119        "radius": "4px",
120        "width": "2px"
121      },
122      "font": {
123        "color": "#000"
124      }
125    },
126    "active": {
127      "backgroundColor": "#fff",
128      "border": {
129        "color": "#655bef",
130        "radius": "4px",
131        "width": "2px"
132      },
133      "font": {
134        "color": "#000"
135      }
136    },
137    "disabled": {
138      "backgroundColor": "#e3e6e6",
139      "border": {
140        "color": "#d4d6d6",
141        "radius": "4px",
142        "width": "2px"
143      },
144      "font": {
145        "color": "#8e8e8e"
146      }
147    }
148  }
149}