Images

Use a component target around an image.

1. Add a wrapper

<div data-personalize="hero-visual">
  <img src="/images/overview.jpg" alt="The complete product"
       width="1200" height="800">
</div>

Target [data-personalize='hero-visual'] with mode: 'component' and placement: 'replace'.

2. Add an image variant

<img src="https://www.example.com/images/operations-view.jpg"
     alt="The operations workspace showing a weekly schedule"
     width="1200" height="800"
     style="width:100%;height:auto;object-fit:cover">

Use your own image URL. Keep dimensions consistent across variants to avoid layout shifts, and write alt text for each image. If an image and its message must agree, include both in one component.

Supported image markup

Imported HTML supports src, alt, width, height, loading, classes, and allowed inline styles. It does not preserve picture, source, srcset, or sizes. Keep a responsive image pipeline in your application if you need those features.Relative URLs resolve against the website origin. A broken image URL does not automatically select another variant. Preview the saved result before publishing.

Start here

Install & integrate

Build experiences

Work with agents

Measure & operate

1. Add a wrapper

2. Add an image variant

​1. Add a wrapper

​2. Add an image variant

1. Add a wrapper

2. Add an image variant