With Chameleon, you can control the precise spot where an Experience should appear. From top screen to embedded in-line, you can ensure the perfect place for any announcement. This way, you deliver contextual, relevant information to your users that won't annoy, but push them to act. 😉
You change the placement of an Experience from the Position option, in the Design section of the Chameleon Builder.
Availability & Usage
🔐 Available for all plans
📍 For contextual Tours, Tooltips, Embeddables, Microsurveys, Launchers
⚙️ Set from the Builder
What position options do I have?
Depending on the Experience type you create you have a few different options to position your in-app.
Overlay Position
This is the most common and present option in almost all Experience types. With an overlay position, you can pick between:
Relative to screen: the Step is anchored to a fixed position on the screen, regardless of scrolling; you can control where on the screen you want the Step to be positioned. Steps will automatically adjust to the browser and are responsive to changing sizes.
ℹ Available for Tours, Microsurveys, Launchers
For additional control over where your Step is placed, you can adjust the offset by modifying the X and Y axis for the placement -- you can use pixel values (px) or percentages (%).
ℹ When updating values in PX or % from the Builder, you can hold down Shift on your keyboard to increase/decrease the values by tens.
👉 Explore the different CSS values and units.
With Launchers, you have only the bottom-left and bottom-right screen options. As these Experiences are usually placed on the bottom side, this makes it easier for users to discover them.
Relative to element: the Step is anchored to a specific element that's present on the page. Once you select this option, you will be prompted to select the element to which you want your Step to be anchored. Use our point-and-click element selector to pinpoint your desired element; Chameleon then uses CSS Selectors to identify this particular element.
You can further adjust this element with easy-to-use options, by clicking the Adjust Element option.
👉 Understand how to handle element selection in Chameleon
Once you've selected (and possibly, adjusted) an element to attach your Step to, you can also select the position of the Step relative to the element:
In the Auto case, the Step will automatically be placed between the element and the center of the page. This enables the Step to automatically adjust itself in case the element changes its position on the page.
In this case, you cannot further manually adjust the position of the Step. However, if you select one of the other options -- Left, Above, Right, or Below -- you will be able to further adjust the positioning offset by using px or % values.
ℹ In some cases, you might find that the placement isn't possible, so Chameleon will notify you to reset the Step's position so it can display. In the example below, it was selected 'Left of element' but there is no room for the Step, so it's been reset.
As Tooltips are contextual single-Step announcements, you will always be prompted to anchor them to on-page elements when building one, and you do not have the Relative to screen position option.
Cover top/bottom: the Step covers the top or bottom part of the screen (full width), remaining in a fixed position regardless of scrolling.
ℹ Available for Banners (Embeddables)
Push down: the Step is positioned at the top of the page (full width) and pushes the app content down, which will appear below the Step; it remains in a fixed position regardless of scrolling.
ℹ Available for Banners (Embeddables)
Embedded Position
This option is available for Embeddables and Launchers and allows you to pick an element on the page to embed the Experience before or after that element. This helps create a built-in look, as the size adjusts to fit your interface.
ℹ With Launchers, you can embed both the canvas and the Launcher Widget. Learn more about positioning your Launchers
When you select the Embedded position you will be prompted to select an element on the page. Use our point-and-click element selector to pinpoint your desired element; Chameleon will identify it, and you can further adjust it before confirming.
You can pick to show your Experience before, or after the selected element and you can also adjust the margins for an even better fit.
ℹ When creating Cards, you will be prompted to select an element first and position your Cards right from the start.
Troubleshooting element selection
Sometimes your Step may not show because the element is not found on the page. This may be due to the way the element is being identified.
Chameleon uses CSS Selectors to match the element and collects these from the page when the element is clicked. Learn more about selecting the right element in Chameleon.
👉 Have any questions or issues? Find the best way to get help.