Use CSS in a web experiment
You can use a Cascading Style Sheet (CSS) in a web experiment to apply your organization's colors, fonts, layouts and branding to the experiment.
You can also edit the CSS in a variant for an experiment for facilitating 1:1 personalization by running dynamic data. To do this, you must configure the API response to include the dynamic data so that when the variant executes, the data is requested from the server and then passed to the variant.
To use CSS in a web experiment:
-
In the Experiment variants tile, click the Edit icon next to the variant you want to configure.
-
In the code editor, on the CSS tab, enter any CSS that you want to use to format the layout of the web experiment.
-
To insert dynamic data into CSS, on the Data tab, in the Data Selector search box, enter a guest's email address or other identifier to search. This enables you to access data model attributes and paths.
TipIf there is a guest whose data you often use when configuring or testing code, click the star icon to bookmark the guest so you no longer have to search for them.
-
To include dynamic guest data, under the Guest data model tree, click
and click Copy Path as Handlebars. -
To include dynamic data from the decision model response, expand the Decision Model Response tree, click
and click Copy Path as Handlebars. -
To include dynamic data from the experience response, expand the Experience Response tree, click
and click Copy Path as Handlebars. -
On the CSS tab, paste the data and prefix it with
context. For example, to include the data in{{decisionOffers.0.attributes.PromoText}}in the CSS, you must reference it as{{context.decisionOffers.0.attributes.PromoText}}. -
Click Save.
-
Click
to close the code editor.
If you use an out-of-the-box web template, or if you have copied the JavaScript from such a template, you must reference an attribute from the API response within a context object. For example, to include in the CSS an imageURL from the API response, reference it as follows:
background-image: url(“{{context.imageURL}}”)