Links
Comment on page

Customizing Steps

Style and configure each guided step
Each guide that's added as a step can be customized to match your needs:
  • Hover on the guide and click on the "Edit step" icon next to it. You'll then be prompted with options "Edit" and "Config" to edit.
Edit
Config
Batch Update
Copy/Paste
  • Change the guided step's background color
  • Choose a beacon color (only for the hotspot guide)
  • Add backdrop
  • Choose the width of the frame
  • Adjust the guide's arrow alignment
  • Add a close "X" button - allows viewers to exit the guide. Learn how can be integrated with a clickable demo.
  • Add a "previous" button (allows the viewer to go to the previous step)
  • Add a "next" button - allow the viewer to go to the next step, URL, or another flow
  • Add a secondary CTA button - enables more than one action on a specific step. We recommend using this in the middle of your demo to give the viewers an option to jump directly to your call to action i.e. 'Book a call'
  • Show a step number - displays step # in the demo
  • Show only beacon - always hides the text box from the step
  • Recording audio - add audio recording which autoplay
  • Hide arrow - hide widget arrow pointer
To batch-update the steps in your demo, do the following:
  1. 1.
    Click on "Edit Step" of any guided step
  2. 2.
    Choose "Batch Update" from the bottom of the pop-up
  3. 3.
    Select different options you'd like to update and save it.

How to copy a step to another flow?

One or multiple steps can be copied from one flow to another. Here's how you'll be able to do so:
  • Click on the step you would like to copy on the right sidebar of the editor.
  • To copy the step, use Cmd + C or Ctrl + C while the step is highlighted (Alternatively, you may hover over the step number to reveal the dotted menu. When clicked, there is an option to copy the step)
  • Navigate to the flow where you would like to paste the step
  • In the right sidebar of the correct flow, highlight the position where you would like to add the step.
  • Press Cmd + V or Ctrl + V to paste the step at the desired position.
Try Interactive Demo Yourself 👇