Documentation that respects your time

Configure and ship guided tours in minutes.

index.html

<script src="https://unpkg.com/convex@1.3.1/dist/browser.bundle.js"></script>
<script data-tourId="yourtourId" src="https://venerable-churros-558104.netlify.app/tour-widget.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    window.InitTour({"tour_id": "12345"});
  });
</script>

Quick Start

Step 1 — Embed Scripts and Initialize

This is our own embedding link. You will need to include these script tags in your HTML, one for convex, one for the tourbridge.js and the last one to initialize the tour

Add these scripts to your HTML head section:

<script src="https://unpkg.com/convex@1.3.1/dist/browser.bundle.js"></script>
<script src="https://venerable-churros-558104.netlify.app/tour-widget.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    window.InitTour({"tour_id": "12345"});
  });
</script>

For the tourbridge.js, make sure you're passing your tourId from your dashboard

Step 2 — Demo

For demo:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dashboard Test Page</title>

  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f1f5f9;
      display: flex;
      height: 100vh;
    }

    /* Sidebar */
    #sidebar-nav {
      width: 220px;
      background: #1e293b;
      color: white;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    #sidebar-nav h2 {
      margin: 0;
      font-size: 18px;
    }

    #sidebar-nav a {
      color: #cbd5e1;
      text-decoration: none;
      padding: 8px 0;
      font-size: 15px;
    }

    #sidebar-nav a:hover {
      color: white;
    }

    /* Main Content */
    .main-area {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      background: #ffffff;
    }

    /* Header */
    header {
      background: white;
      padding: 16px 24px;
      border-bottom: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    #header-logo {
      font-weight: bold;
      font-size: 20px;
      color: #0f172a;
    }

    /* Stats cards */
    #stats-cards {
      display: flex;
      gap: 20px;
      padding: 24px;
    }

    .card {
      flex: 1;
      background: #f8fafc;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .card h3 {
      margin: 0 0 10px 0;
    }

    /* Activity Feed */
    #activity-feed {
      margin: 0 24px 24px;
      padding: 20px;
      background: #f8fafc;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      flex-grow: 1;
    }

    #activity-feed ul {
      margin: 0;
      padding-left: 20px;
    }

    /* Footer */
    #footer {
      padding: 14px 24px;
      background: #1e293b;
      color: white;
      text-align: center;
      font-size: 14px;
    }

    /* Button */
    .start-tour-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 14px 18px;
      background: #3b82f6;
      color: white;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      font-size: 15px;
    }
  </style>
</head>

<body>

  <!-- Sidebar -->
  <nav id="sidebar-nav">
    <h2>Menu</h2>
    <a href="#">Dashboard</a>
    <a href="#">Reports</a>
    <a href="#">Settings</a>
    <a href="#">Billing</a>
  </nav>

  <!-- Main Area -->
  <div class="main-area">
    <header>
      <div id="header-logo">My Dashboard</div>
    </header>

    <section id="stats-cards">
      <div class="card">
        <h3>Users</h3>
        <p>1,284</p>
      </div>
      <div class="card">
        <h3>Revenue</h3>
        <p>$45,920</p>
      </div>
      <div class="card">
        <h3>Sessions</h3>
        <p>8,213</p>
      </div>
    </section>

    <section id="activity-feed">
      <h3>Recent Activity</h3>
      <ul>
        <li>User John updated settings</li>
        <li>New signup: Amelia</li>
        <li>Payment received: $350</li>
      </ul>
    </section>

    <footer id="footer">
      © 2025 Dashboard Test
    </footer>
  </div>

  <script src="https://unpkg.com/convex@1.3.1/dist/browser.bundle.js"></script>
  <script src="https://venerable-churros-558104.netlify.app/tour-widget.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      window.InitTour({ tour_id: "j574gcmb74b5qzqw8myj4syq1d7x154k" });
    });
  </script>
</body>

</html>

Accessibility Notes

Keyboard Navigation

Tab, Enter, Escape keys supported. Full keyboard accessibility.

ARIA Labels

Proper ARIA roles and labels for screen readers.

Reduced Motion

Respects prefers-reduced-motion settings.

Contrast

WCAG AA compliant color contrast ratios.

Frequently Asked Questions

How well does it works with HTML page?

The widget works perfectly on any standard HTML page. Just add the script tag, include the required selectors, and you're ready to go—no extra setup needed.

How does the styling work?

The widget inherits a base font and color automatically. You can override colors via the dashoard and also customize your button color and text color.

Is it accessible?

We take accessibility seriously. The tour handles focus trapping, ARIA labeling, keyboard navigation (Escape to close, arrows to navigate), and respects reduced-motion preferences.

Can I use this widget in React?

Not at the moment. The widget is currently optimized only for plain HTML pages. Support for React and other frameworks may be added in future updates.