Help CenterLaunchers appear in your application as small icons such as tooltips or hotspots. They take up minimal space in a user interface and make it possible for you to quickly grab users' attention. Use them wisely to not overwhelm your users.
With step launchers, you can:
- launch to a particular step in a walkthrough,
- create a popover message and assign it to a specific element of your application.
In this article, we’ll discuss how to create a step launcher and when to use it.
Adding a step launcher
The Launcher panel is available for each step in a walkthrough/tooltip topic.
To open the Launcher panel for a step:
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 can configure the launcher.
- Start with choosing Visibility. By default, the step launcher is Always visible. Choose the visibility option that suits you best.
Available options:
Never - launcher is always hidden. It’s the default option.
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.
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.
Available options:
Tooltip - a small circle suitable for one character. The default display is a small circle with a question mark.
Hotspot - a pulsing icon.
Text - fixed width suitable for one or two short words.
Long text - rectangular text area that resizes to fit more words.
Note that you can also customize the appearance using CSS.
- Choose Position and change the launcher placement in relation to the element it’s 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 the 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 element associated with the launcher.
Self - at the launcher user clicked on.
- 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.
- In the Content section, you can also translate your launcher in topic languages.
Launcher translation is currently in BETA. You need to first enable the BETA player. Read more about the BETA player here.
- Click translate to enable the launcher translation. You'll see the option to provide different content for the different topic language.
When testing different languages in the player preview, you need to switch the language in the Step Options Panel. You must have some content in the step content to make the switch.
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.
- 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! You created a step launcher.
When to use a step launcher
Placing a step launcher gives your users easy access to go back to any step in a walkthrough if they need it. By default, a walkthrough brings users through an entire tutorial until it is completed, unless the user cancels it. With a step launcher, users can jump to 3rd or 4th step and complete a task from that point.
For example, you might have a walkthrough which includes tips about best practices across every part of a process to new users. You can add a launcher to each step, and a small icon will appear at the element assigned to that step, so your users can quickly recall the tip they saw.