Help CenterWith Inline Manual, you can set up in-context help with launchers. Launchers appear in your application as small icons. They take up minimal space in a user interface and make it possible for you to attract user's attention easily. Use them to launch a pop-over message or a walkthrough. If you want to shed light on known trouble spots in your application, this is the feature for you.
In this article, we will discuss how to create a launcher and when to use it.
New to Inline Manual? Check what you need before you create a launcher
To create launchers 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.
To start with, you need to create a topic. You can add a launcher to a step either in a Walkthrough topic type or a Tooltip topic type, or to a whole topic. To learn how to create a topic and a step, please refer to this article. If you prefer learning with videos, take a look at this product demo.
Now, let’s create a launcher in just a few simple steps! In this article, we’ll create an example step launcher.
Types and styles of Launchers
There are two types of launchers:
- Topic launcher - each walkthrough or article can have its own launcher. When users click a launcher for a walkthrough, it will start from the first step. When users click a launcher for an article, it will open the article in the widget.
- Step Launcher - you can add a launcher to a step of a walkthrough or a tooltip topic. It’s useful when you want to present information in a popover or for example, when you want your users to jump to a specific step in a guide.
There are 4 launcher styles that work right out of the box, without coding. You can, however, customize the look of Launchers with custom CSS. You can also change the default look in your site's Settings.
Styles of launchers:
Tooltip - a static icon with a question mark (default).
When to use a Tooltip?
New users especially like information points like these in the application. A small question mark shows where you provide more information. You can replace the content with single characters such as a small “i” for information. This can save users from having to refer to an FAQ outside your app or seek support.
Hotspot - a pulsing icon.
When to use a Hotspot?
Create a hotspot to draw attention to a new opportunity in your application. Need to highlight a new upgrade to existing users? This will help draw their attention.
Text - a short text.
When to use the Text style launcher?
In some cases, you may want to prompt users with a short phrase. With this style, you can change the text to a single word or two and the launcher has a fixed width.
Long text - a longer text.
When to use the Long text style launcher?
This is similar to the Text style launcher, except this will resize to fit more text. For example, a long text could be useful when users are filling out a form, you might like to put in a few words of information. However, if they click on the launcher, they can get the additional detail.
Configuring a launcher
As mentioned above, with Inline Manual, you can set up a launcher for each step in a walkthrough/tooltip topic, or for the entire walkthrough.
In this article, we’ll create an example step launcher. If you want to learn how to set up a topic launcher, go here.
If you have multiple steps, select the step you want to work on.
Scroll down and expand the Launcher panel.
To add a step launcher:
Click + Add Launcher button.
Now, you configure the launcher.
- Start with choosing Visibility. By default, the step launcher is set to Always. Choose the visibility option that suits you best.
Available options:
Never - launcher is always hidden.
Always - launcher is always displayed on the site.
Active - launcher is displayed once a topic is activated.
Inactive - launcher is displayed while the topic is currently inactive or deactivated.
In our example, we chose Always, as we want our user to see the icon all the time.
If the Step Launcher has been configured for a step (either always, when inactive or active), you'll see a small launcher icon in the step list for that step.
- Now, choose Style to decide how you want your launcher to appear.
We chose a hotspot - a pulsing icon.
Note that you can also customize the appearance using CSS.
- Choose Position and change the launcher placement in relation to the element it is assigned to. By default, the launcher will appear to the Top Right, though depending on your UI it might be best to change this placement.
- If you need to change the assign element, use the Assign button. By default, the launcher will use the element assigned to that step in the Step Options panel.
The authoring tool will choose most specific selector. However, you can also manually edit the CSS selector. Editing the selector could be helpful if you want the launcher to appear on all elements with a specific class.
- Set up Point at. Choose where the popover should be pointing to.
Available options:
Step - at the element associated with the step. This is the default.
Launcher - at the launcher element user clicked on
Self - at the launcher element user clicked on
We chose a Self-option.
- In the Content section you can change the content of the icon, eg. instead of a question mark, you can use a small “i”. It is not available for Hostposts.
With Offset, you can change the position of the Launcher by adding values to the Horizontal and Vertical boxes in pixels.
Launcher Context allows you to display the Launcher only on specific paths or when specific elements are visible. You can also choose to show the launcher only when Topic wasn't seen. Note: Requires people tracking enabled. Applies to the whole Topic.
It's important to optimize your launchers and make sure they only appear where they are needed. If you don't, it will continue checking on every page if it will appear there, and if you had many it could freeze your application. Read more about contexts paths here.
- Set up the Launcher Activation. It allows you to choose an event to Activate and Deactivate the trigger.
- You can also adjust some advanced options.
Available options:
Custom Class - add a custom class to the Launcher. Read how to customize the look of Launchers with CSS.
Title - add a text that will be displayed when the user hovers over the Launcher. This appears as browser title text.
Z-index - web pages with fixed, unmovable objects can use this option to adjust the position of the launcher from back to front and reverse.
Parent - if the launcher is behaving in a way that it is jumping when you scroll, you can tweak it by setting the launcher Parent to "Closest Parent".
Monitor - you can choose whether you want the element to be followed when you scroll.
- If you want to remove the launcher, click the x Remove Launcher button.
Awesome! We created our first launcher.
By placing a launcher, you make it possible for a user to start a walkthrough or open a popover from anywhere on your site. Use it wisely to not overwhelm users.
Customization
The default launcher style is a tooltip - a question mark in a red circle. You can choose another style such as hotspots or texts if that suits your needs better. In the section above we described available styles.
If you want to change the color or border, you can do it in your Site settings in the Inline Manual portal. If you’re a bit more tech-savvy, you can use CSS codes to customize launchers even more. Here is the article to help you with that.
When to use launchers?
Launchers provide on-demand assistance in your app. Place launchers in know trouble spots of your application. You can have these helpful icons always available or only when the topic is active.
Launchers are best for providing in-context help, but also for announcing small changes. The pulsing hotspot will grab users attention in seconds!
However, it is important to not overwhelm users with too many launchers at the same time. Present the content that is relevant to your users' needs.
Don’t forget that you can use the launcher also to start a walkthrough (guide) or trigger opening of an article. It is a good idea to combine it with the guide for onboarding new users or guide about a new feature.
What’s next?
Take advantage of the variety of topics Inline Manual offers, and use the tool in different areas such as staff training, or user support. Build walkthroughs and guide new users. 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.