Chameleon Experiences can be customized in detail to achieve a native blend, or to add context and value to your communication. You can upload photos, videos, or GIFs to deliver the right message and delight your users.
You can also easily launch videos from your buttons with our integrations, or via a follow-up Step, or Tour.
Availability & Usage
🔐 Available for Startup, Growth, Enterprise
📍 Add them to your Tours, Tooltips, Embeddables, Microsurveys, Launchers
How to add media to Experiences?
Chameleon Experiences are built to help you communicate with your audience effectively and create a better in-product experience. Visuals are a big component of how people internalize information or experiences. Sometimes they make a difference in successfully driving the next action or behavior.
When building your Experience, you have different options to add visuals that complement your message and styling.
Upload an image, video, or GIF by clicking the “Media” component in the Design section of the Builder.
Launching videos via additional Actions, or as a follow-up Tour Step.
Uploading an Image
You can upload different image types (.jpeg, .png, or .gif) that will display in your Experience. In the same panel, you can also adjust its position, height, and width.
ℹ If you don't use the full-width option, you can adjust the corners of your Media component.
ℹ The position of your Media component will be relative to the Body component of your Experience. If you have both a Title and a Body component, the "Under title" position option will show up for you to use.
ℹ When updating values in PX or % from the Builder, you can hold down Shift on your keyboard to increase/decrease the values by tens.
Adding a Video
To add a video to your Experience, select the same Media component to enter the URL from the site where your video is hosted, or use our Embed component available for Tours. You can add videos from a range of providers, including:
YouTube
Wistia
Vimeo
Loom
You can then update its position, height, and width from the Builder.
ℹ We use a third-party solution for embedding, for a full list of providers please visit Embedly.
👉 Check out our native integration with Loom; enable it from the Dashboard to launch videos with a button click.
Specifying embedded video domains
To keep your videos private, some video hosting services provide the ability to specify which URLs and domains the videos can appear on. To add Chameleon to your hosting services list of allowed URLs, be sure to update your allowed list with one of the options below:
The URL:
//embedly-cdn.chameleon.io/widgets/*The domain
embedly-cdn.chameleon.io
👉 If you want to leverage URLs with additional parameters attached we suggest you use our Embed feature or explore our native Loom integration.
Chameleon also supports GIFs, which essentially are image files that support animation. Use GIFs to showcase new functionality, create a simple delight moment for users, or provide quick references.
🤝 Remember to set an alt text to your visuals to make them accessible to all your users. Learn more about Accessibility in Chameleon.
Can I resize my images?
If your visuals fall outside the ideal dimensions for your Chameleon Experiences, you can resize them to fit just right, using your device’s photo viewer.
Mac: using Preview
Choose Tools > Adjust Size
Select Pixels from the unit dropdown menu.
Enter new values for height (296px) and width (710px). Note: see below on how to maintain proportions.
Click Ok to save.
✨ Tips to get a picture-perfect result:
To ensure that the image keeps its original proportions, make sure “Scale proportionally” is checked. If you change either the width or height, the other value changes to maintain the proportions.
To make the image’s dimensions smaller without losing any detail, deselect “Resample image” before changing the width or height.
To resize multiple images at the same time, display the images in the same window, select them in that window’s sidebar, and then choose Tools > Adjust Size.
Windows 10: using Photo Gallery
Open Photo Gallery.
Select the photos you want to resize, and then on the Edit tab, in the Properties group, click Resize.
Click the Select a size list, and then select a size for your photos. For a custom size, in the Maximum dimensions box, enter the maximum width you want your photos to be.
Click Resize and save.
Windows 10: using Paint
Start Paint and Open the image you want to resize.
On the Home tab, in the Image group, click Resize.
To resize the picture so it's a specific size, click Pixels, and then enter a new width in the Horizontal box or new height in the Vertical box.
Click the Paint button, then Save.
You can leverage media components to launch additional Actions leading users to another Tour, Microsurvey, or showing an interactive demo, chat, or more!
👉 See all the additional Actions you can launch.
You can also use the Media component to allow users to navigate your Experiences. Find the "Action when clicking" option and set if it should lead users to a specific Step, progress to the next Step, or complete your Tour.
Launch Video Tours
Aside from uploading videos or launching them as additional Actions, you can also configure Tour Steps to create a more immersive user experience for users when showing videos.
👉 Set your Media component to full width and maximum height and remove the Title and Body components to draw focus on your video. Optionally, you can also add a Shroud to your video message.
📺 Check out the video below with some best practices for in-app videos: