Components
Discover key components for crafting Tours and Modals in Jimo. Enhance tours with Text, Media, and Interaction assets to ensure a comprehensive, informative journey.
Quick access
Components for Building Tours & Modals
Components for Building Tours & Modals
Hotspot
Hotspots are interactive markers that draw attention to specific elements on the page.
-> Great for highlighting new features or navigation elements.
To be able to publish tooltips or hotspots, you'll need to select something on your page to target through the general options of the component or click on the pop-up. It can be done manually or by using the embedded CSS selector.
Tooltip
Tooltips provide concise information in a small pop-up adjacent to the element.
-> Ideal for offering explanations or tips about UI components.
Once you've targeted an element you can add a pointer to your tooltip and customize it.
Pop-in
Pop-ins are small windows that appear within the app’s interface, offering more detailed information without taking up the full screen.
-> Use pop-ins to engage users with announcements or feature highlights.
Snippet
Snippets are blocks of text or media that can be inserted into your experience, often used to convey messages or instructions.
-> Snippets can provide step-by-step guidance or additional context within a tour or modal.
Transition and Flow
Adding Multiple Steps You can add multiple steps to each component, allowing for a layered approach within your modal.
Creating a Tour
Transform a modal into a tour by adding a series of components, including hotspots, tooltips, pop-ins, or snippets.
Navigation step
A transitional component that moves the user through different app screens or states, is crucial for the flow of multi-pages tours. Use navigation steps to move users from one point to another, ensuring a coherent journey throughout the app.
Hard Redirect takes the user directly to a URL when they progress to the next step. If you want them to navigate on their own, try Free Redirect.
Reorganizing Components & Steps
Jimo allows you to reorganize the order of components and steps at any time, giving you the flexibility to adapt and refine the experience based on user feedback or changes in your app.
With these components and the ability to add and rearrange steps, you have the creative freedom to build comprehensive, engaging, and educational experiences for your users.
Customizing your Segments
After selecting your experience structure, it's time to infuse it with content that resonates with your users.
You can start your component from scratch, Jimo provides a diverse set of building blocks across three categories—Text, Media Assets, and Interactions—that you can manually select to tailor each component of your experience.
There are now also presets which are some preselected templates to quickly structure your steps. These presets provide a quick and efficient way to assemble the steps of your experience with a consistent and professional layout. You can also apply a preset that's a copy of your previous step.
Component's building blocks
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, 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.
CTAs
CTAs (Call to Actions) are interactive elements that prompt users to take specific actions within your tour or modal. They can be primary or secondary buttons, each serving different navigational purposes.
Primary Button (CTA): Encourages users to take action with a prominently styled button.
By Default: Navigate to the next step.
Secondary Button (CTA): Offers an alternative action with a less dominant button style.
By Default: Navigate to the previous step.
Navigation Options
Navigation options define how users move through steps in your tour or modal.
Available Options:
To Next Step: Moves to the next step in the sequence.
By Default for Primary CTAs.
To Previous Step: Moves to the previous step in the sequence.
By Default for Secondary CTAs.
None: No navigation action.
Use when no step transition is needed.
Dismiss: Ends the current experience.
Ideal for concluding or postponing the tour or modal with a "Later" button.
CTA Actions
CTAs can trigger advanced actions (similar to what's found in triggers), providing more control and flexibility in directing user interactions or your experience flow.
Available Actions:
Launch Experience: Starts another Jimo experience.
Options:
Select Experience: Choose from a list of available experiences.
Useful for chaining experiences together.
You can only choose from live experiences!
There's a "No automatic trigger" option especially made for publishing experiences without any audience so they can only be launched via Actions.
Open Post: Opens a specific changelog post.
Options:
Select Post: Choose from a list of available posts.
Ideal for directing users to release notes or updates.
Navigate to: Sends the user to a specific page URL.
Options:
Absolute Path: Specifies the complete URL.
Relative Path: Specifies a URL relative to the current page.
Open in Same Tab or New Tab: Choose whether to open the link in the same tab or a new tab.
Provides flexible navigation options within the experience. Open an external link on another page or change the current page before the next step.
Run JavaScript Code: Executes custom JavaScript code.
Options:
Code Field: Enter the JavaScript code to be executed.
Ideal for advanced custom actions and integrations.
Customization
To then customize the attributes of each added block use the navigator or just click on the element directly in the preview. It will open the setup options on the side. Click anywhere else on the component to display the general options.
Last updated
