Options

In this section, we will detail all options available for every elements described in the Look & Feel page of a Privacy request widget.

• ComponentOptionValue

• DidomiButtonOptions

• DidomiCardOptions

• DidomiFormFieldOptions

• DidomiImageOptions

• DidomiInputOptions

• DidomiPreferenceOptions

• DidomiPreferenceValuesOptions

• DidomiPurposeOptions

• DidomiStyle

• DidomiTextOptions

• DidomiPurposeInputType

• DidomiRadioOptions

• DidomiCheckboxOptions

ComponentOptionValue

ComponentOptionValue corresponds to a CSS property. You can edit the CSS property by adding the value.

Text input options

Option	Description	Example
fontColor	Color of input value	#000000, red, rgb(0, 0, 0)
fontSize	Size of input value	16px
fontWeight	Font weight of input value	600
lineHeight	Line height of input value	18px
borderRadius	Border radius of input	4px
borderColor	Border color of input	#000000, red, rgb(0, 0, 0)
borderWidth	Thickness of input border	1px
errorBorderColor	Color of input border when error	#000000, red, rgb(0, 0, 0)
placeholderColor	Color of input placeholder	#000000, red, rgb(0, 0, 0)
focusShadow	Focus state of input	#000000, red, rgb(0, 0, 0)
backgroundColor	Background color of input	#000000, red, rgb(0, 0, 0), transparent
errorPadding	Padding of input in case of error	16px 34px 16px 8px
padding	Padding of input	16px 34px 16px 8px

Radio button options

Option	Description	Example
backgroundColor	Background color of radio button	#000000, red, rgb(0, 0, 0)
circleColor	Color of radio circle	#000000, red, rgb(0, 0, 0)
borderRadius	Border of radio button	4px
padding	Padding of radio button	8px 12px, 8px 12px 8px 12px
circleBackgroundColor	Background of radio circle of a radio button	#000000, red, rgb(0, 0, 0)
borderColor	Border color of radio circle of a radio button	#000000, red, rgb(0, 0, 0)

Single checkbox options

Option	Description	Example
backgroundColor	Background color of checkbox	#000000, red, rgb(0, 0, 0)
squareColor	Color of checkbox square	#000000, red, rgb(0, 0, 0)
borderRadius	Border radius of checkbox	4px
borderColor	Border color of checkbox	#000000, red, rgb(0, 0, 0)
padding	Padding of checkbox	8px 12px, 8px 12px 8px 12px
tickColor	Tick color of checkbox	#000000, red, rgb(0, 0, 0)

DidomiButtonOptions

DidomiButtonOptions corresponds to buttons found forms that allow you to go to the next step or submit. You can edit the style of the button itself as well as the style of the text within the button. You can also edit the content of the button by adding all translations needed (please view our languages supported and their corresponding codes here).

"style": {
    "default": {
      "backgroundColor": "",
      "padding": "",
      "borderRadius": "",
      "borderWidth": "",
      "boxShadow": "",
      "margin": ""
    }
},
"text": {
    "style": {
        "default": {
            "color": "",
            "fontSize": "",
            "lineHeight": "",
            "fontWeight": ""
        }
    },
    "content": {
        "en": "Confirm",
        "fr": "Confirmer"    
    }
}

DidomiCardOptions

DidomiCardOptions corresponds to a block or a card containing children elements. You can edit the style of DidomiCardOptions by adding camel case CSS properties.

"style": {
   "default": {
      "backgroundColor": "",
      "padding": "",
      "borderRadius": "",
      "borderWidth": "",
      "boxShadow": "",
      "margin": "",
   }
}

DidomiFormFieldOptions

DidomiFormFieldOptions corresponds to all elements related to an input. You can edit the style of input elements and the input itself with DidomiInputOptions.

Element	Description	Component options
label	Label of text input	DidomiStyle
description	Description of text input	DidomiStyle
hint	Hint of text input	DidomiStyle
errorMessage	Error message of text input	DidomiStyle
inputOptions	Text input options	DidomiInputOptions

{
    "label": {
        "style": {
            "default": {}                
        }
    },
    "description": {
         "style": {
            "default": {}                
        }              
    },
    "hint": {
           "style": {
            "default": {}                
        }                
    },
    "errorMessage": {
         "style": {
            "default": {}                
        }                
    },
    "inputOptions": {}
}

DidomiImageOptions

DidomiImage correspond to options provided to edit icon placeholders and their style.

{
      "src": "",
      "style": {
            "default": {
                  "padding": "",
                  "margin": "",
                  "width": ""
            }
      }
}

DidomiInputOptions

DidomiInputOptions corresponds to all style elements related to the input element. You can edit the style of DidomiCardOptions by adding camel case CSS properties.

Element	Description	Component options
fontColor	Color of input value	ComponentOptionValue
fontSize	Size of input value	ComponentOptionValue
fontWeight	Font weight of input value	ComponentOptionValue
lineHeight	Line height of input value	ComponentOptionValue
borderRadius	Border radius of input	ComponentOptionValue
borderColor	Border color of input	ComponentOptionValue
borderWidth	Thickness of input border	ComponentOptionValue
errorBorderColor	Color of input border when error	ComponentOptionValue
placeholderColor	Color of input placeholder	ComponentOptionValue
errorIcon	Error icon in input when error	DidomiStyle
focusShadow	Focus state when input is selected	ComponentOptionValue
backgroundColor	Background color of input	ComponentOptionValue
padding	Padding of input	ComponentOptionValue
errorPadding	Padding of input in case of error	ComponentOptionValue

{
    "fontColor": "",
    "fontSize": "",
    "fontWeight": "",
    "lineHeight": "",
    "borderRadius": "",
    "borderColor": "",
    "borderWidth": "",
    "errorBorderColor": "",
    "placeholderColor": "",
    "backgroundColor": ""
}

DidomiPreferenceOptions

DidomiPreferenceOptions corresponds to all preference elements included in a widget. The style edited in DidomiPreferenceOptions will be applied to all preferences.

Element	Description	Component options
title	Name of preferences.	DidomiStyle
description	Description of preferences.	DidomiStyle
preferenceValuesOptions	Preference values options	DidomiPreferenceValuesOptions

{
    "title": {
      "style": {
            "default": {
                  "backgroundColor": "",
                  "padding": "",
                  "borderRadius": "",
                  "borderWidth": "",
                  "boxShadow": "",
                  "margin": "",
                  "color": "",
                  "fontSize": "",
                  "lineHeight": "",
                  "fontWeight": ""
            }
      }
    },
    "description": {
      "style": {
            "default": {
                  "backgroundColor": "",
                  "padding": "",
                  "borderRadius": "",
                  "borderWidth": "",
                  "boxShadow": "",
                  "margin": "",
                  "color": "",
                  "fontSize": "",
                  "lineHeight": "",
                  "fontWeight": ""
            }
      }
    },
    "preferenceValuesOptions": {}
}

DidomiPreferenceValueOptions

DidomiPreferenceValuesOptions corresponds to all preference values elements included in the widget. The style edited in DidomiPreferenceValuesOptions will be applied to all preference values.

"label": {
      "style": {
            "default": {
                  "backgroundColor": "",
                  "padding": "",
                  "borderRadius": "",
                  "borderWidth": "",
                  "boxShadow": "",
                  "margin": "",
                  "color": "",
                  "fontSize": "",
                  "lineHeight": "",
                  "fontWeight": ""
            }
      }        
}

Element	Description	Component options
label	Label of preference values.	DidomiStyle

DidomiPurposeOptions

DidomiPurposeOptions corresponds to all elements included in a purpose element.

Element	Description	Component options
inputType	The input type of a purpose.	DidomiPurposeInputType
title	Name of a purpose.	DidomiTextOptions
description	Description of purpose.	DidomiTextOptions
noIcon	Icon in radio button No input	DidomiImageOptions
noLabel	Content in radio button No input	DidomiTextOptions
yesIcon	Icon in radio button Yes input	DidomiImageOptions
yesLabel	Content in radio button Yes input	DidomiTextOptions
radioOptions	The radio group options for customization	DidomiRadioOptions
radioContainerOptions	The radio group container options for customization	DidomiStyle
radioContentsOptions	The radio group contents options for customization	DidomiStyle
checkboxOptions	The checkbox options for customization	DidomiCheckboxOptions
checkboxContainerOptions	The checkbox container options for customization	DidomiStyle
checkboxContentsOptions	The checkbox contents options for customization	DidomiStyle

{
    "title": {
        "content": {
            "en": "YOUR_PURPOSE_TITLE",
            "fr": "VOTRE_TITRE_DE_FINALITE"
        }
    },
    "noIcon": {
        "src": "YOUR_NO_VALUE_ICON"
    },
    "noLabel": {
        "content": {
            "en": "YOUR_NO_VALUE_CONTENT",
            "fr": "VALEUR_NON_CONTENU"
        }
    },
    "yesIcon": {
        "src": "YOUR_YES_VALUE_ICON"
    },
    "yesLabel": {
        "content": {
            "en": "YOUR_YES_VALUE_CONTENT",
            "fr": "VALEUR_OUI_CONTENU
        }
    },
    "description": {
        "content": {
            "en": "YOUR_PURPOSE_DESCRIPTION",
            "fr": "DESC_FINALITE"
        }
    }
}

DidomiStyle

DidomiStyle corresponds to options provided to edit the style of an element. You can edit the style of this element by adding camel case CSS properties. Depending on the element, feel free to add the CSS property that will help your design. The list below is not exhaustive and all CSS properties can be used provided they are entered in camel case.

"style": {
      "default": {
            "backgroundColor": "",
            "padding": "",
            "borderRadius": "",
            "borderWidth": "",
            "boxShadow": "",
            "margin": "",
            "color": "",
            "fontSize": "",
            "lineHeight": "",
            "fontWeight": ""
      }
}

DidomiTextOptions

DidomiTextOptions corresponds to a text element in your widget. You can edit the style of the text element as well as its content adding all translations needed.

{
    "style": {
        "default": {
            "color": "",
            "fontSize": "",
            "lineHeight": "",
            "fontWeight": ""
        }
    },
    "content": {
        "en": "Back",
        "fr": "Retour"
    }
}

DidomiPurposeInputType

The DidomiPurposeInputType property defines the input type used in your widget. It can be either a radio button group or a single checkbox.

Default value: 'radio-group'

Available options:

• 'radio-group' - Displays radio buttons for single selection. When this value is set, the radioOptions property becomes available, allowing radio-specific customization.

• 'checkbox' - Displays a single checkbox for binary consent. When this value is set, the checkboxOptions property becomes available, allowing checkbox-specific customization.

DidomiRadioOptions

The DidomiRadioOptions property defines the customization options for radio button inputs in your widget.

{
    "radioOptions": {
        "label": {
            "style": {
                "default": {
                    "color": "",
                    "fontFamily": ""
                }
            }
        },
        "backgroundColor": "",
        "borderRadius": "",
        "borderColor": "",
        "padding": "",
        "circleBackgroundColor": ""
    }
}

Element	Description	Component options
label	Label of the radio button.	DidomiText
backgroundColor	The background color of the radio button container.	ComponentOptionValue
borderRadius	The border radius of the radio button container.	ComponentOptionValue
borderColor	The border color of the radio button container.	ComponentOptionValue
padding	The padding of the radio button container.	ComponentOptionValue
circleBackgroundColor	The circle color of the radio button container.	ComponentOptionValue

DidomiCheckboxOptions

The DidomiCheckboxOptions property defines the customization options for checkbox inputs in your widget.

{
    "checkboxOptions": {
        "label": {
            "style": {
                "default": {
                    "color": "",
                    "fontFamily": ""
                }
            }
        },
        "backgroundColor": "",
        "squareColor": "",
        "borderRadius": "",
        "borderColor": "",
        "padding": "",
        "tickColor": "",
        "icon": {
            "src": "",
            "style": {
                "default": {
                    "padding": "",
                    "margin": "",
                    "width": ""
                }
            }
        },
        "checkboxIcon": {
            "style": {
                "default": {
                    "marginRight": "",
                },
            },
        },
        "fillCheckbox": true,
        "style": {
            "default": {
                "marginRight": "",
            },
        },
    }
}

Element	Description	Component options
label	Label of the checkbox.	DidomiText
backgroundColor	The background color of the checkbox container.	ComponentOptionValue
squareColor	The checkbox square color.	ComponentOptionValue
borderRadius	The border radius of the checkbox container.	ComponentOptionValue
borderColor	The border color of the checkbox container.	ComponentOptionValue
padding	The padding of the checkbox container.	ComponentOptionValue
tickColor	The tick color of the checkbox.	ComponentOptionValue
icon	The checkbox container icon.	DidomiStyle
checkboxIcon	The checkbox icon	DidomiStyle
fillCheckbox	Whether to fill the checkbox with the square color when checked or not.	ComponentOptionValue
style	General checkbox style.	DidomiStyle