Components for testing and personalization

Create reusable visual or code components once and use them in experiments and personalized experiences.

Updated 9 August 2026

Create once, use in either campaign type

Optimize → A/B Testing → Components and Optimize → Personalization → Components open the same shared Component library. A Component can be used by an A/B campaign, a Personalization campaign, or both. The list identifies whether each item was created from Code or the Builder and shows campaigns that already use it.

This shared library is why separate A/B and Personalization component guides would be redundant.

Choose the creation method

New Component From Builder

Use the visual editor for content and layouts that can be assembled from standard elements, project media and reusable sections. The detailed controls are covered in The WYSIWYG Builder.

New Component From Code

Use code when the experience requires precise HTML, CSS or JavaScript behaviour that the visual elements cannot express. Code should be reviewed, scoped and tested before it is exposed to live visitors.

Both routes begin with a recognizable internal name and an optional description. Describe the visible change and its intended use rather than repeating the campaign name.

Design the Component for safe insertion

Keep selectors and styles scoped so the Component does not alter unrelated page elements.
Do not assume every matching Location has identical markup without checking its templates.
Make the Component responsive and keyboard accessible.
Use project-owned images and durable destinations.
Keep measurement hooks intentional; do not create duplicate Interactions or Conversions.
For code Components, fail safely when the target element is absent.

Incendium AI control variant builder — Components can be produced with the visual tools or as controlled code, then reused by campaign setup.

Understand placement in a Campaign

When a Component is added to a Campaign, configure:

Component to Insert — the reusable Component visitors will receive.
Location — where the experience is allowed to run.
CSS Selector — the exact target element on that page.
Insertion Method — how the Component is placed relative to the target element.

Preview more than one matching URL when the Location contains several templates. A valid selector on one page can be missing or ambiguous on another.

Edit with awareness of reuse

The Component list shows where an item is used. Check those campaign links before editing or deleting it: changing one shared Component can affect several live experiences. For a materially different experiment, create a new Component so the original campaign remains reproducible.