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.

🔐 Available for all plans

📍 Ready to use with Tours & Microsurveys

⚙️ Access it from the Builder

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:

You can add a Shroud from the Design section of the Builder. Here you can make the following adjustments:

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.

💡 In cases where you want to bring attention to specific features while allowing users to engage freely with your app, you can add a custom CSS rule from the Builder. This way users can interact with the elements inside of Lightbox and on your page.

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:

👉 Learn more about triggering Experiences from user actions.

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;

Note: this video above contains an older version of the Chameleon Builder, that is now looking sharper. We will update all our videos soon.