Install Hubbo in React (Vite and others)

For a single-page React application (Vite, Parcel, RSBuild and similar), the simplest and most reliable approach is to add the snippet to your HTML shell. Prefer Vite for new apps — Create React App is deprecated.

Option 1: index.html (recommended)

Open root index.html and add the snippet inside <head>:

<script src="https://api.hubbo.io/embed?key=ACCOUNT_KEY" id="hubbo-embed-script" async type="module" crossorigin="use-credentials"></script>

With this approach you do not need any React code. The script loads once for the whole app.

Option 2: load it from a component

If you cannot edit the HTML shell, mount the script once from a top-level component. Guard against double insertion, because React Strict Mode runs effects twice in development.

import { useEffect } from 'react';

export function HubboEmbed({ accountKey }: { accountKey: string }) {
  useEffect(() => {
    if (document.getElementById('hubbo-embed-script')) return;

    const script = document.createElement('script');
    script.src = 'https://api.hubbo.io/embed?key=' + encodeURIComponent(accountKey);
    script.type = 'module';
    script.async = true;
    script.crossOrigin = 'use-credentials';
    script.id = 'hubbo-embed-script';
    document.body.appendChild(script);
  }, [accountKey]);

  return null;
}

Render <HubboEmbed accountKey="ACCOUNT_KEY" /> once near the root of your app, for example in App.tsx.

Server-side rendering frameworks

If you use Next.js, follow the Next.js guide. For Remix or other SSR setups, add the snippet to the root document template where you render <head>.