Overview
Buttons are essential components to allow your end-users to navigate through Guide steps or trigger specific actions from your onboarding materials. In this article, you'll learn how to use them best.
Requisite Buttons
Guides can be composed of one or more steps in succession. If you choose the latter, to move back and forth between a Guide's steps or dismiss one, we use the Requisite Buttons. Within each step you create, their default is active.
Default Requisite Buttons are NEXT, PREVIOUS, and DONE.
NEXT: Proceed to the following Guide step.
PREVIOUS: Returns to the previous step.
DONE: Finishes a Guide, the same as clicking on the "X" icon.
If you'd like to redesign your Requisite Buttons, their color, roundness, and content/text can be changed through Themes in UserGuiding Panel.
Apart from that, you can always use a custom button instead of using requisite buttons with a preset action.
Custom Buttons
Customs buttons are components that trigger specific actions from a Guide or a Hotspot. You can select the Button component to add buttons to your Guide steps or Hotspots.
Click on the custom button to open the settings. Here, you can design and manage your Button component.
Here, from left to right, respectively, you can find:
Button Style (inherited from the chosen theme);
Alignment
Paddings
Button Properties
Click Action
Delete
Setting a click action to a custom button
If you select "Click Action" (arrow icon), you'll see the available click action options.
If adding the custom button to a Guide step or a Hotspot, you can set one of these actions:
Go to URL: redirects the end-user to a specific URL. Alternatively, it can be loaded in a new tab
Run JavaScript: runs a code snippet
Go to Next/Previous/Custom Step: proceeds to a particular Guide step
End the Guide: closes the current Guide (same as clicking on the "x" icon)
Trigger a Guide: closes the current Guide and triggers the selected one
Close Hotspot: closes the current Hotspot (same as clicking on the "x" icon)
Dismiss Hotspot: dismisses the current Hotspot (works precisely as the Hotspot "Dismiss Option")
Copy to Clipboard: copies the provided text to the clipboard
💡 As a tip, if you want to connect two Guides and create an uninterrupted experience, you can trigger a new Guide on the last step of the current one you're editing.