Chameleon Launchers are a great way to allow users to learn more about your product, discover new functionality, and unblock themselves at their convenience.
These can function as Onboarding Checklists to help users get started with your product in an interactive way, or as Resource Centers to enable users to learn more anytime they need help or want more inspiration.
Availability & Usage
🔐 Startup: 1 *live Launcher
🔐 Growth & Enterprise: unlimited Launchers
✚ Pairs well with HelpBar & additional Actions
What is a Launcher?
A Launcher is an in-product menu containing multiple Items (help resources, URLs, Tours, scripts, etc.) You can create different Launchers to serve different use cases and to show to specific audiences.
What are Launcher Items?
Items represent the content of your Launcher, such as a link to a helpful resource, a Product Tour, a video explainer, a chat modal, and so on. To ensure these powerful menus have all the resources your users may need, you can add any combination of these types of Items:
Navigation -- Link URLs (that can open in a new tab or navigate to a page inside your app)
Trigger Action -- launching a Chameleon Experience (e.g. Tour) or a connected integration (e.g. a Figma prototype)
Script (JS code) -- run a custom code, for example, simulating multi-element clicks
Structure -- add dividers in your Launcher between Items or sections
Creating your Launcher
Select Launchers from your menu
Look for the "+ Create a Launcher" button (top-right) to start building it
The Dashboard will guide you through each step of the setup process
ℹ You can also create a new Launcher from the Homepage or by opening the Builder on your application (from the Chrome Extension).
You can pick a Template (with pre-defined Items and configurations) to build it faster, or you can start from scratch.
Next, open the Builder on your application to configure your Launcher: add your URL and press "Enter Builder." The Chameleon Builder will pop up to assist you in adding Items, or other useful components (such as the checklist component, or notifications for new Items)
Adding content to your Launcher
👀 Coming Soon: Sections in Launchers
When you create a new Launcher, if you start from scratch, it will be empty. You start by adding Items and Sections. If you start from a Template, you will find Items and/or Sections added in for you and you can click on each one to edit or configure further.
ℹ You can add multiple Sections with different Items in each, as well as stand-alone Items that do not belong to any Section. Each Section in a Launcher can have a different target audience.
ℹ In the Dashboard, you can pick a main target audience for your Launcher. But in the Builder, you can pick different target audiences for each Item or Section you add that works as a subset of your Launcher's Audience.
This way, you can have a single Launcher with different resources for different audiences (e.g. by restricting the items of a 'Feature Updates' Launcher by rights or access to those features).
Click in the Builder to "Add Items" to see the list of the different Item types. Once you pick one, you will see the configuration options for it, such as adding a description, selecting a different target audience, or a completion criteria.
ℹ Clicking on any Item directly in your Launcher will also open up the Builder's configuration panel for that specific item, so you can adjust it.
When you add a Section, you will see similar options to add a description, hide the Section when Items inside are complete, or choose a different target audience. Next, you can add Items to your Section and pick from the usual list.
To organize your Items and Sections inside your Launcher, simply select one and use the up ⬆ and down ⬇ icons to change their position.
In the Builder, you'll find different options to make your Launcher feel at home in your interface.
Positioning your Launcher
Pick where on the page you want your Launcher to appear. You can choose between 2 different 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 choose 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.
Customize the 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 and 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 a Widget.
Customize the Launcher Canvas
The Launcher Canvas is the actual body that contains your list of items -- these can be links, Tours, Microsurveys, 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.
Adjust the Launcher Title
The Launcher Title is the introduction to your list of items. You can customize the font size, add a hyperlink, or personalize it with user data.
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.
Adding media
Use 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 search box
If your Launcher contains many Items, it can be helpful to add a Search component that allows users to find specific Items. Click to add it from the Builder, and you can update the placeholder text that users see. Your users will be able to type into it and filter items.
How are items filtered?
Chameleon looks at the input from the user and will match the results with any of the following:
Item title
Item description
Experience name (e.g. Tour name)
Experience content (e.g. Step content)
Link item URL
ℹ If your Launcher contains many Items and has a max height restriction so that only a few can be shown, the Search component can be very helpful to your users in finding relevant content.
Switching to a Checklist Launcher
You can turn any Launcher into an interactive Checklist that allows users to complete Items one by one. Add the Checklist component, and each Item and Section in your Launcher becomes a task users can tick off the list.
Adjust the Checklist component to fit your style and needs:
change to color
choose to hide Items after users complete them
show a progress bar and pick a position for it in your Launcher
show the percentage
show the Checklist progress in your Launcher Widget
Showing the progress to users
When you add the Checklist component to a Launcher, you can also show a progress bar that shows users their progress and the number of Items they still have to complete. From the Checklist panel, toggle on the Progress bar to add one to your Launcher.
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. The progress bar will pick up the color of your Checklist component, but you can update the color anytime.
ℹ The progress bar will appear in your Widget only with the icon option.
Hiding your Launcher after the Checklist is complete
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.
Each item can be individually configured to be hidden once it is completed, and if all items are hidden, the Launcher will automatically disappear. To configure an item to hide upon completion, simply click on that item in your Launcher, and toggle the Hide when complete option from that item's configuration panel.
ℹ After the checklist is completed, the Launcher will display an Empty State, which you can disable or keep.
Completion Criteria
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 as that Item's Completion Criteria so that the Item's goal will be more accurately represented. You can define an Item's success event from that item's configuration panel under the Completion Criteria option.
Any events you're tracking or sending to Chameleon will be shown here. Review all your tracked events on your Chameleon Dashboard, and supplement what you have via our Integrations, API, or CSV imports.
Showing notifications for new items
You can ensure visibility over any new Items you add to your Launchers, 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 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.
Control where the Launcher displays
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
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.
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 to use 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.
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. 🎉
ℹ 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.