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 make the best use of them.

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 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 used to trigger specific actions from a Guide or a Hotspot. You can select the Button component to add buttons into 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;

  • Go to Next/Previous/Custom: 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 exactly as the Hotspot "Dismiss Option");

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

Related Articles:

Different Kinds of Steps Within a Guide

Using the Step Editor in the Extension.

How to Add a Video Component to Guides?

Did this answer your question?