Skip to main content

Create a web template

Abstract

Describes how to create a web template using HTML, CSS, JavaScript, and FreeMarker (Sitecore Personalize).

Technical team members can create web templates using HTML, CSS, JavaScript, and FreeMarker.

You can optionally create a form for the marketer to complete and render a preview as the marketer completes the form.

When you are ready to make the web template available to the marketer, change the status to published. When the marketer creates the web experiment or experience based off the web template, a form displays for them to apply further customization.

If your organization is using Sitecore Cloud Portal, team members with a User, Developer, or Admin role in Cloud Portal can create a web template.

If your organization is not using Sitecore Cloud Portal, you must have an Enterprise Designer role to create a web template.

To create a web template:

  1. On the navigation pane, click Developer Center, Web Templates.

    The Web Templates screen displays.

  2. Click Create Template.

    The Title of template dialog box displays.

  3. In the Name your Template field, enter an intuitive name for the web template.

    As you type, the name of the template displays in the ID field.

  4. Click Create.

    The template editor displays for you to customize using HTML, CSS, JavaScript, and FreeMarker, as shown in the following image.

    Configuring HTML in a web template.

  5. Define the structure and content of the web template by using custom code and configuring the API response. When Sitecore Personalize executes a variant for a web experiment or experience, it executes any HTML, CSS, or JavaScript configured in the variant. In order for personalization to work, the variant must pass any guest data to your organisation's website, for example the guest's first name, location, loyalty number, etc. This information is known as server-side data. To facilitate, you must compose the API response using FreeMarker, then reference it in the relevant HTML, CSS, or JavaScript editor.

  6. From the Settings tab, configure the following:

    • Description: Enter a description of the web template.

    • Tile Image: Click the CDP_webtemp_pencilicon.png icon to select an image that represents the type of web template. Only Sitecore CDP users will see this image.

    • Render a Preview on the Experience: Click this checkbox to render a preview of the web experiment or experience as the user completes the form. We recommend that you test that the web experience will successfully render before publishing. Do not use this option for more sophisticated web templates that use handlebars loops. The web experiment or experience will not render as the form is completed, because it needs to wait until the code finishes compiling.

    • Template available only on create: Click this checkbox to include the template on the Out of the Box tab that the user sees when selecting a template.

  7. Click Save.

  8. In the web template, in the top-right corner, click the toggle switch to put the template in the published state to make it available when a user adds a web template.