Walkthroughs in Inline Manual
Walkthroughs in Inline Manual are step-by-step guides or tours that you can create for your users to lead them to explore and learn new features or perform a certain task. Walkthroughs are incredibly powerful tools that you can use for onboarding, training, announcements, or even support. With walkthroughs, you get your users to the a-ha moment faster. Instructions are presented in customizable, small popovers overlaid on the screen allowing users to learn by doing.
In this article, you’ll find out how to create a walkthrough and when to use it.
Before you create a walkthrough
To create walkthroughs in Inline Manual, you need to install the authoring tool in your Chrome browser. If you haven’t done this already, please click here to add the authoring tool as a Chrome extension.
The authoring tool is used for creating all content, but it won’t play until the player is installed on your site. The Inline Manual player is the main application that will display all content that you create such as walkthroughs, tooltips, articles, and the widget. The player (consisting of short JS code) can be set up in several ways depending on your preferences. In most cases, it’s a one-time installation - you don’t need to worry about any changes you make to your guides, they update automatically. Here is the installation tutorial.
You will work with the authoring tool to add and edit the content of your walkthroughs. Each walkthrough consists of steps. You can build a one-step walkthrough, or create an interactive, step-by-step guide. In both cases, the process is the same and consists of 2 parts: building a topic (walkthrough) and adding steps to it.
Now, let’s create a walkthrough in just a few simple steps!
- First, log-in to your Inline Manual portal with your e-mail and password.
- Now, go to your application, the one you want to create a walkthrough for.
- Enable the authoring tool in your browser. Click the Inline Manual icon placed on the right side of the address bar. It will open the authoring tool on the left side of your screen.
If you want to move the authoring tool to the right side of your screen or make it wider, use buttons in the top right corner:
- Now you can start creating the walkthrough. If you’re using the Authoring tool for the first time, click + Create Site and provide the required information. Confirm with the Create site button. If you already have some sites created, simply choose the desired one.
- When you build your first topic (any content created within Inline Manual), you will see a message that there are no topics added to your site. Click + Create new to add the first topic.
When you already have topics added, you can create a new one by clicking + Create in the menu.
- Choose a topic type - Walkthrough and fill-in the required fields.
- Title - the title of your guide. It will be also visible to the end-user in the widget.
- Owner - you can select the owner of the topic if you work with a team. By default it will show your account.
- Visibility in the widget - choose hidden if you don’t want to show the topic immediately to your users. Remember, that in order to show any topic created, the Inline Manual player needs to be implemented.
- Privacy - it’s within Inline Manual portal, privacy settings won't affect your users.
- Language - select a language of this topic.
- Description - enter a description, what is this topic about.
- Click Create topic to confirm adding a walkthrough.
The walkthrough is now added to your site! Let’s continue with adding steps.
- To add a step, click + Create one.
- You will see the Step Options Panel in the authoring tool and the preview of the step - the small popover in the middle of the screen. Start with selecting a step template - choose how you want your step to appear. The default is a simple text bubble.
3. Use the editor to provide a step name, and your content: text, links, tables, images, videos or a slideshow.
- The new popover appears in the middle of the page, not assigned to any element.
If you want to, you can assign it to a specific element in your application such as a button or a form field. Click Assign element and choose to which element of your application you want to pin this step.
If you want to remove the assignment, click the x button next to the Assign element button.
Read more about the assignment of elements here.
- Now, if you assigned the element, select the position of the popover in relation to that element. By default, it is positioned at the top.
Here is an example of how it will look like.
- Choose a trigger you want to use to advance users to the next step. A commonly used trigger is the click trigger (a hand icon). When a user clicks an assigned element, it advances to the next step. If you don’t want to use any trigger, choose x.
Read more about triggers here.
- Continue with adding control buttons to your step such as next, previous or end buttons.
- Previous - this will add a previous button that will go back to the previous step.
- Next - this will add a next button that will forward you to the next step.
- Navigation - when disabled, will hide the next, previous and end button all at once. When enabled, will show the previous and next buttons if the action is available. There will be no previous button if there is no previous step.
- Progress - when enabled, this displays the number of the current step, and the total number of steps. For example 2/6, is the second step of six total steps.
- End - this will add an end button that will finish or deactivate the current walkthrough.
- x - this displays an X close button which users can click to deactivate the current step.
- Ctrls - if enabled, this will hide all the control buttons for that step.
- A - this enables/disables all buttons that you have selected and will also disable the padding and the entire buttons holder so there is no additional space.
You can also add your custom buttons. Read more here.
- If you want to, you can darken the area behind the popover. The cover locks down the click-through tour, so your users won’t get lost or distracted. You can adjust the color, opacity, and padding.
Read more about the backdrop here.
- If you need to redirect users to a specific location when a step is started, use Misc panel. In Path provide the URL you want your users to be redirected to.
Find out more about Misc panel.
- Click the save button to confirm adding a step.
Done! You just created a one-step walkthrough!
If you need to add more steps, follow the instructions above for each of them. For your final step, we recommend to use the end button instead of the next button, so your users can end the tour.
By default, when you add a new walkthrough (or any other topic) it will be listed in the widget placed in the bottom right corner with “Inline Manual” title. You can fully customize it or even hide it completely. Read more about the widget here.
Inline Manual is very flexible when it comes to making it look exactly as you wish. You can fully customize the look of your topics. Feel free to customize it so that it matches your brand’s identity!
Here is the bunch of articles that will help you with that:
Customize the look - the player appearance settings
How to: create custom buttons)
How to: add animation (the Animations panel)
How to: add validation (the Validationpanel)
How to: create custom step templates
Using custom CSS - Popover font, Class names
Walkthroughs are specially designed to get users to follow strict steps to accomplish a certain goal. Use them to guide users through tasks and tutorials. If you want to introduce something new from your website, where it will require strict steps to be followed, this is the topic type that you need. This is also the type of topic to use if you want to create onboarding guides for new users or if you want to introduce updates or changes from your site.
It’s most likely that walkthroughs will be the most popular topic type you’ll be using with Inline Manual.
Let us give you some ideas!
Do you want to create a welcome message for your users when they log-in to the application? That’s a one-step walkthrough. Take a look here for instructions.
Do you want to announce a new feature? That’s a welcome message linking to a step-by-step tour. Read this tutorial to learn how to set it up.
Do you want to create a tutorial your support team can send to your clients in a chat? That’s a multi-step walkthrough possible to lunch with a direct link. Here is more info about it.
Need more ideas? Look to these inspiring examples
Take advantage of the variety of topics Inline Manual offers, and use the tool in other areas such as staff training, or user support. Build tooltips or hotspots to draw users attention to specific elements of your application. Create support articles to provide your audience with in-app help available 24/7. Learn more about the service you provide by asking customers for a feedback
If you want to play your tours to specific groups of users, take a look at our automation feature.
Just starting with user onboarding? Learn more about onboarding concepts and best practices. Get ideas for what you can apply now.