Requisite Buttons

Guides can be composed of one or more steps in succession. If you choose the latter, to be able to move back and forth between a guide's steps or to 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: When you have a walkthrough, you can advance with NEXT to the “next step”.
  • PREVIOUS: When you have multiple steps, you can return to the “previous step”.
  • DONE: Its action is to “Dismiss Guide.” This is the same one that happens when you “X” out of a Guide.

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, instead of using a requisite button with a preset action, which can be canceled by removing the tick on the step editor, you can always use a custom button. To learn more about them, keep on reading...

     
     

Using a Custom Button

Customs buttons are components that you can add to a guide's step or a Hotspot. Their outlook and functionality can vary according to their designer's taste and expectations. If you ask yourself how? Let's create one and see!

  • First, click on +Step on step editor and choose a step type. 
  • Once you select a step, go find it on the page and click on +ADD in green color to open the New Component Menu, then select the Button.
  • Once you select the Button, a template button saying GO is going to be added as a new component. You can change its text simply via click and type.

Each time you click on the Button, a new button is going to be added. You can change the location of these buttons with the actions of drag and drop. As you can see on the following example:

  • We've selected two buttons, 
  • Change one's text to DISMISS and, put them side by side,
  • Cancel the default requisite buttons.

Now it is time to set them custom actions: What is going to happen when end-users click on them? What should be their function? Let's find an answer together!

  • When we click on a button, a setting menu opens just below the button itself, from left to right containing the following items:
  1. Text alignment 
  2. Surrounding Paddings
  3. Button Properties
  4. Action ---> is what happens when you click on this button.
  5. Delete
  • If you click on the arrow icon on the above image, you'll see that the default action is Go to the Next Step - click on it and see what your options are:
  • You can select a new action from the list:

Go to URL: For directing people to a page through the button of a guide's step.

Go to Next, Previous or, Custom Step meaning any step within the same guide.

End the Guide: Its action is to “Dismiss Guide.” This is the same one that happens when you “X” out of a Guide.

Trigger a Guide: When you choose this option, you will be prompted to select your desired Guide from a dropdown list of guides. 

If you want to merge two guides, for instance, and to create an uninterrupted end-user experience, you can trigger a new guide on the last step of another one.

Also, through intermediate steps containing custom buttons that can trigger other guides can make your content branch out intelligently.

  • Finally, preview the work you've done and, if you're satisfied with it, don't forget to save it.


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?