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.
Last updated
Was this helpful?
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.
Last updated
Was this helpful?
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-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.
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.
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.
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.
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.
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.
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 Q or Shift keys. 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.
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.
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.
When defining a Target Element, you have the option to go manual by clicking "Or go manual" instead of using automatic selection. If you need to revert back to automatic selection, simply click "Switch to auto selection".
Using manual selection allows for more precision in choosing elements when automatic detection may be inconsistent or targets multiple elements at once.
Understanding the Manual Fields
The Element Text and CSS Selector fields are independent—they can be used separately or together for more precise targeting.
Element Text: Filters elements on your website that contain this specific text (case-sensitive). Useful if the text is unique or highly distinctive.
CSS Selector: The identifier used in your website's CSS. This is automatically filled when using the auto selector, but you can modify it manually for accuracy.
When to Adjust the CSS Selector Manually
Automatic selection may sometimes detect multiple elements or an inconsistent selector. If the targeted element varies, or multiple unintended elements are selected, you might need to manually refine the selector to ensure accuracy.
To do this:
Inspect the Element in Your Website
Right-click on the element > Inspect (this opens the browser’s DevTools).
Locate the element’s class or ID.
Use the Correct Syntax
Classes start with . → Example: .my_btn_class
IDs start with # → Example: #my_btn_id
Custom attributes use brackets → Example: [jimo-data-id='my_btn']
If necessary, your development team may need to add a unique class or identifier for more accurate selection.
Example: Targeting a "Connect" Button
Imagine your code has multiple buttons, all using the class .btn. You want to target only the ones labeled "Connect":
CSS Selector: .btn
Element Text: Connect
This ensures only buttons labeled "Connect" are selected while avoiding other .btn elements.
Be mindful of translations: If the button text changes based on language, relying on Element Text alone is not recommended. Instead, use a specific CSS selector like .btn_connect or .btn_connect_main_menu.
Recommended: Using Manual Selection in the In-App Builder
We recommend enabling the In-App Builder before manually adjusting selectors. In the In-App Builder, you will immediately see:
If your selector correctly attaches to the desired element.
How many elements match the selector (to prevent over-selection).
This provides instant feedback, ensuring your manual selection is accurate and applied correctly.
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.
If the positioning mode has trouble loading when opened from a standalone builder, try going in-app first.
⇒ This often improves loading performance, as the tab and in-app overlay will already be open and initialized.
