> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/customize/personalize/variables-and-tokens/image-variables-in-html-demos.md).

# Image Variables in HTML Demos

## Dynamic Images <a href="#dynamic-images" id="dynamic-images"></a>

In addition to text, Supademo supports dynamically swapping logos, screenshots, or other visual elements — powered by links or UTM parameters.

This allows a single template to deliver hundreds of personalized demos, whether you’re:

* Tailoring by industry
* Showcasing specific use cases
* Rotating through different logos

Dynamic images are perfect for automated sequences, marketing campaigns, and account-based selling — anywhere every touchpoint needs to feel personalized.

**Adding Dynamic Images**

1. Enable **HTML Edit** mode.
2. Click the image you want to update.
3. Select **Replace Image**.
4. In the **Dynamic Image** field, enter your variable name.
5. Close the toolbar.

**Sharing With Dynamic Images**

* **Copy Dynamic Link** → updates UTM parameters in the URL for sharing.
* **Create Link** → fill in the fields to generate a custom link.

{% @supademo/embed demoId="cmcduta804yme8qsz1abo0l2o" url="<https://app.supademo.com/demo/cmcduta804yme8qsz1abo0l2o>" %}

{% hint style="success" %}
Adding a variable to the HTML/Sandbox demo's URL parameter will personalize every image that uses that variable name  (i.e. {{logo}} or {{graph}}) within the demo\
\
Simply add variables by clicking on the "{}"  icon from the HTML edit toolbar and adding a variable name. You can then create a Personalized Link and upload your variables or add publicly available URL of the image in the demo URL parameter.
{% endhint %}

This makes it easy to customize demos for different audiences or use cases.