Data structures

Experience type

Experience type is an annotated content type, which defines the data structure for Experiences.

It consists of (but is not limited to) the following mandatory fields:

Field IDField TypeDescription
titleSymbolHolds the title of the experience.
slugSymbolA slug is the part of a URL that identifies a particular page on a website in an easy-to-read form.
componentTreeObjectA JSON object which defines the hierarchy of components on the canvas together with data subjective to each of such components.
dataSourceObjectA JSON object, where a key is a string identifier and the value is the Link to an entity (Entry or Asset). Serves as a lookup for entities, which are sources of component variables on the canvas.
unboundValuesObjectA JSON object, where a key is a string identifier and the value is a one-off component variable value.

In case additional fields are needed, such experience type can be extended with them and Experiences will render controls for data input.

The experience type is annotated as shown below:

1{
2  "metadata": {
3    "annotations": {
4      "ContentType": [
5        {
6          "sys": {
7            "id": "Contentful:ExperienceType",
8            "type": "Link",
9            "linkType": "Annotation"
10          }
11        }
12      ]
13    }
14  }
15}

Below you can see the full JSON example of the experience type:

1{
2  "sys": {
3    "space": {
4      "sys": {
5        "type": "Link",
6        "linkType": "Space",
7        "id": "kvosm7xpiri7"
8      }
9    },
10    "id": "experienceType",
11    "type": "ContentType",
12    "createdAt": "2023-11-09T14:08:03.895Z",
13    "updatedAt": "2023-11-09T14:08:04.323Z",
14    "environment": {
15      "sys": {
16        "id": "experience-builder-map",
17        "type": "Link",
18        "linkType": "Environment"
19      }
20    },
21    "publishedVersion": 1,
22    "publishedAt": "2023-11-09T14:08:04.323Z",
23    "firstPublishedAt": "2023-11-09T14:08:04.323Z",
24    "createdBy": {
25      "sys": {
26        "type": "Link",
27        "linkType": "User",
28        "id": "1Y6Gnntz7WGKHwYuP97eko"
29      }
30    },
31    "updatedBy": {
32      "sys": {
33        "type": "Link",
34        "linkType": "User",
35        "id": "1Y6Gnntz7WGKHwYuP97eko"
36      }
37    },
38    "publishedCounter": 1,
39    "version": 2,
40    "publishedBy": {
41      "sys": {
42        "type": "Link",
43        "linkType": "User",
44        "id": "1Y6Gnntz7WGKHwYuP97eko"
45      }
46    }
47  },
48  "displayField": "title",
49  "name": "Experience Type",
50  "description": "",
51  "fields": [
52    {
53      "id": "title",
54      "apiName": "title",
55      "name": "Title",
56      "type": "Symbol",
57      "localized": false,
58      "required": true,
59      "validations": [],
60      "disabled": false,
61      "omitted": false
62    },
63    {
64      "id": "slug",
65      "apiName": "slug",
66      "name": "Slug",
67      "type": "Symbol",
68      "localized": false,
69      "required": true,
70      "validations": [
71        {
72          "unique": true
73        }
74      ],
75      "disabled": false,
76      "omitted": false
77    },
78    {
79      "id": "componentTree",
80      "apiName": "componentTree",
81      "name": "Component Tree",
82      "type": "Object",
83      "localized": false,
84      "required": true,
85      "validations": [],
86      "disabled": false,
87      "omitted": false
88    },
89    {
90      "id": "dataSource",
91      "apiName": "dataSource",
92      "name": "Data Source",
93      "type": "Object",
94      "localized": false,
95      "required": true,
96      "validations": [],
97      "disabled": false,
98      "omitted": false
99    },
100    {
101      "id": "unboundValues",
102      "apiName": "unboundValues",
103      "name": "Unbound Values",
104      "type": "Object",
105      "localized": false,
106      "required": true,
107      "validations": [],
108      "disabled": false,
109      "omitted": false
110    }
111  ],
112  "metadata": {
113    "annotations": {
114      "ContentType": [
115        {
116          "sys": {
117            "id": "Contentful:ExperienceType",
118            "type": "Link",
119            "linkType": "Annotation"
120          }
121        }
122      ]
123    }
124  }
125}

Preview configuration

Experiences has to know a URL of the server, which hosts the web app, in order to render it on canvas in the iframe.

Such URL must be configured via the Preview Configuration and must apply to the Experience Type.

To see existing preview configurations, refer to the “Content preview” menu of the “Settings” in our web app or make a CMA request.

Below is an example of the preview configuration for experience type with id experienceType:

1{
2  "name": "[20231109T150803+01:00] Preview for experience 'Experience Type'",
3  "description": "This preview is required for the Experiences to work.",
4  "sys": {
5    "type": "PreviewEnvironment",
6    "id": "2vbebyUO11HofzzXC0JHyS",
7    "version": 0,
8    "space": {
9      "sys": {
10        "type": "Link",
11        "linkType": "Space",
12        "id": "kvosm7xpiri7"
13      }
14    },
15    "createdAt": "2023-11-09T14:08:03Z",
16    "updatedAt": "2023-11-09T14:08:03Z"
17  },
18  "configurations": [
19    {
20      "url": "http://localhost:8080/{locale}/{entry.fields.slug}",
21      "contentType": "experienceType",
22      "enabled": true,
23      "example": false
24    }
25  ]
26}