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.

{
  "public_api_key": "pk_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "config_version": "1.2",
  "theme": "light",
  "custom_styles": {
    "cs-base": {
      "color": "red"
    },    
    "cs-highlight": {
      "background": "yellow"
    }
  }
}

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:

{
  "public_api_key": "pk_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "config_version": "1.1",
  ...
  "custom_styles": {
    "cs-base": {
      "color": "#333",
    },
    "cs-subtext": {
      "color": "#666",
    },
    "cs-special": {
      "background": "#fff",
      "color": "#333",
      "border-color": "#e8e8e8",
    },
    "cs-error": {
      "color": "#f4532f",
      "border-color": "#f4532f",
    },
    "cs-button": {
      "color": "#000",
      "background": "#2a9ff8",
    },
    "cs-select": {
      "background": "#fff",
    },
  },
}