All Collections
Requisite buttons & custom buttons
Requisite buttons & custom buttons

Learn how to add and utilize buttons to your onboarding materials.

Gabriel avatar
Written by Gabriel
Updated over a week ago


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, 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:

  1. Button Style (inherited from the chosen theme);

  2. Alignment

  3. Paddings

  4. Button Properties

  5. Click Action

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

Did this answer your question?