When creating steps, you can add a highlight to help bring the step into focus or draw a user's attention to something particular on the page. 

You have a few options, that depend on whether the step is positioned Relative to screen or Anchor to element:

  • Shroud: appears behind the step and covers your interface so users focus on the step. 

  • 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 Add Content menu. You will be presented with the following adjustment options:

  • Color

  • Opacity

  • Blur

Example Shroud usages

  • 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 by clicking on the Lightbox panel under the Design header on the Control Panel.

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

Hotspot

You can introduce a hotspot for a step within the On-page Trigger panel under the Display Rules header on the Control Panel. This means the step will show upon clicking a hotspot icon. 

To do this: define an on-page trigger of type icon, click or hover, and select the hotspot icon.

You can adjust the hotspot according to the following options:

  • Target element

  • Icon width

  • Offset (X and Y axis)

  • Fill color

  • Hotspot trigger persists after the step is displayed (yes or no)

👉 Learn more about the different trigger options

Multi-step Tours using shrouds

Generally, it is not a good UX practice to use a shroud with multiple steps in sequence 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 brief moment between steps if they are image intensive and take slightly longer to render.

To prevent this "flicker" from occurring, you can manually add in 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).

Add to body of step to add shroud


<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.

Add to Additional Actions of a button to remove shroud


rshroud.remove();delete window.rshroud;


Discover more

Did this answer your question?