Themes & Shapes

Global themes and shape

Didomi provides 5 default themes and a custom theme that you can edit to fit your branding needs.

Themes

Didomi provides for each organization 5 themes (default, abyss, sunset, ocean and lagoon) and a custom theme you can edit.

Use Didomi themes

You first need to retrieve the id of the theme you want to use.

To retrieve themes of your organization as well as the one provided by Didomi, send a GET request on /widgets/themes.

GET https://api.didomi.io/widgets/themes?organization_id=YOUR_ORG_ID
[
  {
    /**
    * Use id of widget with name 'custom'
    */
    "id": "String",
    "name": "default",
    "created_at": "Date",
    "updated_at": "Date",
    "organization_id": "String",
    "color_1": "String",
    "color_2": "String",
    "color_3": "String",
    "color_4": "String",
    "color_5": "String",
    "color_6": "String",
    "color_7": "String",
    "color_8": "String"
  }
]

💡 To retrieve global themes only, send a GET request on /widgets/themes?organization_id=null

Then, you need assign it to your widget with a PATCH request on /widgets/{widget_id}.

POST https://api.didomi.io/widgets/themes?organization_id=YOUR_ORG_ID

{
  "theme_id": "theme_id",
}

Edit custom theme

You can edit the custom theme only.

To edit custom theme, send a PATCH request on /widgets/themes/{custom_theme_id}.

💡 custom_theme_id can be retrieved by sending a GET request on /widgets/themes/{widget_id}.

PATCH https://api.didomi.io/widgets/themes/{custom_theme_id}?organization_id=YOUR_ORG_ID

{
  "color_1": "String",
  "color_2": "String",
  "color_3": "String",
  "color_4": "String",
  "color_5": "String",
  "color_6": "String",
  "color_7": "String",
  "color_8": "String"
}

We support:

• Hexadecimal code (#FFFFFF)

• RGB (rgb(0, 0, 0))

• RGBA (rgb(0, 0, 0, 1))

• transparent property.

Shapes

To edit the shape of a widget, send a PATCH request on /widgets/{id}.

layout_shape is an enum and can be smoothed, rounded or squared.

PATCH https://api.didomi.io/widgets/{id}?organization_id=YOUR_ORG_ID

{
  "layout_shape": "smoothed"
}