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
👀 Coming soon as an add-on
⚙️ Record using the Chrome Extension & edit in the Dashboard
Record your Demo
Go to any page in your product and start recording your Interactive Demo from the Chrome Extension.
👀 You'll soon be able to start your recording from your Dashboard's Demos page; clicking "Create a Demo" will allow you to set a different URL as the starting point of your Demo.
Once you start your recording, you can click around your app as usual. To stop the recording, open the Chrome Extension and click "Stop Recording". Next, you can edit your Demo in the Dashboard.
ℹ If you start recording a Demo and click "Esc," 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.
The cases in which Chameleon can fail to record your actions correctly are rare, but contact us if you encounter any issues!
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 what Steps you want to keep.
Video Steps do not support Hotspots, Annotations, or Pan and Zoom.
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 remove and duplicate Steps, customize your hotspots, highlight features, and more.
ℹ You can edit any Demo that's been recorded on your Chameleon account.
ℹ You can trim the duration of your video steps in the Dashboard. Just drag the handles in the video editor to make it shorter.
Chapters
You can add Chapters to your Interactive Demo to invite users to explore with an engaging message, help users navigate longer Demos, or push users on their journey with a valuable end CTA.
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 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.
Hotspots
Chameleon adds a Hotspot wherever you click on the page. You can choose between two different styles: a pointer or a custom area. 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 the size of a 'custom area' Hotspot with your mouse.
ℹ 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"
Stickers
👀 We'll soon add stickers that you can use to personalize your interactive Demo.
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 Dashboard, go to the "Share" section below. Here, you'll find a few useful options to share your Demo and 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 chats, 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.