All Collections
Creating Experiences
Understanding Experience positioning
Understanding Experience positioning

Learn how to set where your Experiences appear on your page

Chameleon Team avatar
Written by Chameleon Team
Updated over a week ago

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.

β„Ή Available for Tours, Tooltips, Launchers

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.

Did this answer your question?