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