Custom Styles

Search…

Custom Styles

Extensively customise the appearance of the widget

There are three different themes for the widget. Integrations should find the theme that most closely matches their desired style, then apply modifications to that.
1
{
2
  "public_api_key": "pk_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
3
  "config_version": "1.2",
4
  "theme": "light",
5
  "custom_styles": {
6
    "cs-base": {
7
      "color": "red"
8
    },    
9
    "cs-highlight": {
10
      "background": "yellow"
11
    }
12
  }
13
}
Copied!
Component Styles
Configurable Attributes
​
cs-base
cs-button
cs-error
cs-highlight
cs-interactive
cs-select
cs-special
cs-subtext
cs-icon
background
border-color
color
For example:
1
{
2
  "public_api_key": "pk_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
3
  "config_version": "1.1",
4
  ...
5
  "custom_styles": {
6
    "cs-base": {
7
      "color": "#333",
8
    },
9
    "cs-subtext": {
10
      "color": "#666",
11
    },
12
    "cs-special": {
13
      "background": "#fff",
14
      "color": "#333",
15
      "border-color": "#e8e8e8",
16
    },
17
    "cs-error": {
18
      "color": "#f4532f",
19
      "border-color": "#f4532f",
20
    },
21
    "cs-button": {
22
      "color": "#000",
23
      "background": "#2a9ff8",
24
    },
25
    "cs-select": {
26
      "background": "#fff",
27
    },
28
  },
29
}
Copied!

Settlement Parameters

Identity

Last modified 7mo ago

Copy link