Onboarding Widget

The Onboarding Widget creates interactive step-by-step guided tours for first-time users using intro.js library.

It’s perfect for walking users through new features, explaining your website’s interface, or providing interactive tutorials.

The widget uses session-based tracking to show tours only once, with a version system that lets you reset the tour for all users when you update the steps.

Step 1: Add the Widget

1. Edit your page in Elementor
2. Search for “Onboarding (VT)” in the widgets panel
3. Drag it onto your page (it can go anywhere – it’s invisible on the frontend)

Step 2: Configure Tour Behavior

Content Tab → Tour Behavior:

Auto-start Tour: Toggle to automatically start the tour on page load

• Only shows once per session
• Auto-start Delay: Set delay in seconds (0-5 seconds)

Show Start Button: Display a button users can click to start the tour manually

• Button Text: Customize the button label (e.g., “Take the Tour”)

Step 3: Create Tour Steps

Content Tab → Tour Steps:

1. Click “Add Item” to create a new step
2. For each step, configure:

• Element: CSS selector for the element to highlight (e.g., .post-title, #submit-button, .ts-form-group)
• Title: Step title shown in the tooltip
• Content: Description or instructions for this step
• Position: Where the tooltip appears relative to the element (top, bottom, left, right, auto)

Example Steps:

Step 1:

• Element: .create-post-title
• Title: “Enter Your Title”
• Content: “Start by giving your post a catchy title that describes what you’re offering.”
• Position: bottom

Step 2:

• Element: .post-description
• Title: “Add Description”
• Content: “Tell people more about your post. Be detailed and specific.”
• Position: right

Step 3:

• Element: button[type=”submit”]
• Title: “Publish Your Post”
• Content: “When you’re ready, click here to publish!”
• Position: top

Step 4: Version Management

Content Tab → Tour Version:

Current Tour Version: Shows version number (starts at 1)

Reset Tour button: Click to increment version and show tour to all users again

• Use this when you update tour steps
• Automatically saves the new version

Preview Tour Button: Test your tour in the Elementor editor without affecting user tracking

Step 5: Styling the Tour

The Style tab controls the tour itself, not just the start button:

Section	What it styles
Start Button	The button that launches the tour
Tooltip	The step box — background, text colour, typography, padding, border radius, max width
Tooltip Title	The step heading
Navigation Buttons	Back / Next / Done
Skip Button	The dismiss control
Progress & Bullets	The progress bar and step dots

Because the tour is drawn over the page rather than inside the widget, these styles are written for the tour's own elements. They apply wherever the tour runs on that page.

After updating the plugin, regenerate Elementor's CSS

Elementor caches the CSS it generates for each page. If tour styling looks unchanged after a plugin update, go to Elementor → Tools → Regenerate Files & Data, or simply open the page and re-save it. Your settings are kept — only the cached stylesheet is rebuilt.

Troubleshooting

The tour doesn't start. Auto-start only shows once per visitor per tour version. Use the Preview Tour button in the editor to test repeatedly, or increment the tour version to show it again to everyone.

A step highlights the wrong thing, or nothing. The target selector must match an element on the page. Assign a CSS ID under Advanced → CSS ID on the target widget and reference it as #your-id. A step with an empty selector shows as a centred overlay.

Styling changes don't appear. Regenerate Elementor's CSS as described above. If only some settings apply — for example padding and colours work but fonts don't — you are on a version before 1.7.6.1; update the plugin.

The tooltip text is in the wrong font. Fixed in 1.7.6.1. Update and regenerate CSS.