How to: available buttons in the step

While creating a content in Inline Manual, you usually add navigation buttons to your popovers to help your users move through your guides smoothly. You can use default buttons or create your own ones. In both cases, you will work with the Inline Manual Authoring Tool and the Step Options Panel.

In this article, we will describe available buttons and explain how they work.

In Inline Manual, there are 3 default buttons available:

· Previous - goes back to the previous step,
· Next - advances to the next step,
· End - finishes the guide.

When you activate those buttons, they appear at the bottom of your popovers, like this:

However, there are other options available in the control panel:

· Navigation - switch off/on the Previous and Next buttons,
· Progress - shows the number of steps in your guide,
· Controls - toggles whether the entire control menu appears,
· Close - shows the “x” button to close the popover,
· All - enables/disables all buttons that you have selected; also disables the padding and the entire buttons holder so there is no additional space.

Instead of using the default buttons, you can add custom ones in the Step Options Panel to:

· Launch a Topic
· Jump to a Step
· Deactivate a Topic

To add a custom button:

  1. In the Step Options Panel, click the custom button icon.

  2. Edit the text that you want to appear on the button.

  3. Set the action - choose a location the button points to, e.g. choose another topic, step or deactivate the topic.

Please note that you can also use the new feature to create custom inline buttons. These are buttons that do not span across the entire step (100%) but are rather based on the amount of text.

Read more about custom buttons here.

By default buttons in your popover are blue. You can change their color in the Inline Manual portal.

To change the default color of a button:

  1. Login to the Inline Manual portal with your email and password.

  2. Go to Sites in the upper menu and choose a site you want to edit a topic for.

  3. Go to Settings of the site, click Buttons tab. You will see the option to customize your buttons. Make desirable changes.

  4. Confirm changes with the Save button.

Read more about changing the player appearance here.

You can also change texts visible on your buttons in the Inline Manual portal. This applies only to the default buttons - Next, Prev, End.

To change the default text on the button:

  1. While in Site settings, click the Player languages on the left menu.

  2. Click Add localization.

  3. It will open a section with texts visible in different parts of the Inline Manual player. Scroll down to the Popover section and provide desirable changes, eg. you can change “End” to “Finish” if that suits your application better.

  4. Confirm with the Save button.

Find out more how to change the text globally as a translation.

Change the appearance of the step here.
Use custom CSS to make advanced changes. Here is an overview of the CSS classes available to customize.
Move the Next button to the right using CSS.
Adjust the padding of the popover if you remove the buttons completely.

Was this article helpful?