Chameleon Launchers are a great way to allow users to discover new functionality and unblock themselves at their convenience.

Launchers can be configured to fully match your use case and brand guidelines.

πŸŽ“ For an overview of how Launchers work, please read these articles about Understanding Launchers and Launcher items.

Availability & Usage

πŸ” Startup: 1 Launcher

πŸ” Growth & Enterprise: unlimited Launchers

πŸ“© Contact: to discuss your plan needs

Quick access

To create a new Launcher, go to the Chameleon Dashboard and pick this Experience from the left-side menu. Click "Create a Launcher" from the top-right button to start building it.

create a Launcher from the dashboard, and picking the Help menu type gif

Start with a relevant name. You'll thank yourself later for good organizational habits. πŸ˜‰ Click on "Configure Launcher" and you'll be presented with a list of pre-configured types, which can be used for the most common use cases:

  • Onboarding checklist

  • Updates log

  • Help menu

Once you've selected a type, your Launcher will be created and it will be available on your website, where you can access all the configuration options. Hit "Enter Builder" to go to your website where the fun begins. 😊

πŸ’‘ You'll be able to add a Welcome and an Empty State in the Dashboard, or from the Builder easily.

Next, the Chameleon Builder will pop up to assist you. Add your Launcher items, configure how these should appear to your users, and style its look to achieve a native fit in your interface.

Builder options for a new Help Launcher

In the Builder you can:

  • set your Launcher's position on the screen.

  • customize the Launcher Widget, including its type, color, and size.

  • customize the Launcher canvas (body), adjust the size, its color, and further format the Title and Item descriptions, including user personalization.

  • adjust the Launcher and its components with CSS styling.

  • add a checklist as well as a 'Welcome' and an 'Empty' state, where you can add a personalized message.

  • add a search component that your users can use.

  • define specific URL or element rules that determine where your Launcher will show, and whether a specific element should exist on those pages.

When you're done configuring your Launcher to be a guiding lighthouse in your interface, return to the Dashboard and find all your visual changes saved in the Launcher preview thumbnail.

Next, you'll just have to finish setting it up from the Dashboard. Choose the displaying Environments, pick a target audience, and finally publish your Launcher. πŸŽ‰

Launcher Dashboard cofiguration steps - Select audience, choose environment and publish

πŸ’‘ In the Builder you can also pick an Audience for your Items, that works as a subset of your Launcher's Audience. This way you can have a single Launcher with different items for different Segments (e.g. by restricting the items of a 'Feature Updates' Launcher by rights or access to those features)."

The final step is to Publish your Launcher live on your website! πŸ™Œ In the "Review and publish" step you'll also get any alerts that need your attention before you can confidently hit the Publish button.

πŸ‘‰ If you want to make changes to a live Launcher you can easily do so; just remember to apply them when you're done.

To make your Launcher feel at home in your interface, you can customize a few key components among other options:

  • Widget

    The icon or page element with which the user interacts to open your Launcher.

  • Menu

    The Launcher body, holds a list of items for your users and you can choose to present it as is, or as a checklist.

  • Title

    The introduction to your Launcher's content which appears on top of your Menu of Items.

  • Welcome state

    The initial state of the Launcher when a user sees it for the first time, before showing all the Launcher Items.

  • Empty state

    The state of the Launcher when all Items have been checked as completed by the user.

The Launcher Widget is the icon or interface with which your users will interact to open the Launcher Menu. This is the first indication of the guidance you are offering.

To make sure you remain informative and on-brand, you can configure the following aspects of Launcher Widgets:

  • Widget Type/Trigger: whether a user needs to click or hover over the target to open the Menu - the target can be an element in your interface, an icon, or a custom text label.

  • Widget Icon: show an icon or a custom text that will open the Launcher menu - you can choose a default icon, upload your own, set custom text, or select an existing element on your page that your user needs to interact with.

  • Widget color: with the icons you already have available, you can change their color as well as their background color.

  • Widget Size: you can adjust the size of your widget, by using px or % values.

The Widget's Position is set relative to the position of your Launcher:

  • if you use the on-screen position it will be on the left, respectively right side, below your Launcher;

  • if you anchor your Launcher to an on-page element, you can adjust the Widget's position in relation to the element you select, from the Position panel of the Builder.

🎯 Tip: You can also use our Launchers API to trigger the opening of the Menu without the need for a widget at all.

The Launcher Canvas is the actual Launcher's body which contains your list of items, which can be Tours, Microsurveys, hyperlinks, a search bar, dividers, etc.

To make your Launcher pop just enough, you can adjust:

  • Its Width, with a PX or % grader.

  • Set a Max height for your Launcher window and adjust the Canvas corners. The window height will resize to fit the number of Experiences displayed until the maximum is reached.

  • Change the color of your Launcher's background.

  • Adjust the Font color and size.

You'll work with a few more components in your Launcher's Menu, that will come in handy to your design, and your users' journey. You can add and configure from the Builder:

  • Dividers: add divider lines to break up the different sections of your Launcher. You can customize their color and thickness.

  • A Checklist: turn your Launcher into a checklist and turn each Item into a completable task. You can also show a progress bar here to track item completion.

  • Search: you can decide whether to show the search bar in the Launcher or not. This is great if you have a lot of Tours, as the search will return matches for any content from these (Tour title, Step body text, etc.).

The Title is the introduction to your list of Items and an important component to highlight to your users. You can customize its height, alignment, or style, including adding a hyperlink, as well as adding a personal touch to it.

By default, the Title will be styled the same as your Launcher, but you can adjust the background and text colors to ensure it stands out from the rest of the content.

🎯 Go in and make sure you nail these down to your brand guidelines. Keep in mind that users appreciate contextual, relevant information and are keen on learning on their own.

When you configure a Launcher to be a checklist, you have the option to hide the Launcher entirely after each item has been checked as completed. Just toggle on the 'Hide upon completion' option, in the Checklist panel.

πŸ’‘After the checklist is completed, the Launcher will display an Empty State. Make sure that you have the Empty State disabled. Otherwise, Chameleon will display that once the items are all checked.

With any Launcher Checklist you create, you have the option to show a progress bar that will tell your users how far they have to complete all the items. From the 'Checklist' panel toggle on the Progress bar component to add it to your Launcher menu and widget.

You can choose to show the progress:

  • on top of your Launcher

  • below the Title

  • on the bottom of your Launcher

With the middle position (below the Title) you can also show the percentage to your users, so their path is even clearer. And to make it crystal clear, you can also show the progress in the Launcher's widget.

With this option toggled on, you can also adjust the color of the progress bar in the widget. Otherwise, it picks up the color of the checklist for consistency. πŸ˜‰

When using your Launchers for ongoing communication, you can ensure visibility over any new Items by enabling 'Notifications' from the Builder. This will show a badge in your widget, and your Launcher next to any new Items you add that the user hasn't seen before. And will prompt him to check it out. πŸ˜‰

Once you enable Notifications you can customize the badge and text color. Now, every new Item you add will have this badge on the row next to it and the count of new Items will also be listed in the widget.

πŸ‘‰ The notification badge will not show if you have a 'click or hover element' widget or a custom icon.

β„Ή If you add more than 9 items, the badge will replace the count with a dot, but your users will see all new items marked in the Launcher.

Once a user opens the Launcher, the badge will disappear from the items that he has seen. This takes a couple of seconds - provided that he's not moving too quickly through the list, for items to be readable. If the user needs to scroll to view all items, the notification badge will remain next to those he's yet to see until scrolling and will update the count, if he exits the Launcher.

🀝 The badge size is linked to the widget size, but you can always adjust it with custom CSS. As a best practice, we recommend you don't take too much space from the user.

Share your personality and create a better connection with users, by adding branded visuals to your Launcher. In the design section, find the Media component to add an image or video to your Launcher.

You can position this above or below the Title component, to mark the introduction of your Launcher. If you want to break the content, use dividers. πŸ˜‰

media added to the top of a Launcher

You can add a Welcome state to any Chameleon Launcher, from the "+" button in the Builder's Top Bar. Whenever you want to make any specific configurations to your Launcher, you can move between these states.

Once you add a 'Welcome state', you'll be able to use the Builder to configure:

  • a Welcome message, with a catchy Title

  • add a media component

  • customize the colors and CTA of the button

  • add a shroud to this Launcher state

  • the dismiss options

  • adjust its styling with custom CSS

  • when to show the 'Welcome state'

A few things to note when customizing a 'Welcome state':

  • as an integrated part of your Launcher, the 'Welcome state' will use the same canvas (background) color. So if you want to adjust the color, you'll do it from the Default state panel.

  • because you are displaying a welcome message, and not jumping in to explain something, the media component is relative to the Title - above or below.

  • all components all removable from your 'Welcome state' aside from the body component and the CTA. You can keep it as on point as you want!

  • the Complete CTA button marks the 'Welcome state' as seen and completed by your users, who can then be shown the 'Default state'.

  • as this is the first interaction your users will always have with your Launcher before getting their self-serve guidance, the dismiss option minimizes the 'Welcome state' and will not work as a snooze/exit option.

Under Rules in the Interactions section of the Builder, you can choose to have your Launcher 'Welcome state' show up when:

  • the user clicks the Launcher widget and opens it;

  • the page is loaded the Launcher opens up with the 'Welcome state'.

Use these options to drive discoverability when your users are most prone to see your guidance. With either of these options, once your user clicks the complete button, they will not see your 'Welcome state' again. So craft a compelling welcome message. 😌

πŸ’‘ You can also Preview the specific content and behavior of your Launcher, for each state you have.

With each checklist Launcher, you can determine whether your items should be hidden once completed, or not.

When all items have been completed, you can add an 'Empty state' to let your users know of their diligence and manage learning expectations. Click the "+" button in the Builder's Top Bar to add and configure your 'Empty state'.

For each 'Empty state' you can:

Launcher items can be marked as complete either when they are clicked, or in the case of Experiences, when they have been started or completed. You can also use an Imported event to mark a Tour or Microsurvey as completed. πŸ˜‰

A few things to note when customizing an 'Empty state':

  • as an integrated part of your Launcher, the 'Empty state' will use the same canvas (background) color. So if you want to adjust the color, you'll do it from the Default state panel.

  • because you are displaying a welcome message, and not jumping in to explain something, the media component is relative to the Title - above or below.

Similar to other Chameleon Experiences, you'll also have to ensure your Launcher is showing in the correct areas of your product.

Aside from using the on-page position options, the right way to control where your this is by leveraging:

  • Environments (configure them from the Dashboard): and pick which domains and subdomains your Launcher will show on when building your Launcher. πŸ‘‡

  • Element Rules (under "Display Rules" in the Builder): Here you can require a given element to be present on the page for the Launcher to show.

  • URL Rules (under "Display Rules" in the Builder): further tweak the specific pages where the Launcher should show up on.

Before showing any Experience to your users, we recommend you test it out on yourself or your team, to make sure it will display correctly. And your users will truly get the best out of your efforts. 😊

The easiest way to do this is by using the Builder's Preview mode while building out your Launcher. You can see and interact with your Launcher as your users will, but in some cases, you'll also see a preview of a resulting action - how a completed item in your checklist looks.

This doesn't mean that your users will automatically see random items completed, but it's a quick way for you to see how it looks in your product. πŸ˜‰

🀝 Read this article to learn more about testing your Experiences in Chameleon.

Want to know more?

Did this answer your question?