Edit HTML

Easily edit and personalize HTML-based Supademos — no code required.

What is HTML editing in Supademo?

HTML-based Supademos create pixel-perfect clones of your product's front end. You can edit text, images, and components directly within your demo to create tailored, on-brand experiences for different audiences.

To learn about how to capture or record HTML-based Supademos, click here.

Text

Edit any text element in your HTML demo - including changing font style, editing text, colour, and adding variables.

1. Click "Edit HTML" from the Supademo editor

2. Hover over the text and select it

3. Type to enter or edit the displayed text

4. Modify text style as needed

5. Click "Save changes" when finished

Use the Find and Replace functionality to streamline content updates across Supademo, enabling you to efficiently modify text or images across multiple slides without manual editing.

Tip: Use the step switcher on the top left to quickly made edits for multiple steps. Changes you make to common components (i.e changing the logo on the header) will be reflected across all step pages.

Images

Replace or modify any image in your HTML demo.

1. Click "Edit HTML" from the Supademo editor

2. Hover over the image and select it

3. Click "Replace" to upload your own image—perfect for adding client or prospect logos

4. Click "Save changes" when finished

Take precise control over your HTML edits with options to apply changes globally or to specific steps only.

Control options:

• Apply to All: Make changes across all matching elements in your entire demo

• Apply to Current Step: Limit changes to the current step only

Effects (Redact/Hide)

Protect sensitive information or focus attention:

1. Select any text or image element

2. Hide elements completely to remove distractions

3. Redact sections to maintain layout while protecting content

Tip: Duplicate a Supademo to make account-specific personalization from one Supademo.

Variables

Add dynamic personalization to your demos:

Use tokens like {{role}}, {{name}}, or {{company}} directly in your HTML capture. These variables can be pre-filled using:

• Personalized links

• URL parameters

• Custom data inputs

Tip: Duplicate a Supademo to create account-specific versions from one master demo.

Image Variables

You can also dynamically swap logos, screenshots, or any visual element to personalize demos at scale — powered by links or UTM parameters.

Whether you’re tailoring by industry, showcasing specific use cases, or rotating logos, image tokenization allows a single template to deliver hundreds of personalized demo experiences.

Perfect for automated sequences, marketing campaigns, or account-based selling — anywhere every touchpoint needs to feel tailored.

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 → complete the fields to generate a custom link.

Learn more about dynamic variables here.

Scrolling

The "Disable Scroll" option prevents the ability for viewers to scroll around on a particular page on an HTML Supademo – helping creators build more of a locked-in, guided demo experience.

Easily set this toggle on a per step, or across all steps in a demo, depending on your needs.

---

Check out how to edit HTML-based Hotspots

HTML-Based Hotspots