Installation

Install Bantico on React

For React applications, you can add Bantico in a few different ways depending on your setup.

Replace YOUR_TOKEN with your Bantico token.

Simplest approach

The simplest approach is to set window.BANTICO_TOKEN and 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_TOKEN";    </script>    <script src="https://app.bantico.com/bantico.js"></script>  </head>  <body>    <div id="root"></div>  </body></html>

Using React Helmet

If you use React Helmet to manage the document head, you can add the Bantico token and script there:

App.tsx

import { Helmet } from 'react-helmet'; function App() {  return (    <div>      <Helmet>        <script>          {`window.BANTICO_TOKEN = "YOUR_TOKEN";`}        </script>        <script src="https://app.bantico.com/bantico.js"></script>      </Helmet>    </div>  );}

Dynamic loading

For more control, set window.BANTICO_TOKEN and load the Bantico script dynamically at runtime:

App.tsx

import { useEffect } from 'react'; function App() {  useEffect(() => {    window.BANTICO_TOKEN = "YOUR_TOKEN";    const script = document.createElement('script');    script.src = 'https://app.bantico.com/bantico.js';    script.async = true;     document.head.appendChild(script);     return () => {      document.head.removeChild(script);    };  }, []);   return (    <div>      {/* Your app content */}    </div>  );}