Discover key components for crafting Tours and Modals in Jimo. Enhance tours with Text, Media, and Interaction assets to ensure a comprehensive, informative journey.
Directs user attention by following their mouse pointer with a customizable, animated cursor that highlights key actions or features. The cursor adds a layer of interactivity and ensures users are guided effectively through your product.
⇒ Perfect for creating dynamic, visually engaging tours that require precise focus on elements like buttons, forms, or tooltips.
Targeted Step Type
Requires positioning using Jimo’s CSS selector to attach the tooltip to a specific element on your website.
Tooltip
Guides users by highlighting specific UI elements, ensuring they understand key features or actions.
⇒ Perfect for pointing out new features, guiding users through complex workflows, or highlighting important buttons.
Targeted Step Type
Requires positioning using Jimo’s CSS selector to attach the tooltip to a specific element on your website.
Snippet
Delivers small, informative cards that can be placed in fixed positions across the screen to guide users without being intrusive. It can be placed in corners or center top/bottom without attaching to specific UI elements.
⇒ Ideal for providing tips, quick onboarding steps, or promoting features in non-disruptive ways.
Modal (formerly Pop-in)
Presents larger, more detailed messages or prompts that capture user attention by displaying prominently in the center of the screen. Functions as a standalone step within a tour or as its own modal experience.
⇒ Best for important announcements, onboarding new users, or collecting feedback.
Badge (formerly Hotspots)
Attaches a pin or pulsating icon to specific UI elements, providing contextual information or prompts when users interact with them.
⇒ Useful for drawing attention to new or important features, guiding users through specific actions, or highlighting updates.
Targeted Step Type
Requires positioning using Jimo’s CSS selector to attach the badge to a specific element on your website.
Customizing Your Steps
To create engaging and effective Tours and Modals, you can add various elements to each step. These elements allow you to tailor the content and behavior to meet your specific objectives.
Add Elements
Available Elements
Text Elements
Heading:
Craft compelling titles and headers to grab attention and set the context.
Paragraph:
Convey detailed information with descriptive text to guide users through the experience.
Label:
Use labels to annotate images, videos, and other interactive elements for clarity.
Media Assets
Image/Video:
Enhance your component with illustrative images or explanatory videos.
(5MB size limit)
Profile:
Personalize the experience by including profile pictures or avatars, which are particularly effective in social proof or testimonial components.
Interactions
Primary Button (CTA):
Encourage users to take action with a prominently styled button.
Secondary Button (CTA):
Offer an alternative action with a less dominant button style.
Stepper:
Include a stepper for multi-step processes, guiding users through a sequence of actions or content.
Cross:
Allows users to dismiss or snooze the experience by clicking a closing cross in the corner.
Elements Parameters
After selecting your experience structure, it's time to infuse it with content that resonates with your users. Each element you add to a step comes with specific options and parameters to customize its behavior and appearance.
Main Step
When you click on the top of the navigator arborescence, you access the Main Step Parameters.
These parameters are organized into different sections within the parameter sidebar, allowing comprehensive customization from top to bottom.
Type
Change the style of your step (e.g., from Tooltip to Modal). Switching the step type does not remove or alter any parameters; unused or disappearing parameters remain intact, allowing you to revert to a previous type without losing your configurations.
Step Type: Select the desired step style from the dropdown menu
Options: Tooltip, Snippet, Modal, Badge
General
Contains parameters specific to the selected step type, enabling functionality tailored to the step's purpose. The General section varies based on the step type, providing unique customization options where necessary.
Modal
Position: Modals have a unique, fixed placement and do not require additional positioning parameters.
Snippet
Position: Defines the fixed position where the Snippet appears on the screen.
Position: Access all positioning options to define where the Tooltip or Badge appears relative to the target UI element.
Options:
CSS Selector: Define the target element using a CSS selector or select manually.
Relative Placement: Choose from auto-placement, fixed options, or custom offsets.
Z-Index: Set the z-index value to control layering.
Target Highlight (Tooltips Only): Add or remove a pointer and borders around the target element.
Skip if Target Element Not Found: Determines whether the step should be skipped if the specified target element is not found on the page.
Options:
Yes: If the target element is not found, the step is skipped.
No: The step will still display even if the target element is missing.
Behavior
Define how the step behaves in response to user interactions, ensuring the step responds appropriately to user actions.
To Show (Only for Badge): Determines how the card associated with the Badge is displayed alongside the icon.
Options:
On Click: The card appears when the user clicks the Badge icon.
On Hover: The card appears when the user hovers over the Badge icon.
Always Open: The card is always visible alongside the Badge icon.
To Dismiss: Specifies how users can close the experience. Closing is logged as dismissed in the stats, not as completed.
Options:
Can't Be Dismissed: Users cannot close the step manually.
Click the Cross: Users can close the step by clicking the closing cross icon.
Click Outside: Users can close the step by clicking anywhere outside the step component.
Both: Users can close the step by either clicking the cross or clicking outside the step component.
To Progress (Only for Tooltip): Defines how the tour progresses to the next step from the current Tooltip.
Options:
Default Progression: Progresses based on CTA (Call to Action) buttons and predefined triggers.
Targeted Element Click: Progresses to the next step when the user clicks the element targeted/highlighted by the Tooltip.
Triggers: Provides quick access to the triggers & conditions sidebar panel, allowing you to add if/else logic between steps.
Options:
Add Trigger: Opens the triggers panel to define conditional logic based on user actions or events.
Step Style
Adjust the dimensions and spacing of the step to ensure proper layout and visual harmony within your user interface.
Width: Set the width of the step component.
Options:
Auto: Automatically adjusts based on content.
Custom: Specify a pixel size using the slider or enter the value directly.
Height: Set the height of the step component.
Options:
Auto: Automatically adjusts based on content.
Custom: Specify a pixel size using the slider or enter the value directly.
Padding: Add vertical or horizontal padding in pixels between the side of the step card and the elements within (paragraph, image, etc.).
Options:
Vertical Padding: Specify the padding in pixels.
Horizontal Padding: Specify the padding in pixels.
Gap: Add a gap in pixels between elements within the card.
Options:
Gap Size: Specify the gap size using the slider or enter the value directly.
Style
Customize the overall visual appearance of the step card to align with your brand and enhance user engagement.
Shadow:(Optional) Add a shadow effect around the step card to create depth.
Shadow Color: Select the color of the shadow (remove it using the cross).
X Offset (px): Define the horizontal displacement of the shadow.
Y Offset (px): Define the vertical displacement of the shadow.
Blur (percentage): Adjust the blur intensity of the shadow.
Radius: Set the roundness of the step card's corners.
Options:
Percentage: Choose a value between 0% (sharp corners) and 50% (fully rounded corners).
Background: Define the main color of the step card's background.
Color Mode:
Single Color: Select a plain background color.
Gradient Mode:
Color 1: Choose the first color of the gradient.
Color 2: Choose the second color of the gradient.
Gradient Type:
Classic Fixed Gradient: A static gradient transition.
Animated Gradient: A dynamic gradient transition with movement.
Border:(Optional) Add a border around the step card to define its boundaries.
Options:
Border Color: Select the color of the border (remove it using the cross).
Overlay:(Optional) Apply an overlay to gray out the rest of the screen, highlighting the step card.
Options:
Overlay Color: Choose the color and opacity of the overlay to ensure the step card stands out (remove it using the cross).
Animation
Manage visual effects applied to the step. Define how steps animate when they appear or disappear, enhancing the user experience through smooth and engaging transitions.
Elements: Enable or disable animation for each element within the card.
Options:
Yes: Apply animation to each element.
No: Do not apply animation to individual elements.
In: How the step appears on the screen.
None: No animation.
Fade: Fade into view.
Slide from Up: Slide in from the top.
Slide from Down: Slide in from the bottom.
Slide from Left: Slide in from the left.
Slide from Right: Slide in from the right.
Out: How the step disappears from the screen.
None: No animation.
Fade: Fade out of view.
Slide to Up: Slide out to the top.
Slide to Down: Slide out to the bottom.
Slide to Left: Slide out to the left.
Slide to Right: Slide out to the right.
Special Elements
This section encompasses parameters specific to certain experience types, providing additional customization options to enhance user interactions.
Target Element Parameters
Located at the top of the navigator, this section provides access to all positioning options, mirroring those found in the General section of the Main Step Parameters.
Target Element
Configure how the step is attached to a specific UI element.
Position: Access all positioning options to define where the Tooltip or Badge appears relative to the target UI element.
Options:
CSS Selector: Define the target element using a CSS selector or select manually.
Relative Placement: Choose from auto-placement, fixed options, or custom offsets.
Z-Index: Set the z-index value to control layering.
Target Highlight (Tooltips Only): Add or remove a pointer and borders around the target element.
Hotspot parameters
Exclusive to the Badge step type, the Hotspot section allows you to customize the badge pin icon to draw user attention effectively.
Behavior
Defines how the badge behaves when interacted with by the user.
On Click: Defines the behavior when the user clicks the badge pin to expand the badge content.
Options:
Hide: The badge content hides after being clicked.
Persist: The badge content remains visible once clicked.
Style
Customize the visual aspects of the badge pin to align with your brand and design preferences.
Shape: Determines the visual appearance of the badge pin.
Options:
Plain Dot: A simple circular pin.
Question Mark: A pin featuring a question mark icon.
Info Icon: A pin featuring an information icon.
Animation:(Only available for the Plain Dot shape) Adds a pulsating effect to make the pin more eye-catching.
Options:
Pulse: The pin gently pulsates to attract attention.
No: The pin remains static without any animation.
Position: Provides quick access to positioning options to define where the Tooltip or Badge appears relative to the target UI element, same as those found in the main step parameters.
Options:
CSS Selector: Define the target element using a CSS selector or select manually.
Relative Placement: Choose from auto-placement, fixed options, or custom offsets.
Z-Index: Set the z-index value to control layering.
Target Highlight (Tooltips Only): Add or remove a pointer and borders around the target element.
Hotspot Size: Sets the diagonal size of the badge pin in pixels.
Options:
Slider: Adjust the size using a slider control.
Direct Input: Enter the desired pixel value manually.
Color: Defines the color of the badge pin icon.
Options:
Color: Select a color from the palette.
Cursor
Exclusive to the Cursor step type, the Cursor section allows you to customize the pointer's appearance and behavior, ensuring it effectively draws user attention to specific areas or actions in your interface. Use these options to stylize the cursor and enhance its visual clarity.
Style
Customize the visual appearance of the cursor element, including its background and border.
Background: Defines the main fill color of the cursor.
Options:
Color picker: Choose a color using the palette.
Hex input: Enter a specific hex code.
Border: Adds an optional outline around the cursor.
Options:
Color picker: Choose a color using the palette.
Hex input: Enter a specific hex code.
The Cursor step type restricts the generic elements that can be added to:
Text Elements: Only Paragraph is allowed.
Media Assets: Only Image/Video and Profile are allowed.
Interactions: Only the Cross is available.
This limitation ensures that the focus remains on the cursor’s ability to guide the user while maintaining a clean and intuitive design.
Generic Elements
This section groups parameters specific to common element types used within your Tours and Modals. Each element has its own customization options to enhance functionality and visual appeal.
Cross
Provides users with a way to dismiss or snooze the experience.
Behavior
Defines how the cross behaves when interacted with by the user.
Actions: Defines what happens when the cross is clicked.
Options:
Dismiss: Closes the experience and logs it as dismissed in the statistics.
Snooze: Temporarily hides the experience (only available on the first step).
Style
Customizes the visual appearance of the cross.
Font Size: Sets the size of the cross icon in pixels.
Options:
Enter a value directly or use a slider to adjust.
Radius: Adjusts the roundness of the cross box corners.
Options:
Percentage value to define edge roundness from sharp to fully rounded.
Color: Defines the color of the cross icon.
Options:
Select a color using the color picker or enter a hex code.
Background: Adds and selects the color of the cross background box.
Options:
Choose a background color or remove it by clicking the cross icon.
Profile
Display an employee profile with a name, title, and image to personify your message.
Content
Manages the textual and visual information displayed in the profile.
Name:
Specifies the name displayed in the profile text block.
Options:
Enter the desired name text.
Title:(Optional)
Defines the role or title in the profile text block.
Options:
Enter the title text or leave it blank.
Image:
Uploads a profile image or links via URL.
Options:
Upload: Select an image file (maximum 5MB).
URL: Enter the direct link to the image.
Style
Customizes the visual aspects of the profile.
Font Family:
Choose the font for the name and title texts.
Options:
Select from available font families.
Font Size:
Sets the font size for the name and title in pixels.
Options:
Enter a value directly or use a slider.
Color:
Defines the text color for the name and title.
Options:
Select a color using the color picker or enter a hex code.
Image/Video
Integrates media content such as images or videos within the step.
Content
Handles the addition and configuration of media elements.
Media:
Adds an image or video to the step.
Options:
Image:
Upload: Select an image file (maximum 5MB).
URL: Enter the direct link to the image.
Sizing Style:
Fill: Crop the image to fill the container.
Fit: Add padding borders to fit the image without cropping.
Video:
URL: Enter a Vimeo or YouTube link.
Allowed Zoom: Enable or disable zoom functionality for videos.
Zoom on Click:
Enables or disables the option to open the image in full size upon clicking.
Options:
Enable: Users can click to view the image in full size.
Disable: Image remains at its set size without zoom functionality.
Style
Defines the layout and appearance of the media content.
Type:
Chooses the overall layout style for the media.
Options:
Vertical Integration: Aligns the image vertically within the step.
Horizontal Integration: Aligns the image horizontally within the step.
Position:
Defines the placement of the media based on the selected type.
Options:
Vertical:
Top: Positions the image at the top of the step.
Bottom: Positions the image at the bottom of the step.
Horizontal:
Left: Positions the image to the left side of the step.
Right: Positions the image to the right side of the step.
Height/Width:
Sets the size of the media.
Options:
Vertical:
Height: Choose between Auto or specify a custom pixel size.
Horizontal:
Width: Choose between Auto or specify a custom pixel size using a slider or direct input.
Padding:
Adds padding around the media content.
Options:
Horizontal Padding: Specify padding in pixels.
Vertical Padding: Specify padding in pixels.
Radius:
Adjusts the roundness of the media corners.
Options:
Enter a percentage or pixel value to define corner roundness.
Label
Adds a text label to annotate elements within the step.
Content
Manages the text displayed on the label.
Text:
Defines the text displayed in the label.
Options:
Enter the desired label text.
Layout
Configures the styling and positioning of the label.
Font Family:
Choose the font for the label text.
Options:
Select from available font families.
Font Size:
Sets the font size for the label text in pixels.
Options:
Enter a value directly or use a slider.
Font Weight:
Adjusts the boldness level of the label text.
Options:
Choose from options such as normal, bold, bolder, lighter, etc.
Text Color:
Defines the color of the label text.
Options:
Select a color using the color picker or enter a hex code.
Background:(Optional)
Sets the background color of the label.
Options:
Choose a color using the color picker or remove it by clicking the cross icon.
Border:(Optional)
Adds a border around the label.
Options:
Select the border color using the color picker or remove it by clicking the cross icon.
Padding:
Adds padding inside the label between the text and its borders.
Options:
Horizontal Padding: Specify padding in pixels.
Vertical Padding: Specify padding in pixels.
Radius:
Adjusts the roundness of the label corners.
Options:
Enter a percentage or pixel value to define corner roundness.
Position:
Determines the placement of the label within the step.
Options:
Right: Aligns the label to the right side.
Centered: Centers the label horizontally.
Left: Aligns the label to the left side.
Heading
Adds a prominent title to the step for emphasis and context.
Content
Manages the title text and its advanced styling options.
Title Text:
Edits the title text with advanced styling options.
Options:
Text Editor Features:
Bold: Make text bold.
Italic: Italicize text.
Underlining: Underline text.
Insert Hyperlinks: Add clickable links.
Emoji Finder: Insert emojis.
Text Variables: Insert dynamic user data (e.g., user’s name) that auto-updates based on the viewer.
Style
Customizes the visual appearance of the heading.
Color:
Defines the color of the title text.
Options:
Select a color using the color picker or enter a hex code.
Font Family:
Chooses the font for the title text.
Options:
Select from available font families.
Font Size:
Sets the font size for the title text in pixels.
Options:
Enter a value directly or use a slider.
Font Weight:
Adjusts the boldness level of the title text.
Options:
Choose from options such as normal, bold, bolder, lighter, etc.
Align:
Determines the alignment of the title within the step.
Options:
Right: Aligns the title to the right.
Centered: Centers the title.
Left: Aligns the title to the left.
Paragraph
Adds descriptive body text to provide detailed information within the step.
Content
Manages the paragraph text with advanced formatting options.
Text:
Edits the paragraph text with advanced formatting options.
Options:
Text Editor Features:
Bold: Make text bold.
Italic: Italicize text.
Underlining: Underline text.
Insert Hyperlinks: Add clickable links.
Emoji Finder: Insert emojis.
Bullet Points: Create lists with bullet points.
Multiple Paragraphs: Add new paragraphs with line breaks.
Style
Customizes the visual appearance of the paragraph.
Color:
Defines the color of the paragraph text.
Options:
Select a color using the color picker or enter a hex code.
Font Family:
Chooses the font for the paragraph text.
Options:
Select from available font families.
Font Size:
Sets the font size for the paragraph text in pixels.
Options:
Enter a value directly or use a slider.
Font Weight:
Adjusts the boldness level of the paragraph text.
Options:
Choose from options such as normal, bold, bolder, lighter, etc.
Align:
Determines the alignment of the paragraph within the step.
Options:
Right: Aligns the paragraph to the right.
Centered: Centers the paragraph.
Left: Aligns the paragraph to the left.
Stepper
Displays the progress of the user through multiple steps.
Layout
Defines the layout and style of the stepper.
Type:
Chooses the overall style of the stepper to indicate progress.
Options:
Dotted Line: Shows exact step progress with dots.
Bar: Displays a full bar that progressively fills based on the percentage of steps completed.
Text: Indicates progress with text (e.g., "1 of X").
Position:
Determines where the stepper is placed within the step.
Options:
Top: Positions the stepper at the top of the step.
Bottom: Positions the stepper at the bottom of the step.
Align:
Sets the horizontal alignment of the stepper.
Options:
Right: Aligns the stepper to the right.
Center: Centers the stepper.
Left: Aligns the stepper to the left.
Style
Customizes the visual aspects of the stepper.
Step:
Defines the color of the stepper's background, text, or inactive steps.
Options:
Select the desired color for each element of the stepper.
Step Active:(Only for Bar or Step Types)
Sets the color of the current step or the progress fill.
Options:
Choose a color that highlights the active step or the filled portion of the progress bar.
Primary CTA
Encourages users to take a primary action within the step.
