Discover key components for crafting Hints in Jimo. Design impactful, non-sequential tips to provide in-context guidance, highlight features, and create interactive entry points for other experiences.
All hints requires positioning using Jimo’s CSS selector to attach the tooltip to a specific element on your website.
Normal Icon
A standard icon that signals the presence of additional information or a tip. These hints are non-intrusive and provide simple guidance when needed.
⇒ Perfect for quick tips or contextual help without overwhelming the UI.
Label
A text-based tooltip that offers clear and concise instructions directly within the interface.
⇒ Ideal for labeling UI components or providing detailed explanations for specific features.
Target Element
Highlights an existing element on the page to draw the user’s attention or provide contextual information same as tooltips in tours.
⇒ Best for introducing new features, guiding user actions, or explaining key interface elements.
Button
A hint type with actionable CTAs, allowing users to trigger actions directly without a pop-up. This hint contains a single customizable button without any content attached, serves only as a trigger.
⇒ Great for immediate self-serve guiding actions like starting a tour, navigating to a URL, or launching any other experience directly from a button embedded in context.
Customizing Your Steps
To create engaging and effective Hints, 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.
(Size limit - Essential plan 1MB / Else 3MB)
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.
Cross:
Allows users to dismiss or snooze the experience by clicking a closing cross in the corner.
Elements Parameters
After structuring your hints, fine-tune the appearance and behavior of each element. Every component comes with customizable options to ensure your hints are effective and visually aligned.
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.
Behavior
Defines how the hint card appears and disappears based on user interaction.
To Show: Specifies how the hint becomes visible to the user.
Options:
On Click: The hint card is displayed when the user clicks on the trigger.
On Hover: The hint card appears when the user hovers over the trigger.
On Target Hover: The hint card is displayed when the user hovers over the associated target element.
To Dismiss: Configures how the hint card can be closed by the user.
Options:
Click the Cross: The hint is dismissed by clicking the cross icon.
Click Outside: The hint is closed when the user clicks anywhere outside the card.
Click Cross or Outside: Allows dismissal by either clicking the cross or outside the card.
Can't Be Dismissed: The hint cannot be closed by the user manually.
Hover Outside: The hint is dismissed when the user hovers outside its bounds.
Layout
Adjust the dimensions and spacing of the hint 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.
Tooltip positioning
Configure where the tooltip displays relative to the targeted element.
Tooltip Position: Select the alignment of the tooltip around the element.
Options:
Preset Positions: Choose from predefined positions like top-left, bottom-right, etc.
Gap: Adjust the distance between the tooltip and the targeted element.
Options:
Slider: Move to set the gap in pixels.
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).
Special Elements
In Hints, each type of hint includes unique customization options that allow you to tailor its behavior and style. These elements, located at the top of the navigator, are specific to the selected hint type and focus on its individual functionality and positioning.
Target Element Parameters
Located at the top of the navigator, this section is specific to hints tied to existing UI elements on your page. These settings focus solely on the card itself, as no icon or label accompanies this hint type.
General
This section allows you to define how the hint card aligns with the targeted UI element, ensuring precise placement and interaction.
Position: Select and configure the targeted element using positioning options.
Options:
CSS Selector: Manually define or use auto-selection to identify the target.
Relative Placement: Choose between auto-placement, fixed positioning, or custom offsets.
Z-Index: Adjust the layer positioning to control visibility.
Type: Change the hint type for flexibility in design and functionality.
Options:
Icon
Label
Button
Target Element
Pointer: Toggle the pointer's visibility on the card to visually connect it to the targeted element.
Options:
Show: Displays a pointer that connects the card to the element.
Hide: Removes the pointer for a cleaner appearance.
Style
Customize the visual elements of the pointer to align with your brand and interface design.
Pointer Color: Choose the color of the pointer to match your card and UI style.
Options:
Color Picker: Select a color from the palette or input a hex code.
Hint Parameters (Normal Icon)
Normal Icon hints are fully customizable from this section at the top of the navigator. This section focuses on independent positioning for the icon itself, allowing you to tailor its appearance and functionality without any attached card.
General
This section allows you to define the placement and type of the hint and customize its interaction with the targeted UI element.
Pick a new element: Use the selector tool to highlight and select an element on the page.
Manual Input: Enter the CSS selector manually for advanced configurations.
Alignment: Define how the icon aligns relative to the target element.
Offset X/Y: Adjust the horizontal and vertical offset from the target element using sliders or numeric inputs.
Z-Index: Set layering priority (Auto or custom value).
Type: Change the hint type for flexibility in design and functionality.
Options:
Icon
Label
Button
Target Element
Pointer: Enable or disable a pointer from the card to the target element.
Options:
Show: Displays a connecting pointer.
Hide: Removes the pointer.
Style
Customize the appearance of the icon and pointer to align with your UI design.
Pointer Color: Choose the color of the pointer using a color picker.
Options:
Enter hex codes or select from a palette.
Built-In: Choose from a predefined library of icons (e.g., help, verified, group, etc.).
Custom: Upload an SVG or PNG for custom designs.
Icon Color: Define the color of the icon using a color picker.
Options:
Enter hex codes or select from a palette.
Pulsating: Enable or disable the pulsating animation for the icon to grab user attention.
Options:
Yes: Activates the pulsating animation.
No: Displays a static icon.
Size: Adjust the size of the icon using a slider or direct pixel input.
Options:
Set the size in pixels (default: 20px).
Label Parameters
The Label Parameters section, located at the top of the navigator, is dedicated to text-based hints. This section provides options for adjusting the label's size, placement, and design independently of the hint card, ensuring clarity and coherence.
General
This section allows you to define the placement and type of the step and customize its interaction with the targeted UI element.
Pick a new element: Use the selector tool to highlight and select an element on the page.
Manual Input: Enter the CSS selector manually for advanced configurations.
Alignment: Define how the icon aligns relative to the target element.
Offset X/Y: Adjust the horizontal and vertical offset from the target element using sliders or numeric inputs.
Z-Index: Set layering priority (Auto or custom value).
Type: Change the step type for flexibility in design and functionality.
Options:
Icon
Label
Button
Target Element
Pointer: Enable or disable a pointer from the card to the target element.
Options:
Show: Displays a connecting pointer.
Hide: Removes the pointer.
Style
Customize the appearance of the label and pointer for better alignment with your UI design.
Pointer Color: Set the color of the pointer using a color picker.
Options:
Color Picker: Select a color from the palette or enter a hex code.
Text: Edit the text content displayed in the label.
Options:
Editable Text Field: Enter or update the label text.
Font Family: Choose the font for the label text.
Options:
Dropdown: Select from available fonts.
Search Bar: Locate a custom or uploaded font.
Font Size: Adjust the size of the label text.
Options:
Slider: Set the font size in pixels (default: 16px).
Font Weight: Adjust the boldness level of the label text.
Options:
Dropdown: Choose between light, medium, bold, or custom weights.
Padding: Define the spacing between the label text and its borders.
Options:
Vertical Padding: Enter a pixel value for top and bottom spacing.
Horizontal Padding: Enter a pixel value for left and right spacing.
Radius: Adjust the roundness of the label’s corners.
Options:
Slider: Set the corner radius in pixels.
Text Color: Set the color of the label text.
Options:
Color Picker: Select a color from the palette or enter a hex code.
Background: Define the background color of the label.
Options:
Color Picker: Choose a plain background color or remove it.
Border: Add a border around the label.
Options:
Color Picker: Select the border color from the palette or remove it.
Effects
This section enables you to add visual effects to the label, enhancing its visibility and making it more engaging.
Type: Select the type of effect applied to the label.
Options:
None: No effect is applied.
Glow: A soft glowing outline radiates around the label.
Shimmer: A moving highlight sweeps across the label periodically.
Moving Border: An animated border that creates a flowing effect around the label.
Color: Define the color for the glow, shimmer, or moving border effect.
Options:
Color Picker: Select a color from the palette or enter a hex code.
Speed: Adjust the animation speed for the shimmer, glow, or moving border effect.
Options:
Slider: Set the animation speed as a percentage (default: 50%).
Button Parameters
This section, located at the top of the navigator, handles all aspects of Button hints. Since Button hints do not include a card, this section consolidates all style and behavior options for the button itself.
General
This section allows you to define the placement and type of the step and customize its interaction with the targeted UI element.
Pick a new element: Use the selector tool to highlight and select an element on the page.
Manual Input: Enter the CSS selector manually for advanced configurations.
Alignment: Define how the icon aligns relative to the target element.
Offset X/Y: Adjust the horizontal and vertical offset from the target element using sliders or numeric inputs.
Z-Index: Set layering priority (Auto or custom value).
Type: Change the step type for flexibility in design and functionality.
Options:
Icon
Label
Button
Target Element
Behavior
Defines how the button behaves when interacted with by the user.
Navigate to: Redirect the user to a specific page URL.
Run JavaScript code: Execute custom JavaScript functionality.
Style
Manages the appearance and visual settings of the button.
Text: Customize the button text.
Options:
Text Field: Enter the button label directly.
Font Family: Choose the font style for the button text.
Options:
Dropdown: Select a font from the available options.
Font Size: Set the text size of the button label in pixels.
Options:
Slider: Adjust the size dynamically.
Direct Input: Enter a numeric value (e.g., 20px).
Font Weight: Adjust the boldness or thickness of the button text.
Options:
Dropdown: Select options such as normal, medium, bold, etc.
Padding: Adjust the space inside the button around the text.
Options:
Vertical & Horizontal: Set values for top/bottom and left/right padding.
Radius: Control the roundness of the button corners.
Options:
Slider: Adjust from sharp (0px) to fully rounded corners.
Text Color: Customize the color of the button text.
Options:
Color Picker: Choose a color from the palette.
Hex Input: Enter a specific hex code.
Background: Define the background color of the button.
Options:
Color Picker: Choose a solid color.
Hex Input: Enter a specific hex code.
Border: Add a border to the button for emphasis.
Options:
Color Picker: Select a color for the border.
Effects
This section enables you to add visual effects to the button, enhancing its visibility and making it more engaging.
Type: Select the type of effect applied to the label.
Options:
None: No effect is applied.
Glow: A soft glowing outline radiates around the label.
Shimmer: A moving highlight sweeps across the label periodically.
Moving Border: An animated border that creates a flowing effect around the label.
Color: Define the color for the glow, shimmer, or moving border effect.
Options:
Color Picker: Select a color from the palette or enter a hex code.
Speed: Adjust the animation speed for the shimmer, glow, or moving border effect.
Options:
Slider: Set the animation speed as a percentage (default: 50%).
Generic Elements
This section groups parameters specific to common element types used within your Hints. 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.
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.
Primary CTA
Encourages users to take a primary action within the step.
Actions: Defines the actions triggered when the CTA is clicked.
Options:
Redirect: Redirects the user to a specified URL.
Trigger Experience: Initiates another experience.
Combine Actions: Allows multiple actions to be executed upon click.
Size
Adjusts the width style of the Secondary CTA button.
Width:
Chooses the background style of the Secondary CTA.
Options:
Fit: Adjusts the CTA width to fit the text content.
Fill: Extends the CTA to fill the entire available width.
Layout
Customizes the content and styling of the Secondary CTA button.
Edits the text content of the Secondary CTA button.
Options:
Enter and style the desired button text.
Font Family:
Chooses the font for the Secondary CTA text.
Options:
Select from available font families.
Font Size:
Sets the font size for the Secondary CTA text in pixels.
Options:
Enter a value directly or use a slider.
Font Weight:
Adjusts the boldness level of the Secondary CTA text.
Options:
Choose from options such as normal, bold, bolder, lighter, etc.
Padding:
Adds padding inside the Secondary CTA button between the text and the button borders.
Options:
Vertical Padding: Specify padding in pixels.
Horizontal Padding: Specify padding in pixels.
Radius:
Sets the roundness of the Secondary CTA button corners.
Options:
Enter a percentage or pixel value to define corner roundness.
Text Color:
Defines the color of the Secondary CTA text.
Options:
Select a color using the color picker or enter a hex code.
Background:(Optional)
Sets the background color of the Secondary CTA button.
Options:
Choose a color using the color picker or remove it by clicking the cross icon.
Border:(Optional)
Adds a border around the Secondary CTA button.
Options:
Select the border color using the color picker or remove it by clicking the cross icon.
Position:
Aligns the Secondary CTA button within the step.
Options:
Left: Aligns the CTA to the left.
Centered: Centers the CTA.
Right: Aligns the CTA to the right.
Position: Access all positioning options to define where the icon appears relative to the target UI element using a CSS selector or manual input.
Options:
Icon: Select the built-in icon or upload a custom one.
Options:
Position: Access all positioning options to define where the label appears relative to the target UI element using a CSS selector or manual input.
Options:
Position: Access all positioning options to define where the button appears relative to the target UI element using a CSS selector or manual input.
Options:
