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

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

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

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

description

Description of text input

hint

Hint of text input

errorMessage

Error message of text input

inputOptions

Text input options

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

fontSize

Size of input value

fontWeight

Font weight of input value

lineHeight

Line height of input value

borderRadius

Border radius of input

borderColor

Border color of input

borderWidth

Thickness of input border

errorBorderColor

Color of input border when error

placeholderColor

Color of input placeholder

errorIcon

Error icon in input when error

focusShadow

Focus state when input is selected

backgroundColor

Background color of input

padding

Padding of input

errorPadding

Padding of input in case of error

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

description

Description of preferences.

preferenceValuesOptions

Preference values options

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

DidomiPurposeOptions

DidomiPurposeOptions corresponds to all elements included in a purpose element.

Element
Description
Component options

title

Name of a purpose.

noIcon

Icon in radio button No input

noLabel

Content in radio button No input

yesIcon

Icon in radio button Yes input

yesLabel

Content in radio button Yes input

description

Description of purpose.

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

Last updated