How to: create custom buttons
In addition to using the default buttons available in the Step Options Panel, you can easily add custom buttons. Custom buttons are especially useful when you want to add an option for your users to launch a specific topic, jump to a specific step or deactivate a topic completely.
In this article, we will show you how to create a custom button and when to use it.
To add a custom button:
- In the Step Options Panel, click the custom button icon.
Edit the text that you want to appear on the button.
Set the action - choose a location the button points to, e.g. choose another topic, step or deactivate the topic.
We're aiming to allow you to do as many things as possible without coding, but still keep Inline Manual to be the most flexible user onboarding application out there. Find out how you can change the appearance here.
For advanced customization of your buttons, you can use CSS code. Feel free to customize it so that it matches your brand’s identity. We know how important it is.
With HTML and the code view in the Step Options Panel, you can use texts instead of buttons or redirect users to a specific page. Our example:
Take a look at this article for more information.
If you want to add two buttons next to each other, you can do it by adding a table with 2 columns, 1 row and setting Border size to 0.
Then add customs buttons in each cell.
You can use the new inline button style here as well. Custom inline buttons are buttons that do not span across the entire step (100%) but are rather based on the amount of text.
Custom buttons come in handy whenever you want to guide your users to a specific step, a topic, or a completely different page. You can use them in targeted messages. Let us give you some ideas!
Use custom buttons in:
· Welcome message to eg. give your users the option to launch an onboarding guide or close the popover,
· Feature announcements to launch a new feature guide,
· Webinar invitations to redirect your users to a sign-up form,
· Special offers to redirect your users to a particular page when they can use a code.
Take a look at our resources for more inspiration.