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

Radio button options

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.

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

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

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

DidomiPurposeOptions

DidomiPurposeOptions corresponds to all elements included in a purpose element.

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