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 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.Click on "Edit Step" of any guided step
- 2.Choose "Batch Update" from the bottom of the pop-up
- 3.Select different options you'd like to update and save it.
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 👇
Last modified 1mo ago