Text

Introduction

Name: didomi-text Component type: text

Display a custom text and handle translations.

Object configuration

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "ID_OF_THE_COMPONENT",
type: "text",
options: {
...,
propKey: "PROP_VALUE" // Remember to use camelCase for the key
}
}
]
}
};
<didomi-text id="ID_OF_THE_COMPONENT" />

Inline configuration

<didomi-text prop-key="PROP_VALUE" .../>

Props

Name

Type

Description

id

String

If you decide to configure your component in the didomiConfig object, you can use this id to link your component to your configuration object. See this section for more information

content

String|Object

Content of the text. If can be either a string or an object if you need to handle translations. See this section for more information

macros

Array

Sometimes you may want to include dynamic values in your text. You can do that by adding macros. See this section for more information

style

Object

See this section for style information

For inline configuration, make sure to use kebab-case syntax. For example fontSize will become font-size.

Translation support

content can be either a regular string or an object if you need to handle translations.

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "section-title",
type: "text",
options: {
...
content: {
en: "English content",
fr: "Contenu en Français"
}
}
}
]
}
};
// OR //
<didomi-text
content='{"en": "English content", "fr": "Contenu en Français"}'
/>
EN => English content
FR => Contenu en Français

You can manage the desired languages in the Didomi configuration object. See this section for more information

Macros

A macro contain a key and a value. The key will be replaced by the value in the content. You will need to encapsulate the key with {} in the content to tell Didomi that this value is a macro.

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "section-title",
type: "text",
options: {
...
content="Dynamic value: {dynamic_number}"
macros: [{
key: "dynamic_number",
value: 5
}]
}
}
]
}
};
// OR //
<didomi-text
content='Dynamic value: {dynamic_number}'
macros='[{ "key": "dynamic_number", "value": 5 }]'
/>
Output => Dynamic value: 5

Examples

Object configuration

window.didomiConfig = {
...
components: {
activeComponents: [
{
id: "section-title",
type: "text",
options: {
content:
"Dynamic value: {dynamic_number}. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
macros: [{ key: "dynamic_number", value: 5 }],
style: {
default: {
color: "#33AFFF",
fontSize: "18px",
}
}
}
}
]
}
};
<didomi-text id="section-title" />

Inline configuration

<didomi-text
content='Dynamic value: {dynamic_number}. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
macros='[{ "key": "dynamic_number", "value": 5 }]'
style='{"default":{"color": "#33AFFF", "fontSize": "18px"}}'
/>