Text

Introduction

Name: didomi-text Component type: text
Display a custom text and handle translations.
1
window.didomiConfig = {
2
...
3
components: {
4
activeComponents: [
5
{
6
id: "ID_OF_THE_COMPONENT",
7
type: "text",
8
options: {
9
...,
10
propKey: "PROP_VALUE" // Remember to use camelCase for the key
11
}
12
}
13
]
14
}
15
};
Copied!

Inline configuration

1
<didomi-text container-id="CONTAINER_ID" prop-key="PROP_VALUE" .../>
Copied!

Props Options

Name
Type
Description
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
display
String
CSS display property. Example: 'flex', 'inline' ...
isShown
Boolean
display/hide the element (default true)
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
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.
1
window.didomiConfig = {
2
...
3
components: {
4
activeComponents: [
5
{
6
id: "section-title",
7
type: "text",
8
options: {
9
...
10
content: {
11
en: "English content",
12
fr: "Contenu en Français"
13
}
14
}
15
}
16
]
17
}
18
};
19
20
EN => English content
21
FR => Contenu en Français
22
Copied!
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.
1
window.didomiConfig = {
2
...
3
components: {
4
activeComponents: [
5
{
6
id: "section-title",
7
type: "text",
8
options: {
9
...
10
content="Dynamic value: {dynamic_number}"
11
macros: [{
12
key: "dynamic_number",
13
value: 5
14
}]
15
}
16
}
17
]
18
}
19
};
20
21
Output => Dynamic value: 5
22
Copied!

Examples

If you want to see the image, please click on the Open preview in new window button to see the example on full screen.

Object configuration

1
window.didomiConfig = {
2
...
3
components: {
4
layout: {...},
5
activeComponents: [
6
{
7
id: "section-title",
8
type: "text",
9
options: {
10
content:
11
"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.",
12
macros: [{ key: "dynamic_number", value: 5 }],
13
style: {
14
default: {
15
color: "#33AFFF",
16
fontSize: "18px",
17
}
18
}
19
}
20
}
21
]
22
}
23
};
Copied!
Last modified 9mo ago