How can I highlight my Step to draw attention?

Learn how to add a shroud, lightbox, hotspot, or blur to your page along with your Step.

Pulkit Agrawal avatar
Written by Pulkit Agrawal
Updated over a week ago

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


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.

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

  • Color

  • Opacity

  • Blur

  • Color: #000000
    ​Opacity: 0%
    ​Blur: 0

  • Color: #000000
    ​Opacity: 0%
    ​Blur: 4

  • Color: #000000
    ​Opacity: 40%
    ​Blur: 0

  • Color: #000000
    ​Opacity: 40%
    ​Blur: 4

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.

  • 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

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)


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.


Discover more

Did this answer your question?