Skip to main content

React Installation

Install Told in your React application (Vite, Create React App, or any React setup).

1. Add the script​

Add the Told snippet to your index.html file, inside the <head> tag:

<script>
  (function (w, d, e, v, o, l, t) {
    w['ToldWidget'] = o;
    w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments); };
    w[o].l = 1 * new Date();
    l = document.createElement(e);
    t = document.getElementsByTagName(e)[0];
    l.async = 1;
    l.src = v;
    t.parentNode.insertBefore(l, t);
  })(window, document, 'script', 'https://scripts.told.club/sdk/sdk.js', 'told');

  told('init', 'YOUR_SOURCE_ID');
</script>

Replace YOUR_SOURCE_ID with your Source ID from the Told dashboard.

2. Identify users (optional)​

Call identify in a useEffect when the user logs in:

import { useEffect } from 'react';

function App({ user }) {
  useEffect(() => {
    if (user) {
      told('identify', {
        email: user.email,
        userId: user.id,
        name: user.name,
      });
    }
  }, [user]);

  return <div>...</div>;
}

3. Reset on logout​

When the user logs out, call reset to clear their data:

function LogoutButton() {
  const handleLogout = () => {
    told('reset');
    // ... your logout logic
  };

  return <button onClick={handleLogout}>Log out</button>;
}

SPA route tracking​

The SDK automatically detects route changes via the History API (pushState, replaceState, popstate). No additional setup is needed for React Router or other routing libraries.