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.
The option to add media is available within Chameleon Tours, Tooltips, and Microsurveys.
🎯 Remember that aside from adding visuals in the Builder, you can control your Experiences’ global styling from your Chameleon Dashboard.
Quick access
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. And sometimes they make a difference in successfully driving the next action or behavior.
When customizing your Experience, you have 3 options to add visuals that complement your message and styling. Add an image, video, or GIF by clicking on “Media” in the Design section of the Builder.
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 positioning and height, to make sure it fits your specific context and styling. The position of your visual will be relative to the Body component of your Experience.
To add a video to your Experience, enter the URL from the site where your video is hosted into the Video URL section of the Builder. You can use this opportunity to link videos that bring extra value and deepen the understanding of your product or feature.
💡 See here how to integrate videos with Chameleon Experiences.
Chameleon also supports GIFs, which essentially are image files that support animation. You can use GIFs to showcase something simple, 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. You can learn more about Accessibility in Chameleon from this article.
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.
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.
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.
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 in your Experiences to set up Additional Actions leading users to another Experience, or component when they click on your visual.
You can set up these events to follow the completion of your Survey, on a Tour Step, or within your Tooltip. These actions are available at the bottom of the “Media” panel.
When you click on the Additional action that you want to link to your media, the options for each feature will appear. The Additional Actions that you can customize behaviors from clicks on your media are:
Load URL | Add a Video URL that will open up in a new tab. Note: the step will only show if it matches the current URL. If a subsequent Step's URL trigger does not match the redirect based on this action, that Step will not show. |
Click Element | Select a page Element that users will be led to when he hits the "Next" button. Great for redirecting users without using URLs. Learn more about how Chameleon identifies elements. |
Start Tour | Select an active Chameleon Tour that users can start. This means you can string together different Tours. Only Live and Manual Delivery Tours are available to select here. Any Trigger conditions for the first step of the Tour (e.g. click a button) will be ignored here. |
Start Survey | Select an active Chameleon Microsurvey that users should be taken to, to collect feedback. Any Trigger conditions for the Microsurvey (e.g. click an icon) will be ignored in this instance. |
Run Code | Add a custom JS code to run a custom action. This can include a back-end message or opening a custom dialogue window, placing the cursor in a certain field, etc. See examples of this here. |
Typeform survey | Link a Typeform to collect user responses to a microsurvey. Read more in our Typeform integration guide. |
Calendly scheduler | Show a Calendly modal to help users schedule a call. Read more in our Calendly integration guide. |
Intercom messenger | Allow users to start an Intercom conversation with you, with a pre-filled message. Read more in our Intercom integration guide. |
You also have the option to execute actions connected to your Chameleon Experience, such as completing a Tour or Microsurvey, moving the user to the next Step, etc.
Use visuals to communicate a strong message or help direct users through a series of behaviors. With Chameleon, you can ensure that each Experience component contributes to your goals and your customers’ actions.