# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.supademo.com/customize/personalize/variables-and-tokens/image-variables-in-html-demos.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.