# Options In this section, we will detail all options available for every element described in the [Look & Feel page of a Privacy request widget](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/themes-and-shapes#privacy-request-widget). * [ComponentOptionValue](#componentoptionvalue) * [DidomiButtonOptions](#didomibuttonoptions) * [DidomiCardOptions](#didomicardoptions) * [DidomiFormFieldOptions](#didomiformfieldoptions) * [DidomiImageOptions](#didomiimageoptions) * [DidomiInputOptions](#didomiinputoptions) * [DidomiPreferenceOptions](#didomipreferenceoptions) * [DidomiPreferenceValuesOptions](#didomipreferencevaluesoptions) * [DidomiPurposeOptions](#didomipurposeoptions) * [DidomiStyle](#didomistyle) * [DidomiTextOptions](#didomitextoptions) * [DidomiPurposeInputType](#didomipurposeinputtype) * [DidomiRadioOptions](#didomiradiooptions) * [DidomiCheckboxOptions](#didomicheckboxoptions) * [DidomiCTAOptions](#didomictaoptions) #### ComponentOptionValue ComponentOptionValue corresponds to a CSS property.\ You can edit the CSS property by adding the value. {% tabs %} {% tab title="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` | | {% endtab %} | | | {% tab title="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)` | | {% endtab %} | | | {% tab title="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)` | | {% endtab %} | | | {% tab title="Tap to change sentence options" %} | Option | Description | Example | | ----------------- | ------------------------------------------- | -------------------------------- | | `backgroundColor` | Background color of the sentence container | `#000000`, `red`, `rgb(0, 0, 0)` | | `borderRadius` | Border radius of the sentence container | `4px` | | `padding` | Padding of the sentence container | `8px 12px`, `8px 12px 8px 12px` | | `display` | The display value of the sentence container | `flex` | | {% endtab %} | | | | {% endtabs %} | | | #### DidomiButtonOptions DidomiButtonOptions corresponds to buttons found in 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 needed translations (please view our languages supported and their corresponding codes [here](https://developers.didomi.io/api-and-platform/introduction/translations)). ```json "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 camelCase CSS properties. ```json "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](#didomistyle) | | `description` | Description of text input | [DidomiStyle](#didomistyle) | | `hint` | Hint of text input | [DidomiStyle](#didomistyle) | | `errorMessage` | Error message of text input | [DidomiStyle](#didomistyle) | | `inputOptions` | Text input options | [DidomiInputOptions](#didomiinputoptions) | ```json { "label": { "style": { "default": {} } }, "description": { "style": { "default": {} } }, "hint": { "style": { "default": {} } }, "errorMessage": { "style": { "default": {} } }, "inputOptions": {} } ``` #### DidomiImageOptions DidomiImageOptions correspond to options provided to edit icon placeholders and their style. ```json { "src": "", "style": { "default": { "padding": "", "margin": "", "width": "" } } } ``` #### DidomiInputOptions DidomiInputOptions corresponds to all style elements related to the input element.\ You can edit the style of DidomiInputOptions by adding camelCase CSS properties. | Element | Description | Component options | | ------------------ | ---------------------------------- | --------------------------------------------- | | `fontColor` | Color of input value | [ComponentOptionValue](#componentoptionvalue) | | `fontSize` | Size of input value | [ComponentOptionValue](#componentoptionvalue) | | `fontWeight` | Font weight of input value | [ComponentOptionValue](#componentoptionvalue) | | `lineHeight` | Line height of input value | [ComponentOptionValue](#componentoptionvalue) | | `borderRadius` | Border radius of input | [ComponentOptionValue](#componentoptionvalue) | | `borderColor` | Border color of input | [ComponentOptionValue](#componentoptionvalue) | | `borderWidth` | Thickness of input border | [ComponentOptionValue](#componentoptionvalue) | | `errorBorderColor` | Color of input border when error | [ComponentOptionValue](#componentoptionvalue) | | `placeholderColor` | Color of input placeholder | [ComponentOptionValue](#componentoptionvalue) | | `errorIcon` | Error icon in input when error | [DidomiStyle](#didomistyle) | | `focusShadow` | Focus state when input is selected | [ComponentOptionValue](#componentoptionvalue) | | `backgroundColor` | Background color of input | [ComponentOptionValue](#componentoptionvalue) | | `padding` | Padding of input | [ComponentOptionValue](#componentoptionvalue) | | `errorPadding` | Padding of input in case of error | [ComponentOptionValue](#componentoptionvalue) | ```json { "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](#didomistyle) | | `description` | Description of preferences. | [DidomiStyle](#didomistyle) | | `preferenceValuesOptions` | Preference values options | [DidomiPreferenceValuesOptions](#didomipreferencevalueoptions) | ```json { "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": {} } ``` #### DidomiPreferenceValuesOptions DidomiPreferenceValuesOptions corresponds to all preference value elements included in the widget. The style edited in DidomiPreferenceValuesOptions will be applied to all preference values. ```json "label": { "style": { "default": { "backgroundColor": "", "padding": "", "borderRadius": "", "borderWidth": "", "boxShadow": "", "margin": "", "color": "", "fontSize": "", "lineHeight": "", "fontWeight": "" } } } ``` | Element | Description | Component options | | ------- | --------------------------- | --------------------------- | | `label` | Label of preference values. | [DidomiStyle](#didomistyle) | #### DidomiPurposeOptions DidomiPurposeOptions corresponds to all elements included in a purpose element. | Element | Description | Component options | | ---------------------------- | ------------------------------------------------------------------- | ------------------------------------------------- | | `inputType` | The input type of a purpose | [DidomiPurposeInputType](#didomipurposeinputtype) | | `title` | Name of a purpose | [DidomiTextOptions](#didomitextoptions) | | `disabledTitle` | Title of a purpose when the widget is in disabled state | [DidomiTextOptions](#didomitextoptions) | | `description` | Description of a purpose | [DidomiTextOptions](#didomitextoptions) | | `disabledDescription` | Description of a purpose when the widget is in disabled state | [DidomiTextOptions](#didomitextoptions) | | `noIcon` | Icon in radio button *No* input | [DidomiImageOptions](#didomiimageoptions) | | `noLabel` | Content in radio button *No* input | [DidomiTextOptions](#didomitextoptions) | | `yesIcon` | Icon in radio button *Yes* input | [DidomiImageOptions](#didomiimageoptions) | | `yesLabel` | Content in radio button *Yes* input | [DidomiTextOptions](#didomitextoptions) | | `radioOptions` | The radio group options for customization | [DidomiRadioOptions](#didomiradiooptions) | | `radioContainerOptions` | The radio group container options for customization | [DidomiStyle](#didomistyle) | | `radioContentsOptions` | The radio group contents options for customization | [DidomiStyle](#didomistyle) | | `checkboxOptions` | The checkbox options for customization | [DidomiCheckboxOptions](#didomicheckboxoptions) | | `checkboxContainerOptions` | The checkbox container options for customization | [DidomiStyle](#didomistyle) | | `checkboxContentsOptions` | The checkbox contents options for customization | [DidomiStyle](#didomistyle) | | `sentenceCtaContentsOptions` | The tap to change sentence contents options for customization | [DidomiStyle](#didomistyle) | | `cta` | The tap to change sentence call to action options for customization | [DidomiCTAOptions](#didomictaoptions) | ```json { "title": { "content": { "en": "YOUR_PURPOSE_TITLE", "fr": "VOTRE_TITRE_DE_FINALITE" } }, "description": { "content": { "en": "YOUR_PURPOSE_DESCRIPTION", "fr": "DESC_FINALITE" } } "noIcon": { "src": "YOUR_NO_VALUE_ICON" }, "noLabel": { "content": { "en": "YOUR_NO_VALUE_CONTENT", "fr": "VALEUR_NON" } }, "yesIcon": { "src": "YOUR_YES_VALUE_ICON" }, "yesLabel": { "content": { "en": "YOUR_YES_VALUE_CONTENT", "fr": "VALEUR_OUI" } }, } ``` #### DidomiStyle DidomiStyle corresponds to options provided to edit the style of an element.\ You can edit the style of this element by adding camelCase 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 camelCase. The style object supports responsive styling by allowing developers to define both a default style and optional overrides for screen-size-specific breakpoints. {% hint style="info" %} For full documentation of breakpoints, visit the [Breakpoints](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/breakpoints) section under Content & Design. {% endhint %} ```json "style": { "default": { "backgroundColor": "", "padding": "", "borderRadius": "", "borderWidth": "", "boxShadow": "", "margin": "", "color": "", "fontSize": "", "lineHeight": "", "fontWeight": "" }, "sm": { "fontSize": "14px" }, "md": { "fontSize": "16px" }, "lg": { "fontSize": "18px" }, "xl": { "fontSize": "20px" } } ``` #### 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. ```json { "style": { "default": { "color": "", "fontSize": "", "lineHeight": "", "fontWeight": "" } }, "content": { "en": "Back", "fr": "Retour" } } ``` **Content formatting in text options:** Text content in `DidomiTextOptions` supports special syntax for creating interactive links: * **Markdown links:** Use standard markdown link syntax `[link text](url)` to create clickable links that open in a new tab. ```json { "content": { "en": "Visit [our website](https://example.com) for more information", "fr": "Visitez [notre site web](https://example.com) pour plus d'informations" } } ``` * **Event links:** Use event link syntax `[link text]{event-name}` to create clickable links that dispatch custom events. When clicked, these links dispatch a `didomi:custom:{event-name}` event with `detail: true`, `bubbles: true`, and `composed: true`. ```json { "content": { "en": "Click [here]{open-dialog} to open the preferences dialog", "fr": "Cliquez [ici]{open-dialog} pour ouvrir le dialogue des préférences" } } ``` You can listen to event link events using standard event listeners: ```javascript document.addEventListener('didomi:custom:open-dialog', (event) => { // Handle the event console.log('Dialog should open'); }); ``` Both markdown links and event links can be used in the same content, and they work in any text content field that supports dynamic components. #### 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. * `'cta'` - Displays a sentence and their associated CTAs, so that the widget can dynamically display the correct sentence and action depending on the consent state. When this value is set, the `sentenceCtaContentsOptions` and `cta` properties becomes available, allowing sentence and cta-specific customization. #### D**idomiRadioOptions** The `DidomiRadioOptions` property defines the customization options for radio button inputs in your widget. ```json { "radioOptions": { "label": { "style": { "default": { "color": "", "fontFamily": "" } } }, "backgroundColor": "", "borderRadius": "", "borderColor": "", "padding": "", "circleBackgroundColor": "" } } ``` | Element | Description | Component options | | ----------------------- | --------------------------------------------------- | --------------------------------------------- | | `label` | Label of the radio button. | [DidomiText](#didomitextoptions) | | `backgroundColor` | The background color of the radio button container. | [ComponentOptionValue](#componentoptionvalue) | | `borderRadius` | The border radius of the radio button container. | [ComponentOptionValue](#componentoptionvalue) | | `borderColor` | The border color of the radio button container. | [ComponentOptionValue](#componentoptionvalue) | | `padding` | The padding of the radio button container. | [ComponentOptionValue](#componentoptionvalue) | | `circleBackgroundColor` | The circle color of the radio button container. | [ComponentOptionValue](#componentoptionvalue) | #### D**idomiCheckboxOptions** The `DidomiCheckboxOptions` property defines the customization options for checkbox inputs in your widget. ```json { "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](#didomitextoptions) | | `backgroundColor` | The background color of the checkbox container. | [ComponentOptionValue](#componentoptionvalue) | | `squareColor` | The checkbox square color. | [ComponentOptionValue](#componentoptionvalue) | | `borderRadius` | The border radius of the checkbox container. | [ComponentOptionValue](#componentoptionvalue) | | `borderColor` | The border color of the checkbox container. | [ComponentOptionValue](#componentoptionvalue) | | `padding` | The padding of the checkbox container. | [ComponentOptionValue](#componentoptionvalue) | | `tickColor` | The tick color of the checkbox. | [ComponentOptionValue](#componentoptionvalue) | | `icon` | The checkbox container icon. | [DidomiStyle](#didomistyle) | | `checkboxIcon` | The checkbox icon | [DidomiStyle](#didomistyle) | | `fillCheckbox` | Whether to fill the checkbox with the square color when checked or not. | [ComponentOptionValue](#componentoptionvalue) | | `style` | General checkbox style. | [DidomiStyle](#didomistyle) | #### D**idomiCTAOptions** The `DidomiCTAOptions` property defines the customization options for tap to change sentence call to actions in your widget. 
{
    "cta": {
        "enabledText": {
            "style": {
                "default": {
                    "color": "#cc0000",
                }
            },
            "content": {
                "en": "Opt-out content",
            },
        },
        "disabledText": {
            "style": {
                "default": {
                    "color": "#007e33",
                },
            },
            "content": {
                "en": "Opt-in content",
            },
        },
    }
}
| Element | Description | Component options | | -------------- | ------------------------------------------------------------- | -------------------------------- | | `enabledText` | Opt-out CTA sentence: The user is considered to have said YES | [DidomiText](#didomitextoptions) | | `disabledText` | Opt-in CTA sentence: The user is considered to have said NO | [DidomiText](#didomitextoptions) |