In Inline Manual, you can easily create your own custom buttons with our WYSIWYG editor. Read more about adding custom buttons here. However, it’s also possible to add custom links/buttons with HTML. You'll be able to add your own links to end the tour, skip to next or any other step. Optionally you can add a class to the link, so it will look like a button.


Opening the code view

To add custom HTML links:


  1. In the Authoring Tool, while you’re adding a step, scroll down to the Step Options Panel. In the WYSIWYG editor, click the source button.


  1. You will see the HTML code of your step.


  1. Paste the link/button code.

Examples:

Go to the next step:


<a onclick="inline_manual_player.goToStep('next')">Go to the next step</a>

Go to step x:


<a onclick="inline_manual_player.goToStep(X)">Go to step X</a>

Replace x with the number of a step. The first step index is 0, therefore if you want to jump to step 6, you will have to enter 5.


End topic:


<a onclick="inline_manual_player.deactivate()">End</a>

Activate another topic X:


<a onclick="inline_manual_player.activateTopic(topic_id)">Launch topic</a>

Replace topic_id with the id of the topic you want to launch. You can find topic ID in the sites detail.


Activate another topic won't work through preview mode in the Authoring tool.

Styling

You can add a class inmplayer-button to each of the links to turn them into buttons. Example:


<a onclick="inline_manual_player.goToStep(X)" class="inmplayer-button">Go to step X</a>

Then, you can address this class and change the color etc. with CSS code. Take a look here for more information.


Related articles