Onboarding Widget Manager Documentation

Create and manage guided onboarding tours for your website with an intuitive dashboard and lightweight embeddable widget.

Live Application

Access our live dashboard and widget at:

https://onboarding-widget-app.vercel.app/

Dashboard • Widget Script • Documentation

Simple Integration

Add with just one script tag, no dependencies required.

Customizable

Full control over styling, positioning, and behavior.

Interactive

Engage users with interactive tooltips and highlights.

Accessible

Full keyboard navigation and screen reader support.

Dashboard

User authentication, tour management, analytics, and embed code generation.

Embeddable Widget

Lightweight (11KB gzipped), multi-step tours, customizable themes, analytics tracking.

Analytics

Real-time tracking, completion rates, skip metrics, and performance insights.

Quick Start Guide

For Tour Creators

1

Create a Tour

Sign up and log into the dashboard to create a new tour with at least 5 steps.

2

Define Steps

Specify target elements using CSS selectors and customize content for each step.

3

Customize Theme

Choose from 4 theme colors (blue, green, red, greyscale) and configure positioning.

4

Copy Embed Code

Copy the generated embed code snippet from your dashboard.

5

Add to Your Site

Paste the script tag into your website's HTML or integrate using Next.js Script component.

For End Users

1. Visit Website

Users visit a website with the embedded tour script.

2. Guided Tour

See a guided tour highlighting key interface elements.

3. Navigate Steps

Use Next/Back buttons to navigate through steps.

4. Skip or Complete

Skip the tour anytime or complete it.

Embedding the Widget

Add the embed code to your website's HTML. Replace YOUR_TOUR_ID with your actual tour ID:

<script 
  src="https://onboarding-widget-app.vercel.app/ota-widget.js" 
  data-tour-id="YOUR_TOUR_ID"
></script>

Next.js Integration

For Next.js projects, use the built-in Script component for optimal performance:

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://onboarding-widget-app.vercel.app/ota-widget.js"
          strategy="lazyOnInteractive"
          data-tour-id="YOUR_TOUR_ID"
        />
      </body>
    </html>
  );
}

Manual Initialization (Optional)

For advanced use cases, you can initialize the tour manually:

window.OnboardingTour.init({
  id: 'my-tour',
  name: 'Welcome Tour',
  theme: 'blue',
  steps: [
    {
      id: 'step_1',
      order: 1,
      target_element: '#my-button',
      title: 'Get Started',
      content: 'Click here to begin',
      position: 'bottom'
    }
    // ... add at least 5 steps
  ]
});

Project Structure

Technology Stack

Next.jsReactTypeScriptViteFirebase AuthFirestoreCSS-in-JSGSAPVercel
├── apps/
│   ├── web/             # Dashboard application (Next.js + React)
│   │   ├── app/         # Pages and layouts
│   │   ├── components/  # Reusable components
│   │   ├── hooks/       # Custom React hooks
│   │   └── lib/         # Utilities and services
│   ├── widget/          # Embeddable widget (Vite + TypeScript)
│   └── docs/            # Technical documentation
└── package.json         # Workspace root configuration

Building for Production

Build Widget

cd apps/widget && pnpm build

Output: dist/ota-widget.js (11KB gzipped, 3.62KB minified)

Build Dashboard

cd apps/web && pnpm build

Output: .next/ directory

Build All

pnpm run build

Frequently Asked Questions

Is the tour framework agnostic?

Yes, Tour works with any JavaScript framework or vanilla JS. It operates purely on the DOM level.

Can I customize the styling?

Absolutely. The tour provides CSS classes for all elements and supports custom themes via CSS variables.

Is it accessible?

Yes, Tour follows WAI-ARIA guidelines, supports keyboard navigation, and is fully screen reader compatible.

What browsers are supported?

All modern browsers including Chrome, Firefox, Safari, and Edge. IE11 requires polyfills.

Can I dynamically update steps?

Yes, you can update the steps array dynamically and call Tour.refresh() to update the tour.

How lightweight is the widget?

The widget is 11KB gzipped (3.62KB minified) - designed for optimal performance.

Where is the live application hosted?

The application is deployed on Vercel at https://onboarding-widget-app.vercel.app/