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:
- Text alignment
- Surrounding Paddings
- Button Properties
- Action ---> is what happens when you click on this button.
- 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.