The Builder is the editor that loads as an overlay on top of your product. You use it to design and configure the in-app components of your Experiences (Steps) — how they look, where they appear, and what triggers them.
ℹ The Builder requires the Chameleon Chrome Extension. You do not need the Chameleon snippet installed to access the Builder. You can use the Sandbox to build and preview Experiences before installation.
How do I open the Builder?
There are two ways to open the Builder:
From the Dashboard: Pick an Experience type from the left-side menu, create a new Experience, enter your domain, and click "Enter Builder." The Builder loads on your product.
From the Chrome Extension: Open the extension while on your product, and click "Open the Builder", and the Builder opens directly on the current page.
👉 Try the Sandbox: When the domain modal opens in the Dashboard, choose "Open in Sandbox" instead of your product domain. The Sandbox lets you build and preview without installing the snippet.
Experiences started in the Sandbox are saved to your Dashboard and can be edited on your live product at any time. Note that Positioning and Display Rules are disabled in the Sandbox; you'll configure those when you open the Experience in your product.
What can I configure in the Builder?
Builder configuration is grouped into three sections, accessible in the panel:
Section | What you configure |
Design | Step positioning and background, text formatting, Custom CSS, layout, and other visual settings |
Interactions | Buttons, dismiss options, CTA actions (open URL, launch another Experience, open a scheduling modal, etc.) |
Display Rules | Element rules (attach to a specific UI element), URL rules (show on specific pages), and on-page triggers (click, hover, delay) |
ℹ Configuration options are consistent across all Experience types, with some exceptions. Progress bars, for example, are available for Tours but not Tooltips.
In addition to the usual configurations, the Builder offers a few general options to manage your Steps: Preview, Duplicate, Templatize, and Delete.
How do I use the Builder Topbar?
The Topbar runs across the top of the screen and is your main navigation and control bar while building. From left to right, here are the options you'll find in the Topbar:
Topbar item | What it does |
Back to Dashboard | Returns you to the Dashboard without losing your work. |
Jump to | Opens HelpBar and takes you to a different Experience or page. |
Navigate mode | Lets you browse your product normally without activating the Builder, so you can reach the page where you want to anchor your Experience. |
Edit mode | The default state — Builder is active, and you're customizing your Steps. |
Preview mode | Shows how the Experience will appear to users without publishing it. Best for checking layout and styling. |
Experience name + Steps (States) | Shows the current Experience and all its Steps. Click "+" to add a Step; click any Step to configure it. With Launchers, you can add/navigate between different States. |
Theme | Shows the current Theme and lets you change styles. If the Experience has a detached style, you can create a new Theme. |
Display Rules notifications | Confirmation messages and error messages for Display Rules (e.g, if an Element Rule references an element that isn't found on the current page). |
Help | Links to the Chameleon Help page - ask Copilot to help if you need it. |
Exit | Closes the Builder without losing your work. |
You can also hide the TopBar to keep the screen clear, in case it covers elements you want to select on the page. Let us know if you want this feature enabled on your account
What do you handle in the Builder vs. the Dashboard?
The Builder handles the visual and positional configuration; the Dashboard handles everything else. The Builder is also helpful to do a quick test before publishing - check the position and trigger in your Experience.
Note that in some cases, you'll not see exactly how that Experience will appear to users. With Launcher Checklists, for example, "Preview mode" will also show how checked (completed) items look, which can also disappear once completed.
ℹ When updating values in PX or % from the Builder, you can hold down Shift on your keyboard to increase/decrease the values by tens.
Once you've finished configuring your Steps in the Builder, return to the Dashboard to set targeting, Goals, Environments, and publish.
👉 For a full breakdown, see What is the Chameleon Dashboard and how is it organized?