With Chameleon, you can control the precise spot in your product where an Experience should appear. 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 panel of the Chameleon Builder.
📺 Watch the video below to understand how positioning works in Chameleon.
Note: This video does not show our latest product styling and features. We will update all our product videos to reflect this soon. 😊
Relative to screen: the Step is anchored to a fixed position on the screen, regardless of scrolling
Relative to element: the Step is anchored to a specific element on the page
💡 Since Tooltips are subtle 1-Step Tours, you will always be prompted to anchor them to on-page elements.
When selecting the Relative to screen anchoring, the Experience Step will be anchored to the screen. You can still control where in the screen you want the step component to be positioned; you have the following options:
For additional control over where your step is placed, you can adjust the offset by modifying the X and Y axis for the step placement -- you can use pixel values (px) or percentages (%).
👉 Explore the different CSS values and units.
With Launchers, you will get the bottom-left and bottom-right options here, as these Experiences are intuitively used by users as such, and we want to make it easier for both you and your users. 😊
Note: Steps that are anchored relative to the screen will automatically adjust to the browser and are responsive to changing sizes.
This option lets you anchor your Step to an 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. You can 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 will enable 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.
Note: 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.
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.
👉 Have any questions or issues? Find the best way to get help.