Follow this step-by-step guide to design, publish, and monitor your inaugural onboarding tour with Jimo. Learn how to effectively engage users and enhance their experience from the very start.
Last updated
Was this helpful?
Now that you’ve completed your initial setup, it’s time to walk through the lifecycle of creating an experience in Jimo. In this tutorial, we’ll build a simple onboarding tour for new, trialing users. This example demonstrates Jimo’s main workflow: Design → Publish → Monitor.
What You’ll Learn:
Navigating to the relevant experience dashboard.
Starting with a prebuilt template or starting from scratch.
Using the Flow Builder, Content Builder, and other Jimo tools.
Positioning steps in context with the CSS selector.
Preparing your experience for targeting, publishing, and later analytics.
Open the Jimo Dashboard: From your Jimo main menu, choose the type of experience you want to create and access the dashboard from the sidebar. In our case: Tours & Modals.
Create Your First Tour:
If this is your first time, you’ll see an “empty state” prompting you to “Create your first tour.”
Otherwise, click the + New Tour button in the top-right corner.
You can start from a template or from scratch.
Templates: Prebuilt tours for common use cases—just tweak the content and visuals.
From Scratch: Total flexibility to build your tour step-by-step.
For this guide, let’s start from scratch.
Name Your Experience: Give your tour a clear, descriptive name (e.g., “Trial Onboarding Tour”).
Open the Builder:
At this point, you can choose to open the builder in-app (if Jimo is installed on the page or using the extension) or use the standalone builder.
Let’s start in the standalone builder. You can always switch to in-app mode later to refine targeting and positioning.
Click Enter Builder to proceed.
Flow Builder Tab: This is your experience’s structure, where you can add, arrange, and connect steps.
Add Your First Step:
Drag and drop a Modal step from the tool panel. This will serve as the welcome message for new trial users.
Automatically Move to Content Builder: Once you add your modal step, you’ll be taken to the Content Builder to edit its content.
In the Content Builder, you can:
Click on any element in the central preview or use the navigator to select components.
Customize text, images, buttons, and style.
Access top-level settings for step behavior and user interaction.
For our welcome modal:
Add a short title (“Welcome to Our Product!”)
A brief description (“Ready to explore? Let’s show you around.”)
A “Get Started” button to move forward in the tour.
Select an Element: Click on any element within the central preview or use the Navigator to select it from the left sidebar.
Edit Parameters:
Text: Change the text content directly in the editor.
Styling: Adjust fonts, colors, and sizes to match your brand.
Behavior: Set actions like button clicks or step transitions.
Advanced Options: Access generic and behavioral settings at the top of the dropdown in the navigator or by clicking on the entire card.
Quick access to the Flow Builder
Manage Elements: Easily add, remove, or reorder elements within your step.
Access Specific Elements: Quickly jump to any element’s settings through the navigator.
Additional Features:
Triggers/Conditions: Add if/else logic to control step flow.
Theme Management: Apply predefined themes for consistent styling across all steps.
Language Tab: Handle translations to support multiple languages.
Go back to the Flow Builder and add another step, this time a Tooltip.
Add Tooltip Step: Select a Tooltip step and place it in the flow after the Modal.
In-App Positioning: To attach a tooltip to a specific element on your website:
Switch to the in-app builder mode or hit the button target element in-app and choose the URL on which you want to place your tooltip step.
Use the CSS selector to pinpoint the element you want to highlight.
Edit Tooltip Content: Back in the Content Builder, customize the tooltip’s text and appearance. For example, highlight a “Settings” button or a “Start a Project” link to guide users deeper into your app.
Feel free to add more steps, change designs, or adjust the order. Each step can be:
Simple modals that greet users.
Tooltips guiding users to specific features.
Hotspots pinpointing important UI elements.
Etc... (Check experiences components).
-> And interconnect steps to other experiences with CTA actions like Hints, Banners, or Checklists to create more advanced patterns as you grow comfortable.
In-App Builder for Contextual Edits:
At any time, open the in-app builder overlay directly on your site.
Preview exactly how the tour will look and behave for end users.
Test the flow from start to finish.
Ensure everything appears as intended and the triggers work as expected.
When you’re satisfied with your tour design, it’s time to configure how, where, and to whom it will appear.
-> Click the Target & Publish button to access the experience’s targeting and publishing settings.
What to Configure:
Show On (Trigger): Decide when the tour should start. For a simple onboarding, let’s trigger it on page load.
Where (Page Filtering): Limit the experience to a specific URL (e.g., your main dashboard page).
Who (Audience): Use segments (e.g., a “Trial Users” segment) defined by the user attributes you’ve set up to ensure only trialing users see this tour.
When (Timing & Scheduling): Optionally schedule your experience or set an expiration date.
Goal (Optional Aim): Define success criteria, like whether users complete a certain step or interact with a key feature. This helps measure the impact of your onboarding.
Publishing:
Click Publish and select the environment (e.g., staging or production).
Remember, you need Jimo installed (and a valid plan or active trial) to publish experiences.
After going live, visit the Analytics section to:
Track usage and engagement.
Evaluate if your tour helps trial users adopt key features.
Add tags to organize your experiences.
(For surveys) Set up notifications for new responses.
Use these insights to refine your tour and improve user onboarding over time.
