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

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)

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
title	Name of a 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
description	Description of purpose.	DidomiTextOptions

{
    "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"
    }
}