TM Intro , User Onboarding Tour Addon , Elementor

TM Intro is a specialized Elementor addon designed to create interactive, step-by-step User Onboarding Tours and feature introductions directly on your website. Instead of letting new users guess how your interface works, this plugin allows you to guide them through specific elements using "tooltips" and "hotspots."

It is a powerful tool for SaaS platforms, complex membership sites, or any website with a unique layout that requires a bit of explanation.

## Key Features

Step-by-Step Guidance: Sequence multiple "Intro Steps" that take a user from one part of the page to another in a logical flow.

Element Targeting: Easily attach a tour step to any Elementor widget, column, or section using CSS IDs or Classes.

Interactive Tooltips: Add titles, descriptions, and "Next/Previous" buttons to the pop-up boxes that guide the user.

Autoplay & Progress Bars: You can set the tour to start automatically when a new user lands on the page and show them how many steps are left.

Backdrop Effect: Dims the rest of the screen while highlighting the specific element you are explaining, reducing distractions.

Cookies & Persistence: Ensure the tour only shows up once per user (or every time until they complete it).

## Use Cases

SaaS Dashboards: Show users how to create their first project or find their settings.

E-commerce: Guide customers through a custom product configurator or a complex checkout process.

New Feature Launches: Highlight a newly added button or service to existing users when they log in.

Instructional Sites: Walk students through how to navigate a learning management system (LMS).

## How to Set It Up

Assign IDs: In the Elementor editor, go to the Advanced tab of the widget you want to highlight and give it a unique CSS ID (e.g., step-one).

Add the Intro Widget: Drag the TM Intro widget onto your page (usually at the bottom or top, as it’s invisible).

Define Steps: Inside the widget settings, add a new item. Link it to your ID (#step-one), and write your tooltip content.

Styling: Customize the colors of the "Next" buttons and the tooltip background to match your brand.

Trigger: Choose whether the tour starts on "Page Load" or when the user clicks a "Help" button.