.svg?alt=media&token=8a6d8610-e43e-468c-a63a-6c3a9314e6f5)
Custom elements
Last updated
Last updated
Custom events are synthetic events in Javascript that can be dispatched to our SDK.
Use custom events to communicate with our custom elements to wrap your code and handle all logic, analytics and API requests.
Add the custom element didomi-container-headless to wrap your widget. This component should wrap all other widget related elements as it contains a boundary intercepting events and communicating with our API.
| Properties | Description |
|---|---|
To display content when the end-user is not logged into the Didomi system, add the custom element didomi-if-not-authenticated.
To display content only when the end-user is logged into the Didomi system, add the custom element didomi-if-authenticated.
Add the custom element didomi-auth-headless to wrap a login form and handle end-user authentication.
To request authentication, you will need to create and dispatch the custom event didomi:send-authentication.
This custom element takes care of sending the authentication.asked and authentication.sent analytic events.
To send consent.asked analytics event, add the custom element didomi-consent-asked.
Please make sure to only add this component once in your page to avoid sending multiple events.
To send end-users' choices through our SDK upon click, wrap your entities in the custom element didomi-consent-receiver.
To save end-users' choices through our SDK upon clicking, create and dispatch the custom event didomi:set-consents.
This custom element takes care of sending the consent.given analytic event.
To store end-users' choices in the application state before saving them, wrap your entities in the custom element didomi-pending-consent-receiver, create and dispatch the custom event didomi:set-pending-consents.
Within the didomi-pending-consent-receiver, you will also need to add a save button, create and dispatch the custom event didomi:save-pending-consents to save the consent state in our database.
This custom element takes care of sending the consent.given analytic event.
To display a content option of a component of your widget, use the custom element didomi-component-content.
To display an entity of your widget, such as the title or description from a purpose or preference, use the custom element didomi-component-content.
| Properties | Description |
|---|---|
| Properties | Description |
|---|---|
| Properties | Description |
|---|---|
| Prop | Description |
|---|---|
| Properties | Description |
|---|---|
| Prop | Description |
|---|---|
| Properties | Description |
|---|---|
| Properties | Description |
|---|---|
id
ID of the widget
container-id
ID of the widget
container-id
ID of the widget
container-id
ID of the widget
container-id
ID of the widget
container-id
ID of the widget
container-id
ID of the widget
container-id
ID of the widget
component-id
ID of the layout-component
component-property
Property of the layout-component. For example saveButton.text.content (if it has been edited at the layout-component level) or icon.src to get the URL of the preference value.
container-id
ID of the widget
entity-id
ID of the selected purpose, selected preference or preference value. You can easily find them in the Configuration Tree section on the Console.
entity-property
This property determines which content of the entity object should be displayed. It can be name or description.
entity-type
Specify the type of property. It can be either purpose, preference or preference-value.
with-component-content
This property is used to determine whether to override the entity content with the layout component one set a widget level, if any (true), or to display the entity content (undefined).