dsar_form

LayoutComponent ❌ Theme ✅ Options ❌ Content & Translations

First, take a look at the mapping between options properties and widget elements in these three visuals below.

To edit Privacy request widget design, you need to edit the layout-component dsar_form by sending a PATCH request on /widgets/layout-components/{layout-component-id} and specifying options in options property.

Be careful when you are editing the options property. This is a JSONB and by design, you need to fill in every properties already added every time you edit this object.

PATCH https://api.didomi.io/widgets/layout-components/{layout_component_id}?organization_id=YOUR_ORG_ID&widget_id=YOUR_WIDGET_ID

{
    "type": "dsar_form",
    "organization_id": "YOUR_ORGANIZATION_ID",
    "options": {
        ...
    }
}

General options

Element	Description	Component options
card	Container of Privacy request widget	DidomiCardOptions
formTitle	Title of widget	DidomiTextOptions
firstStepButton	Button to validate first step of form	DidomiButtonOptions
backButton	Button to go back to first step	DidomiButtonOptions
secondStepButton	Button to submit the form	DidomiButtonOptions
formHint	Hint at the bottom of second step	DidomiTextOptions
sendRequestErrorMessage	Error message when the request was not created after submitted	DidomiTextOptions
successMessageTitle	Title in confirmation step	DidomiTextOptions
successMessageDescription	Description in confirmation step	DidomiTextOptions
closeIcon	Close button to go back to first step from confirmation step	DidomiStyle
formButtonsWrapper	Wrapper of buttons in second step	DidomiStyle
backButtonWrapper	Wrapper of back button in second step	DidomiStyle
secondStepButtonWrapper	Wrapper of confirm button in second step	DidomiStyle
loader	Loader in confirm button in second step when clicked	DidomiStyle

userRightOptions

Element	Description	Component options
title	Title in second step	DidomiStyle
description	Description in second step	DidomiStyle
radioOptions	Radio buttons in first step	radioOptions

radioOptions

Element	Description	Component options
label	Label of a radio button	DidomiStyle
backgroundColor	Background color of a radio button	ComponentOptionValue
circleColor	Radio circle of a radio button	ComponentOptionValue
borderRadius	Border radius of a radio button	ComponentOptionValue
padding	Padding of a radio button	ComponentOptionValue
circleBackgroundColor	Background of radio circle of a radio button	ComponentOptionValue
borderColor	Border of radio circle of a radio button	ComponentOptionValue

formFieldsOptions

Element	Description	Component options
formFieldsOptions	Text input	DidomiFormFieldsOptions

We have gathered all elements and their options in the following object. You can use it to edit the dsar_form options by sending a PATCH request on /widgets/layout-components/{layout-component-id}.

PATCH https://api.didomi.io/widgets/layout-components/{layout_component_id}?organization_id=YOUR_ORG_ID&widget_id=YOUR_WIDGET_ID

{
    "type": "dsar_form",
    "options": {
        "formTitle": {
            "style": {
                "default": {}
            }
        },
        "firstStepButton": {
            "style": {
                "default": {}
            },
            "text": {
                "style": {
                    "default": {}
                },
                "content": {}
            }
        },
        "secondStepButton": {
            "style": {
                "default": {}
            },
            "text": {
                "style": {
                    "default": {}
                },
                "content": {}
            }
        },
        "backButton": {
            "style": {
                "default": {}
            },
            "text": {
                "style": {
                    "default": {}
                },
                "content": {}
            }
        },
        "formHint": {
            "style": {
                "default": {}
            },
            "content": {}
        },
        "sendRequestErrorMessage": {
            "style": {
                "default": {}
            },
            "content": {}
        },      
        "successMessageTitle": {
            "style": {
                "default": {}
            },
            "content": {}
        },
        "successMessageDescription": {
            "style": {
                "default": {}
            },
            "content": {}
        },
        "closeIcon": {
            "style": {
                "default": {}
            }
        },
        "formButtonsWrapper": {
            "style": {
                "default": {}
            }
        },
        "backButtonWrapper": {
            "style": {
                "default": {}
            }
        },
        "secondStepButtonWrapper": {
            "style": {
                "default": {}
            }
        },
        "loader": {
            "style": {
                "default": {}
            }
        },
        "userRightsOptions": {
            "title": {
                "style": {
                    "default": {}
                }
            },
            "description": {
                "style": {
                    "default": {}                
                } 
            },
            "radioOptions": {
                "label": {
                    "style": {
                        "default": {}                      
                    }
                },
                "backgroundColor": "",
                "circleColor": "",
                "borderRadius": "",
                "padding": "",
                "circleBackgroundColor": "",
                "borderColor": ""
            }
        },
        "formFieldsOptions": {
            "label": {
                "style": {
                    "default": {}                
                }
            },
            "description": {
                 "style": {
                    "default": {}                
                }              
            },
            "hint": {
                   "style": {
                    "default": {}                
                }                
            },
            "errorMessage": {
                 "style": {
                    "default": {}                
                }                
            },
            "inputOptions": {
                "fontColor": "",
                "fontSize": "",
                "fontWeight": "",
                "lineHeight": "",
                "borderRadius": "",
                "borderColor": "",
                "borderWidth": "",
                "errorBorderColor": "",
                "placeholderColor": "",
                "backgroundColor": ""
            }
        }
    },
    "organization_id": "YOUR_ORGANIZATION_ID"
}