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
📍 Integrates well with Clearbit
⚙️ Create from the Dashboard
Record your Demo
You can start recording Demos from the Chrome Extension or the Dashboard.
Use the Chrome Extension to start your recording on the page you're visiting.
👀 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 places a hotspot where you clicked.
Whenever you move your mouse in 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.
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, go below to the "Share and Export" section. Here, you'll find a few useful options to share your Demo and layer in user data to help you identify and engage viewers.
Embed code -- click to copy your embed code and paste it on your website, blog, etc.
User and company properties -- send user and company properties to identify logged-in viewers and tie your Demo data back to individuals and 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., 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.