HTML editing

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

What is HTML editing in Supademo?

Since HTML-based Supademos clones the front end of your product, you can edit text, images, and components directly within your demo for tailored, on-brand experiences.

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

Editing text elements

1. To edit a text element, click "Edit HTML" from the Supademo editor.

2. Hover over the text and select it to make changes directly.

3. Next, type to enter or edit the displayed text, modify the text style, or add personalization variables. You can also blur or remove the section completely.

Tip: You can add personalization attributes using dynamic variables, directly inside of your HTML capture. Use tokens like {{role}}, {{name}} or {{company}} and pre-fill them with personalized links or URL parameters. Learn more here.

1. Click Save changes on the top right when finished.

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

Editing images or HTML components

1. To edit a image or HTML element, click "Edit HTML" from the Supademo editor.

2. Hover over the and select it to make changes directly.

3. For images, click Replace to change the logo, chart, or image with your own upload — like using a client or prospect's own logo.

4. Otherwise, click to blur/redact sections or hide it completely.

5. Click Save changes on the top right when finished.

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

Check out how to edit HTML-based Hotspots

HTML-based hotspots