Installation

Install Bantico on React

For React applications, you can add Bantico in a few different ways depending on your setup. Pass your project token through data-token. These examples also set window.__BANTICO_TOKEN__ as a safe fallback.

Replace YOUR_PROJECT_TOKEN with your Bantico project token.

Simplest approach

The simplest approach is to load the Bantico script directly in your public/index.html file.

public/index.html

<!DOCTYPE html> <html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>React App</title>    <script>      window.__BANTICO_TOKEN__ = "YOUR_PROJECT_TOKEN";    </script>     <script src="https://app.bantico.com/bantico.js" data-token="YOUR_PROJECT_TOKEN" defer></script>  </head>  <body>    <div id="root"></div>  </body></html>

Using React Helmet

If you use React Helmet to manage the document head, add both the fallback token script and the Bantico tracker script there.

App.tsx

import { Helmet } from 'react-helmet'; function App() {  return (    <>      <Helmet>        <script>{'window.__BANTICO_TOKEN__ = "YOUR_PROJECT_TOKEN";'}</script>        <script src="https://app.bantico.com/bantico.js" data-token="YOUR_PROJECT_TOKEN" defer />      </Helmet>      <div>Your app content</div>    <//>  );}

Dynamic loading

For more control, set window.__BANTICO_TOKEN__, then load the Bantico script dynamically and pass the same token through data-token.

App.tsx

import { useEffect } from 'react'; function App() {  useEffect(() => {    window.__BANTICO_TOKEN__ = 'YOUR_PROJECT_TOKEN';     const script = document.createElement('script');    script.src = 'https://app.bantico.com/bantico.js';    script.defer = true;    script.setAttribute('data-token', 'YOUR_PROJECT_TOKEN');    document.head.appendChild(script);     return () => {      script.remove();    };  }, []);   return <div>Your app content</div>;}