Launchers 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 topic launcher you can:


  • launch a whole walkthrough for your users,
  • launch an article added to the widget.

In this article, we’ll discuss how to create a topic launcher and when to use it.


Adding a topic launcher

The Launcher panel is available for each walkthrough, tooltip and article topic.


To open the Launcher panel for a topic:


  1. Click Launcher in the top menu of the Authoring tool while you're editing a walkthrough, a tooltip or an article.


  1. Click add launcher.


  1. Now you can see the Launcher panel for a topic.


Configuring the launcher

Now you can configure your launcher.


  1. Start with choosing Visibility. By default, the 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.


  1. 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.


  1. 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.


  1. 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.


  1. 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.


  1. 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.


  1. 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.


  1. 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.



  1. With Offset, you can change the position of the Launcher by adding values to the Horizontal and Vertical boxes in pixels.


  2. 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.


  1. Set up the Launcher Activation. It allows you to choose an event to Activate and Deactivate the trigger.


  1. 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.



  1. If you want to remove the launcher, click the x Remove Launcher button.


When to use a topic launcher

Placing a topic launcher gives your users an easy option to start a walkthrough or open a support article. You can add a topic launcher where users might need help to complete a task they don't often do, so they can quickly see a guide. Another idea is to use topic launchers when announcing new features to grab users' attention.


Tip: When you create a walkthrough, remember to explain what the guide will be about, and give the option to click "Next" or "End" in case they users want to opt out of the tour.


To learn about other ways for launching your topics, take a look here. And if you want to automatically launch guides for users, take a look here and here.


Related articles