Experience Templates

Experience Templates allow users to control how personalization decisions are rendered on a website using reusable templates from a centralized repository. This guide walks you through creating web experience templates for a Hero Banner and Product Recommendations using Handlebars.

[ACTION REQUIRED: Review Note] - NOTE: Feature Coming Soon. This exercise references product functionality that is in the process of being released. Skip this exercise for now. Pre-defined templates were included in the sitemap file you installed in your website connector to enable you to complete the subsequent exercises.

Create a Hero Banner Web Experience Template

1. Search and select Personalization from the App Launcher.
2. Click on the Experience Templates tab.
3. Click New.
4. Select default from the Data Space menu.
5. Select Web from the Channel menu.

[ACTION REQUIRED: Review Note] - NOTE: Mobile Experience Templates will be supported in an upcoming release.

6. Enter Hero Banner in the Experience Template Name field.
7. Click Next.

[ACTION REQUIRED: Review Note] - NOTE: Template State. Don’t worry that your template is inactive, you’ll have the opportunity to save and enable it at the end of the workflow.

8. Choose the Training Site website connector from the Connected Websites list, then click Next.

[ACTION REQUIRED: Review Note] - TIP: Website Connectors. You can associate multiple website connectors with a single template, making it easy to reuse the same template across multiple domains.

9. Select Handlebars from the Experience Template Type for Web menu.

[ACTION REQUIRED: Review Note] - NOTE: Experience Template Types. Two template types are available: Handlebars and AgentScript. Handlebars is a lightweight templating language ideal for straightforward personalization scenarios.

10. Select Global Template from the Content Source menu.
11. Select Simple Hero Banner from the Global Template menu, then click Next.

[ACTION REQUIRED: Review Note] - TIP: Template Options. You can either create a template from scratch or use a global template as a starting point. For this exercise, you will use the Simple Hero Banner Global Template.

12. Select Banner with CTA from the Default Response Template menu to map response template attributes to template variables.
13. Using the existing variable labels, select the following default values:
    • BackgroundImageUrl: Attributes > Image URL
    • CallToActionText: Attributes > CTA
    • Header: Attributes > Header
    • CallToActionUrl: Attributes > CTA Destination URL
    • Subheader: Attributes > Sub-Header

[ACTION REQUIRED: Review Note] - TIP: Template Variables. Template variables can be referenced directly in the template HTML using Handlebars expressions, allowing values from the decision response to be dynamically rendered on the website.

14. Click Next.
15. Expand the code section and copy the provided code snippet.
16. Replace the existing style element (on lines 1–42) in the template code editor with the code you just copied.

[ACTION REQUIRED: Review Note] - NOTE: Customize Experience Template Code. In this final step, you define the HTML and CSS that control how the decision is rendered on the website. Since you selected a global template, the required Handlebars expressions are already included in the HTML.

17. Click Save & Activate.

Create a Product Recommendations Web Experience Template

To ensure you also have a template available to render the recommendations personalization point, create an additional experience template.

1. Click New from the Experience Templates page.
2. Select default from the Data Space menu.
3. Select Web from the Channel menu.
4. Enter Product Recs in the Experience Template Name field.
5. Click Next.
6. Choose the Training Site website connector from the Connected Websites list, then click Next.
7. Select Handlebars from the Experience Template Type for Web menu.
8. Select Global Template from the Content Source menu.
9. Select Simple Recommendations from the Global Template menu, then click Next.
10. Select Recs with Header from the Default Response Template menu.
11. Using the existing variable labels, select the following default values:
    • image: Goods Product > Image URL
    • price: Goods Product > Price
    • name: Goods Product > Product Name
    • url: Goods Product > Product URL
12. Click Next.
13. Click Save & Activate (no changes are required to the HTML template).

Summary

Both templates are now active and available in the Web Personalization Manager. They can be selected when applying personalization points to your website, allowing you to configure and preview your targeted experiences effectively.