Docs

Single-Page Apps

Embed TellTide in React, Vue, Angular, and other client-routed apps.

React (Vite / CRA)

Load the script once in index.html:

<!-- public/index.html -->
<body>
  <div id="root"></div>
  <script
    src="https://telltide.com/src/widgets/widget.js"
    data-app-id="YOUR_APP_ID"
  ></script>
</body>

The widget mounts itself — no React wrapper component needed.

React — load on specific routes (optional)

useEffect(() => {
  if (document.querySelector('script[data-app-id="YOUR_APP_ID"]')) return;

  const script = document.createElement('script');
  script.src = 'https://telltide.com/src/widgets/widget.js';
  script.setAttribute('data-app-id', 'YOUR_APP_ID');
  document.body.appendChild(script);

  return () => {
    script.remove();
  };
}, []);

Vue / Angular

Use the same static script in index.html, or inject it from a root layout component on mount.

Client-side routing

The TellTide widget stays visible across route changes. Set App link to your SPA's public URL (e.g. https://app.example.com).

Next.js users

If you use Next.js App Router, see the dedicated Next.js guide.