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, check out these articles on Understanding Launchers and Launcher items.
Availability & Usage
🔐 Startup: 1 *live Launcher
🔐 Growth & Enterprise: unlimited Launchers
✚ Pairs well with HelpBar & additional Actions
Building a Launcher
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 also create a new Launcher from the Homepage or by opening the Builder on your application (from the Chrome Extension).
You can start from scratch, or pick from a Template to keep a branded style. You'll find the most common use cases covered in our Gallery:
Onboarding checklist
Updates log
Help menu
Open the Builder on your application to configure your Launcher by adding your URL and pressing "Enter Builder". The Chameleon Builder will pop up to assist you. Next, you can add your Launcher items, configure how these should appear to your users, and add other useful components, like notifications for new items, or a progress bar.
ℹ Add new items from the Builder panel, and set an item's title, description, or other settings by clicking into it in your 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.
tweak the Launcher with CSS styling.
turn it into a checklist, and add a 'Welcome' and an 'Empty' state with a personalized message.
add a search component so users can find items in your Launcher faster.
define specific URL or element Rules that determine where your Launcher will show, and if a specific element should exist on the page.
How can I configure my Launcher?
In the Builder, you'll find different options to make your Launcher feel at home in your interface and provide help to users. Here are a few key components that you can configure, among other settings:
Show the Launcher at the bottom of the page or embed it anywhere on the page.
The icon or page element with which the user interacts to open your Launcher.
The Launcher body holds a list of items for your users and you can choose to present it as is, or as a checklist.
The introduction to your Launcher's content which appears on top of your Menu of Items.
The initial state of the Launcher when a user sees it for the first time, before showing all the Launcher Items.
The state of the Launcher when all Items have been checked as completed by the user.
Read on below to explore the different configurations for each of these as well as other options like notifications, or hiding items after being completed by users.
Launcher position
Pick where on the page you want your Launcher to appear. You can choose between 2 different position options, to signal your resources to users without interrupting them:
Overlay -- set a bottom right/left screen position or anchor your Launcher Widget to an element on the page (including inline)
Embedded -- embed your Launcher Canvas (menu) inline, before/after an element on the page
ℹ With the Embedded option, your Launcher Widget will be disabled and you'll only embed the Launcher Canvas.
Overlay position
The Widget's Position is set relative to the position of your Launcher:
if you use the on-screen position the Widget will be on the left, respectively right side, below your Launcher;
if you position your Launcher anchored to an on-page element, you can pick between the "anchored" and the "inline" options.
with the "anchored" option you can position your Widget around the selected element and pick the menu (Canvas) position.
with the "inline" option you can position your Widget before or after the element you select and you can update the menu (Canvas) position.
ℹ The "inline" option adds another element to your page, but will always respect your set styling and structure when adding it. Inline positioning currently does not work with fixed elements or elements inside iFrames.
💡 You can leverage inline positioning to deliver natively-looking guidance, by positioning custom icons in menus, or other sections of your app.
Embedded position
With the Embedded position you can select an element on the page and position your entire Launcher inline, before, or after the selected element. You can also adjust the margins to ensure a deeply native placement.
ℹ With this option, if your Canvas is set to 100% width, the Launcher will take the full width of the container where it's embedded. If you prefer a narrower, fixed width, you can specify the width in pixels, and the Launcher will appear centered.
ℹ Note that with this placement, the Interactions section from the 'Welcome State' is disabled in the Builder and you can't set Rules and Dismiss for this State.
Launcher Widget
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 have users open your Launcher 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.
👉 You can also use our Launchers API to trigger the opening of the Launcher menu without the need for a Widget at all.
Launcher Canvas & Menu
The Launcher Canvas is the actual body that contains your list of items -- these can be links, Tours, Microsurveys, integrations modals, scripts, or other interactive resources.
To make your Launcher pop just enough, you can adjust:
its width and max-height -- the height will resize to fit the number of items displayed until the maximum is reached
the border color, width, and corners
the background color of your Launcher.
the font color and size.
You'll work with a few more components in your Launcher Menu, that will come in handy to your design, and your users' journey. Add and configure them from the Builder:
Dividers -- add divider lines to break up the different sections of your Launcher. You can customize their color and thickness.
Checklist -- turn your Launcher into a checklist and each Item into a completable task. You can also show a progress bar to track item completion.
Search -- help users find items in your Launcher with a quick search. 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.).
Launcher Title
The Title is the introduction to your list of items. You can customize the background color and font size, as well as add a hyperlink or personalize it with user properties.
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 your content.
Hiding your Launcher after the checklist is complete
When you add the Checklist component, you can hide all the items in your Launcher after each one has been checked as completed. Just toggle on the 'Hide upon completion' option, in the Checklist panel.
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. 😉
ℹ After the checklist is completed, the Launcher will display an Empty State, but you can disable the Empty State.
Showing the progress to users
When you add the Checklist component to a Launcher, you can also show a progress bar that will show users how much progress they've made and how many items they still have to complete. From the Checklist panel toggle on the Progress bar to add one to your Launcher menu.
You can choose to show the progress bar:
at the top of your Launcher
below the title
at the bottom of your Launcher
With the middle position (below the Title) you can also show the percentage to your users for clearer expectations. Note that the progress bar will appear in your Widget only with the icon option.
ℹ The progress bar will pick up the color of your Checklist component, but you can update its color.
Showing notifications for new items
When using your Launchers for ongoing guidance, you can ensure visibility over any new items, such as new feature Tours or help guides. You can enable 'Notifications' from the Interactions section in the Builder.
This will show a badge in your Launcher and Widget next to any new items that the user hasn't seen before. Once you enable Notifications you can customize the badge and text color.
Every new item you add will have this badge on the row next to it and the count of new items will be listed in your Widget.
ℹ The notification badge will not show in the WIdget with the 'click or hover element' options 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 has already been identified for the first time. Learn more about how Chameleon identifies users.
🤝 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.
Adding media
In the Design section, find the Media component to add an image, GIF, or video to your Launcher. You can position your visual above or below the Title component, to engage users before introducing them to your resources.
Adding a Welcome state
You can add a Welcome state to any Chameleon Launcher, from the Builder TopBar, or from your Dashboard. This acts as an introduction to your Launcher, to help you set better expectations as users discover it.
👉 Use the Builder Topbar to move between your States and make updates, or changes to them.
Once you add a 'Welcome State', you'll be able to use the Builder to:
add a welcome message, with a catchy title
add a media component
customize the CTA button
add a shroud to this Launcher State
add a dismiss option
adjust its styling with custom CSS
set when to show the 'Welcome state'
A few things to note when customizing your 'Welcome state':
as an integrated part of your Launcher the 'Welcome state' will share the canvas (background) color. So if you want to adjust the color, you'll do it from the Default State panel.
the media component is relative to the title - above or below.
all components are 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' with all your items.
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. 😌
Adding an Empty State
When all items have been completed in your Launcher, you can add an 'Empty state' to let your users know what resources they can access next or what steps to take in their journey. You can add an 'Empty State' from the Builder TopBar, or from your Dashboard.
For each 'Empty state' you can:
adjust the content, including its Title, and personalizing with user properties
add a media component
adjust its styling with custom CSS
A few things to note when customizing an 'Empty state':
the 'Empty state' will use the same canvas (background) color. So if you want to adjust the color, do it from the Default state panel.
the media component is relative to the Title component and can be positioned above or below.
Control where a Launcher should display
Similar to other Chameleon Experiences, you can easily ensure your Launcher is showing on the correct pages. There are a few ways you can achieve this by leveraging:
Environments (configure them from the Dashboard) -- pick which domains and subdomains your Launcher should show on
Element Rules (under "Display Rules" in the Builder) -- require a given element to be present on the page for the Launcher to show
URL Rules (under "Display Rules" in the Builder) -- set page URLs that are needed for the Launcher to display
Publishing your Launcher
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 so users get to see the latest version.
Testing your Launchers
Before showing any Experience to your users, we recommend you test it out on yourself to make sure it will display correctly. This way your users can 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.
👉 If you're on the Startup Plan, you can have only one live Launcher. But you can create other Launchers to test or adjust your self-serve guidance and unpublish the one you'd like to update or replace.