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
✚ Pairs well with HelpBar & additional Actions
📩 Contact: to discuss your plan needs
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.
You can start from scratch, or pick from a Template on your account. You'll find the most common use cases covered:
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 can add a Welcome and an Empty State in the Dashboard, or from the Builder.
Next, the Chameleon Builder will pop up to assist you. Add your Launcher items, configure how these should appear to your users, and add in any useful components, like notifications or a progress bar to create a better user experience.
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.
When you're done configuring your Launcher to be a guiding lighthouse in your interface, return to the Dashboard and find all your changes saved. Choose the displaying Environments, pick a target audience, and finally publish your Launcher. 🎉
💡 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)."
👉 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 component with which your users interact to open the Launcher Menu. This is the first indication of the guidance you are offering in your Launcher.
You can choose to launch it from:
an icon -- choose from Chameleon's icons or upload your own
a custom text -- state exactly what users should see in your Launcher
an element -- pick an element from your app that will open your Launcher
And specify if the user has to click or hover over your Widget for your Launcher to show.
ℹ With the icon & text options, you can also tweak the colors to ensure perfect visibility over your Widget. Or adjust the icon's size to fit your interface.
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.
If you anchor your Widget to an element on your page, you can choose to place it:
anchored to the element
or inline
With the inline option, you can show your Widget before or after the element you select. This way, you can turn it into a contextual button inside your app that launches further guidance. This option adds another element to your page, but will always respect your set styling and structure when adding it.
💡 You can leverage inline positioning to deliver natively-looking guidance, by positioning custom icons in menus, or other sections of your app.
ℹ Inline positioning currently does not work with fixed elements or elements inside iFrames.
👉 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, integrations modals, hyperlinks, or Scrips.
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 notification badge will only show for items that have been added after the user was already identified for the first time.
🤝 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. 😉
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.
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:
adjust the content, including its Title, and personalizing with merge tags
add a media component
adjust its styling with custom CSS
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.