Chameleon makes it easy for you to draw attention to the elements or actions that matter to your users.
You can highlight any Step into focus or draw a user's attention to something particular on the page.
Availability & Usage
🔐 Available for all plans
📍 Ready to use with Tours & Microsurveys
⚙️ Access it from the Builder
Quick access
How can I draw attention to a Step?
With Chameleon, you can always point your users to valuable moments, and actions. You have a few options, that depend on whether the Step is positioned Relative to the screen or Anchored to an element:
Shroud: appears behind the Step and covers your interface so users focus on the guidance you provide.
Lightbox: creates an overlay around a specific element to bring sharp attention to that element.
Hotspot: pulsing icon over a specific element to bring subtle attention to it.
Shroud
You can add a Shroud from the Design section of the Builder. Here you can make the following adjustments:
Color
Opacity
Blur
Example shroud uses
Color: #000000
Opacity: 0%
Blur: 0
Color: #000000
Opacity: 0%
Blur: 4
Color: #000000
Opacity: 40%
Blur: 0
Color: #000000
Opacity: 40%
Blur: 4
Lightbox
After positioning your Step around an element, you can then add a Lightbox from the same Design section in the Builder. Aside from color and opacity, you can also adjust the position, radius, and padding of the anchored element.
Example Lightbox settings
Color: #000000
Opacity: 50%
Border width: 0px
Opacity: 0%
Border width: 3px
Border color: #0087AB
Color: #0087AB
Opacity: 50%
Border width: 3px
Border color: #0087AB
Color: #0087AB
Opacity: 50%
Border width: 3px
Border color: #0087AB
Radius: 50px
Padding: 20px
A Lightbox that won't block
Usually, you want users to focus on the elements you're highlighting. But, there are cases, where you'll want to bring attention while allowing users to engage freely with your app.
💡 You can add a custom CSS rule from the Builder, to enable users to interact with the elements inside of Lightbox and on your page:
#chmln .chmln-lightbox-cell { pointer-events: none !important; }In this case, you'll also want to drop the opacity of the Lightbox to 10%, so users can see and interact with the other elements on your page. Optionally, to ensure you're focusing users' attention on the right action, you can add a border of the same color as your Step. 😉
Hotspot
You can add a hotspot as a trigger for a Step, from the On-page Trigger option under the Display Rules section in the Builder. This means the Step will show when the user clicks the hotspot icon.
To do this: add an Icon on-page trigger, that is either triggered on click or hover and select the hotspot icon.
You can adjust the hotspot according to the following options:
Target element
Icon width
Icon placement
Offset (X and Y axis)
Fill color
Hotspot trigger persists after the Step is displayed (yes or no)
👉 Learn more about triggering Experiences from user actions.
Multi-Step Tours using shrouds
Generally, it is not a good UX practice to use a shroud with multiple sequenced Steps, but we understand that occasionally this need may arise.
If you set up back-to-back Steps with shrouds, you may notice a brief "flicker" during the quick moment between Steps, if they are image intensive and take slightly longer to render.
🪄 To prevent this "flicker" from occurring, you can manually add a shroud for those Steps and remove it at the end of the Tour.
You'll add a script in the body of the 1st Step to display the shroud. Then on the last Step, add an Additional Action to 'Run Code' on the button that will remove the shroud and complete the Tour (or move to another Step without a shroud).
1️⃣ Here is the script to add to the body of a Step, to add a Shroud to it:
<script>if(chmln.$('#new-shroud').length==0){var rshroud=chmln.$('<div id="new-shroud"></div>');rshroud.insertBefore( "#chmln-dom" );rshroud.css({position:'fixed',top: 0,left: 0,right: 0,bottom: 0,'background-color': '#000000',opacity: 0.4,'z-index': 9999999});}</script>
You can adjust the background-color and opacity as you'd like.
2️⃣ Here is the code to add in the Additional Actions - Run Code field, to remove the Shroud:
rshroud.remove();delete window.rshroud;
📺 Watch the video overview below to see how to do this for your Tours:
Note: this video above contains an older version of the Chameleon Builder, that is now looking sharper. We will update all our videos soon.