Positioning
Customize how interactive elements appear on your site with Jimo's positioning parameters. Choose from pop-ins, snippets, hotspots, and tooltips to optimize visibility and interaction.
Quick Access
Position parameters in the builder
Each element or step type within your tour has specific positioning options designed to maximize visibility and relevance.
Understanding how to manipulate these settings allows for a tailored experience that aligns perfectly with your web applicationâs layout and design principles. These parameters allow creators to anchor steps directly to specific elements on a webpage, enhancing user engagement without disrupting the workflow.
Pop-in
Pop-ins are central modal windows that automatically center themselves on the user's screen. They do not require positioning parameters because they are designed to capture attention effectively without reference to a specific page element.
Snippet
Snippets are versatile and can be positioned in various parts of the screen, depending on the context required.
A (Type Selector): This icon enables you to toggle through different types of display settings for the selected step. In this context, it's set to the snippet type, which is a more embedded and contextual form of display within the user interface.
B (Position Options): This box provides a set of predefined positions where the snippet can appear relative to the targeted element. Options like "Always show from top-left" ensure that the snippet consistently appears in a specific part of the user interface, which is crucial for maintaining a uniform user experience across different screen sizes and device orientations.
Hints, Hotspots and Tooltips
Both Hotspots and Tooltips need to be anchored to specific elements on the page. They guide users by providing information right where it's needed.
A (Type Indicator): This symbol denotes that the current step is a "Hotspot". Hotspots are interactive guides that draw attention to specific elements on the interface, often used to highlight features or navigate the user through the web application.
B (Select an Element): This icon initiates the element selection process within the application where the Hotspot is to be applied. Clicking this allows you to choose a specific element on your web page to attach the Hotspot. Once clicked, the builder transitions into a selection mode, highlighting elements on the webpage as you hover over them.
C (Skip if Target Element Not Found): This toggle provides a critical fallback mechanism. If set to "Yes", the Hotspot step will be skipped if the targeted element is not present or visible at the time the tour is executed. This is particularly useful for ensuring that the user experience remains fluid and error-free, especially in dynamic environments where elements might be conditional or change based on user interactions.
In-app Positioning Settings
After selecting an element to target, Jimo offers several options to fine-tune how this element is presented in relation to the selected target on your page.
A (Target Icon): This icon, when clicked, allows you to reselect or adjust the element targeted by the Tooltip. This is particularly useful when you need to fine-tune the exact element or if the initial selection was not perfect. You can also manually edit the CSS selector for precise control over which element the Tooltip should attach to.
B (Positioning Options): This dropdown lets you choose between fixed and custom positioning for the Tooltip relative to the targeted element.
Fixed: Automatically positions the Tooltip based on predefined positions (like top-left, top-right, bottom-left, etc.) relative to the element, ensuring it is consistently placed regardless of screen size or layout changes.
Custom: Allows for manual adjustment using pixel offsets in the x and y directions, giving you complete control over the Tooltip's exact location on the screen.
C (Position Selector): Available when "Fixed" positioning is selected, this control lets you choose a specific position relative to the element. It ensures that the Tooltip is displayed in a consistent location that does not overlap or obscure the content.
D (Z-Index): Determines the stacking order of the Tooltip relative to other page elements. Set to "Auto" by default, which ensures the Tooltip appears above most other elements. This setting can be manually adjusted if needed, to handle complex layouts where multiple layers or elements might interact visually.
How to select an element in Jimo
When you create a Jimo's experience, you have the option to incorporate Hotspots & Tooltips. These interactive features are specifically designed to offer additional information within the flow of the content, without being disruptive. They serve the purpose of contextualizing and drawing attention to a particular element on the page.
Moreover, the functionality allows you to choose elements from your platform's interface and anchor the tooltips & hotspots to them. You have the flexibility to create a singular Tooltip/Hotspot or a series of them as part of a comprehensive product tour, guiding users through various features and functionalities.
CSS Selector
Once a new step has been added that requires an element to be selected, you'll notice that a highlighted rectangle follows the cursor around the screen, Jimoâs builder is picking up every CSS element that you might want to attach the step to.
A (Understanding the Selector Notification):
Selector Mode Notification:
Upon activating the CSS Selector, a notification pop-up appears at the top of the screen. This serves as a reminder that you are in selector mode, indicating that the tool is currently active.
The notification includes crucial instructions on how to interact with your page while in this mode. It informs you that you can freely navigate around your application by holding down the
QorShiftkeys. This functionality is essential for accessing elements that may otherwise be obscured or for scrolling through content without accidentally selecting an element.
Minimizing the Notification:
If the notification obstructs your view or covers an element you wish to select, you can easily collapse it by clicking the arrow on the right side of the notification bar. This action minimizes the notification, giving you a clear view of your applicationâs interface.
B (Selecting Target Elements):
Element Highlighting:
As you move your cursor across different elements of your application, the CSS Selector automatically highlights the potential target with a blue border. This visual cue helps identify which element is currently under selection focus.
The highlighted border surrounds the element that your cursor hovers over, clearly delineating the boundaries of the target.
Confirming Your Selection:
To finalize the selection of an element, simply click on it while it is highlighted. Upon clicking, Jimo captures the CSS path of the element, which is then used to anchor your interactive step directly to the specified location.
After selecting, the CSS path or identifier of that element will appear in a designated field within the builder, confirming your selection and allowing further customization if necessary.
Positioning In-App
After selecting an element within Jimo's Builder, a series of settings allows for detailed control over how UI patterns are displayed relative to the targeted elements. Additionally, we generate a CSS selector specifically for that element, making it easier for you to reference and modify it as needed.
A (Access and Adjust Target Identifier):
Re-access Selector/Manual Edit:
If you need to reselect the target or adjust the automatically generated CSS selector manually, you can do so by clicking the target icon. This allows for precise targeting, particularly useful in complex UIs where elements might be dynamically generated or nested deeply.
B (Positioning Type Selection):
Auto, Fixed, and Custom Options:
Auto: Select this to let Jimo automatically calculate the most suitable position for the tooltip or hotspot based on the element's location and viewport dimensions.
Fixed: This setting anchors the UI pattern directly around or relative to the element, ignoring scrolling and resizing behaviors.
Custom: Offers the highest level of customization, enabling exact placement through specific coordinates or offsets, ideal for unique layout requirements.
C + D (Visual Style Customization):
C (Target Border):
Customize the appearance of the border that highlights the targeted element. This feature is useful for drawing attention to the specific areas of interaction within the application.
D (Pointer Settings):
Adjust the pointer's presence and color, which helps in guiding users' attention directly to the highlighted feature or information, enhancing the instructional clarity of tooltips.
E (Layering Control with Z-Index):
Z-Index Adjustment:
Control the stacking order of the UI element with respect to other page components. The 'Auto' option typically suffices, but manual adjustments can be made for complex layouts where multiple elements overlap.
Since this process is unique for every web app, it is useful to know how to make manual adjustments just in case you need to.
To better manage positioning in the experience builder, use the "Interact with your app" button in the top right corner.
This allows you to switch between the builder and browsing the website to target elements that need user interactions to be displayed.
Manual element detection
It is crucial to ensure that the selected element is accurately detected to avoid a situation where an experience fails to trigger. To achieve this, you have the option to manually modify the CSS selector and specify the element to which the step is attached. This feature empowers you to modify the CSS selectors for the tagged element and customize the detection process according to your needs.
What is a CSS selector?
Elements on a web page are represented as boxes and can be identified using HTML and CSS. Jimo uses CSS Selectors to identify the selected element, which are used to target specific HTML content in your web app. CSS selectors offer a wide range of options for precise element selection and styling, including id, class, type, attribute, and more.
To find the HTML content and its associated CSS selectors for a specific element, simply right-click on the element and select "Inspect". If you need more information, it is advisable to consult with your developers.
When should I manually adjust the CSS selectors?
We recommend manually adjusting the CSS selectors only if your experience step does not appear as expected. Some examples of these cases could be when:
The element couldn't be properly detected on the page which happens in very few cases
The unique element couldn't be found due to the presence of too many similar elements on the page
Pro tip: If your selected element might not appear and you want to continue your experience, consider enabling the option "Skip if target element not found" option.
Last updated
