Create interactive Demos to showcase your product's capabilities and help users learn faster. You can embed your Chameleon Demos on your website, help docs, blog articles, or launch from a Chameleon Tour.
You can send Demo events (e.g., "Demo Started," "Button Clicked," "Form Submitted") to your analytics tools and layer them on top of your product data to better understand prospects and customers.
Availability & Usage
🔐 Available Free & AI+ add-on
⚙️ Record using the Chrome Extension & edit in the Dashboard
👥 Demos Role available
Start creating your Demo
You can create a Demo with Chameleon in different ways:
by recording a new Demo using the Chrome Extension
with AI narration or via basic screen capturing
by adding custom images, GIFs, or videos into an existing Demo
ℹ You can invite teammates to create Demos on your account through the "Demos-Only" role without worrying about disrupting the end-user experience.
Record your Demo
Go to any page in your product and start recording your Interactive Demo from the Chrome Extension.
Before starting your recording, you can adjust the screen resolution and pick how you want to record:
using voice commentaries -- you can narrate through your flow as you record. Our AI uses your voiceover to generate copy for your Hotspots, Chapters, and generates a "Campaign Kit."
just screen actions -- Chameleon captures your screen clicks and scrolls, but does not add copy or Chapters to your Demo
ℹ If you use the voice commentary option, you'll have to enable access to your microphone before starting the recording.
👉 AI narration helps speed up Demo creation and supports an entire feature launch with ready-to-use Experiences and content.
Once you start your recording, you can click around your app as usual. If you use AI narration, you can begin talking through your flow to explain what you're doing, add more context around user benefits, or use cases. Our AI will use your voice notes to add engaging Chapters and copy to your Hotspots.
You can pause, restart, or cancel your recording anytime from the Extension. To stop the recording, click "Finish" in the Chrome Extension.
Next, you can edit your Demo in the Dashboard.
ℹ If you start recording a Demo and hit "Esc" on your keyboard, that will cancel the countdown and the Demo recording.
Tips for recording Demos
Chameleon should capture everything that you do while recording, including when you move through pages on the same domain. If you switch tabs, Chameleon will stop recording.
Try to avoid quick movements while recording, as Chameleon may miss recording a click or action.
To ensure you're capturing every interaction, add an extra click or spend a few more seconds hovering over specific elements that you're trying to capture.
Although it is rare for Chameleon to fail to record your actions correctly, contact us if you encounter any issues!
Tips for recording with AI commentaries
It's really easy to use this feature to speed up building Demos and simultaneously capture your ideas and product workflows. Here are some tips to help you get the most out of it!
Talk as if you're explaining the product to a teammate or customer.
Use natural, descriptive phrases like “This button lets users…” or “Here’s how you create a new campaign…”
You can start by describing what you're recording (e.g., "I'm doing a demo of our Reports feature that helps teams analyze data faster")
The more precise you are, the closer the AI copy will match your goal. (e.g.
✅ “This report helps users track the impact of public mentions.”
❌ “This is an analytics report that users have in their dashboard.”
Think aloud as you walk through the UI; this helps our AI weave in copy that flows naturally with the user’s journey.
Mention what you're showing: “Now we’re on the dashboard.”
Explain why it matters: “This gives users quick access to their latest activity.”
Want your commentary to be fun, confident, or empathetic? Say that! Tone cues help the AI match your vibe.
ℹ The AI isn’t transcribing verbatim; it’s interpreting. So don’t stress over filler words or small errors. Focus on guiding the idea, not perfection.
How to record screenshots vs. videos?
When you click on a page, Chameleon records it as a screenshot Step in your Demo and will place a hotspot where you clicked.
Whenever you move your mouse between clicks, scroll the page, or type, Chameleon will record that as a video Step. While editing your Demo, you can choose which Steps to keep.
Video Steps do not support Hotspots, Annotations, or Pan and Zoom.
Adding custom media
Add custom images, videos, or GIFs whenever you want to update your Demo with a new feature or create Demos with unique content. You can also use custom media in cases where you have sensitive information on the page you want to record in your Demo, and use screenshots from a demo environment.
To add your own media, use the + button or the "Add Step" option on the left panel. Choose the image(s) or video you want to upload, and then position or crop them to match your Demo aspect ratio. Finally, click "Add Step" to include the new media in your Demo.
ℹ You can upload 1 video at a time, but in the case of images or GIFs, you can select multiple to upload. GIFs behave like images and support Hotspots, Annotations, or Pan & Zoom.
ℹ Video uploads support various formats (mp4, QT movie, mov, etc.) with a size of up to 25mb. Longer videos may experience slow loading times or buffering issues. We recommend you keep your videos short for optimal performance and a good viewing experience.
Edit your Demo
Once you finish recording your Demo, it will open in a new tab, and you can edit it in your browser. Click the "Edit Demo" button to rearrange Steps, customize your Hotspots, highlight features, and more.
ℹ You can edit any Demo that's been recorded on your Chameleon account.
Editing Steps
While editing your Demos, in the left navigation panel, click the three-dot dropdown to see more options for Steps:
duplicate
hide specific Steps from being shown to end-users
delete Steps
The "Hide" option is useful when you're testing your Demo or want to build multiple versions. For example:
If you’re iterating on your Demo, hiding Steps allows you to experiment without deleting content, making it easy to revert or A/B test.
You might have Steps that are relevant only under certain conditions (e.g., for specific audiences or upcoming releases). Instead of deleting Steps, you can keep them hidden for later use.
To reorder Steps in your Demo, simply drag and drop any Step to a new position in the left panel when editing a Demo.
Chapters
Add Chapters to your Interactive Demo to invite users to explore with an engaging message, help them navigate your Demos, or nudge them to the next valuable step in their journey with a CTA. You can also capture viewers' emails in your Chapters.
To add a Chapter, click the + icon on the left-side nav, above or below the Step you want to include your Chapter. You can customize the Chapter title and description and pick between "Buttons" and "Email" capture (as the CTA's on your Chapter).
ℹ You can add up to 5 CTA buttons on each Chapter and pick a specific Step in your Demo where users can navigate or open an external URL. If you're recording with AI narration, our AI will add Chapters to your Demo that you can review and adjust.
If you pick the "Email" option for your Chapter, you can use the Chapter title and description as usual and customize the "Submit" email button. Set the email field to only accept business emails or to be required for the viewer to see your Demo.
Download the CSV from your Analytics page to get viewers' emails, or download the CSV in the Actions dropdown on your Demo page and filter by "Demo Form submitted."
With Buttons, you can configure different actions, such as:
Navigating to a specific Step in your Demo
Opening an external URL
Launching an integration Action (Figma prototype, Chili Piper scheduling modal)
To pick an action, select your button and use the "Button action" menu to select one. After picking the Action, you'll just need to paste your prototype or scheduling link.
Users will be able to see your prototype or book a meeting with you from within your Demo.
ℹ Each CTA button can have one action set, but you can have multiple CTA buttons in a Chapter.
Videos
Video Steps are those captured via the Extension when you record your Demo, or a pre-recorded file that you upload. In both cases, you can control the speed, alignment, or duration. When editing your Demos, select a video Step to access these options:
Adjust the playback speed, from 1x to 1.7x
Select whether the video should fill to cover the Demo or scale the video to fit inside the Demo.
Choose how the video should align inside the Demo
Set a background color that appears behind the video
Trim your video by dragging the handles at the start and end of the video timeline
Hotspots
Chameleon adds a Hotspot wherever you click on the page. You can choose between two different styles: a beacon or a box. For each style, you can pick a custom color for the Hotspot and text.
ℹ Hotspots pick up your Brand's color and will use that by default. You can adjust the color of a Hotspot and apply it to all Hotspots in a Demo.
Adjust the position of a Hotspot or size of a 'box' Hotspot with your mouse. You can also adjust the border radius of your 'box' Hotspot to showcase your functionality more precisely.
With both Hotspot styles, you can update the tooltip position to be on the top, bottom, left, or right side of your Hotspot to avoid covering essential UX components.
ℹ If you remove the Hotspot from a screenshot Step, that Step will not appear in viewer mode.
Annotations
For screenshot Steps, you'll have the option to add Annotations, crop the screenshot, or blur out sensitive information.
Add simple design elements directly on the screenshot or text without a hotspot.
Adjust the size and orientation of your screenshot with "Crop".
Hide sensitive information from any screenshot with "Redact"
Pan and Zoom
Adding a "Pan and Zoom" will automatically place a selection box on your screenshot. This represents the area that will be zoomed in. Adjust the size of the box and location with your mouse to control where you want to draw attention. You can also adjust the delay.
This option is not available on video Steps.
ℹ If you decide you no longer want to use a "Pan and Zoom" effect, you can adjust the size of the selection box to be full-page.
Demo Settings
Under "Demo Settings," you can enable a top browser bar and choose between a light and dark style.
ℹ If you keep the browser bar, users will see a replay and a full-screen button in the bar. If you remove it, users can replay the Demo at the end or pause it.
Share your Demo
Once you're done editing your Demo in the editor, find the "Share" options in the top-right side.
On the Dashboard Demp page, in the "Share" section, you'll find the same options to use a share link or an embed code, plus layer in data to help you identify and engage viewers.
Share
You can copy the public link in your Dashboard and share it with users in emails, support chat, or launch from a Tour in your app.
ℹ To launch it in-app, you can use the "Product Demo" or "Open URL" using Additional Actions. With the Product Demo option, you can search for a Demo on your account and launch it in your product. Use the "Open URL" option (with the share link) if you want to launch your Demo in a new tab for users.
Embed
Use the embed option to add your Interactive Demo to your website, help center, or release notes and blog articles. Simply copy the code and paste it. Users will be able to explore your Interactive Demo on the page where you embed it.
Tracking
In the Tracking section, you can leverage viewer data and send it to your CRM, Analytics tools, or more.
User properties -- identify users and send user properties to use in segmentation or personalized campaigns.
Company properties -- send company properties and tie viewer data back to companies. You can further leverage this in your Chameleon Segments to engage demo viewers with specific in-app prompts.
ℹ You should at least send the uid as the User ID from your database, the email, and name. Viewers who are not logged in will view in "Anonymous mode"
Demo Event relay -- send Demo events (e.g., "Demo Started," "Button Clicked") to your analytics tools such as Amplitude, Segment, or data warehouse.
Consent to track -- receive consent from users to track their data.
Encode User IDs -- encode your UIDs to ensure no unauthorized third parties can access your data.
👉 Learn more about these options from our Embedding guide.