Skip to main content
Sitecore Documentation
  • Learn
  • Downloads
  • Changelog
  • Roadmap
PersonalizeCloud Portal
Sitecore Personalize
        • Getting started
            • Create a variant using a web template
            • Create a variant using custom code
            • Use HTML
            • Use CSS
            • Use JavaScript
            • Inserting an experiment in your HTML
        • Using traffic allocation and variant traffic assignment
        • Target a webpage
        • Apply a condition
        • Apply a segment
        • Use a decision model
    • SitecoreAI experiments
    • Using the experiment list
    • Manage experiment details
    • Set automated post-test actions
    • Set up email notifications
    • Duplicate, delete, and view details
  • Using client-side JavaScript
  • Glossary
  1. Introduction to experiments in Sitecore Personalize
  1. Sitecore Personalize
  2. Introduction to experiments in Sitecore Personalize
  3. Introduction to web experiments in Sitecore Personalize

Create a variant for a web experiment using custom code

To apply personalization to a web experiment , you can create a variant using custom HTML, CSS, or JavaScript. When Sitecore Personalize runs the web experiment, it will execute any HTML, CSS, or JavaScript configured in the variant.

For personalization to work, the variant needs to pass guest data to your organization's website. This includes details like the guest's first name, location, loyalty number, and so on. This information is known as server-side data. To facilitate, you need to compose the API request using FreeMarker, then reference it in the relevant HTML, CSS, or JavaScript code.

To create a web experiment variant using custom code:

  1. In the Experiment variants tile, click Create variant.

    Note

    You can create a maximum of six variants in each experiment.

  2. In the Select template pane, click Create template.

  3. In the code editor, use custom code on the relevant HTML, CSS, or JavaScript tabs.

  4. Compose the API request using FreeMarker.

  5. Click Save.

  6. Click to close the code editor.

If you have suggestions for improving this article, let us know!

© Copyright 2026, Sitecore A/S or a Sitecore affiliated company.
All rights reserved.

Privacy policySitecore Trust CenterTerms of use