ChatSupplies

Select Frameworks

Integration Guide

Integration Steps for React.js

React script and usage info

Locate the global component

Locate the global component. Open your main app layout file. For most React apps (created using Create React App or Vite), use App.js or App.tsx.

javascript

// App.js or App.tsx
import React from 'react';
import Chatwidget from './components/Chatwidget';

function App() {
  return (
    <div className="app">
      {/* Your app content */}
      <Chatwidget />
    </div>
  );
}

Use useEffect to inject script

Use useEffect to inject script. Inside your main layout component (App.js), use useEffect() from React to dynamically inject the script after the DOM loads.

javascript

// Inside your component
import { useEffect } from 'react';

useEffect(() => {
  const script = document.createElement('script');
  script.src = "https://widget.chatsupplies.com";
  script.async = true;
  document.body.appendChild(script);
}, []);

Dynamically add the chatbot script

Dynamically add the chatbot script. Create the <script> tag programmatically and append it to the document only if it hasn't been added yet. This avoids multiple inserts.

javascript

// Check before adding
useEffect(() => {
  if (!document.getElementById('chatbot')) {
    const script = document.createElement('script');
    script.id = 'chatbot';
    script.type = 'module';
    script.src = 'https://widget.chatsupplies.com';
    script.setAttribute('data-admin-id', '1');
    document.body.appendChild(script);
  }
}, []);

Make sure it loads once

Make sure it loads once. Prevent duplicate script loading by checking document.getElementById("chatbot") before adding the script.

javascript

// Prevent duplicate loading
const loadChatbot = () => {
  if (document.getElementById('chatbot')) {
    console.log('Chatbot already loaded');
    return;
  }

  const script = document.createElement('script');
  script.id = 'chatbot';
  script.src = 'https://widget.chatsupplies.com';
  document.body.appendChild(script);
};

Confirm chatbot loads on every route

Confirm chatbot loads on every route. Since App.js wraps your entire application, this ensures the chatbot appears on all pages/routes automatically.

javascript

// In your App.js/tsx (root component)
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  useEffect(() => {
    // Script loads once for all routes
    loadChatbotScript();
  }, []);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Handle clean-up for hot reloading

To prevent issues during development (especially with hot-reloading), you should include a clean-up function in your useEffect hook. This function removes the dynamically added script when the component unmounts or re-renders.

javascript

useEffect(() => {
  // ... code to add script
  
  return () => {
    // Cleanup
    const script = document.getElementById('chatbot');
    if (script) {
      document.body.removeChild(script);
    }
  };
}, []);

Quick Start Template

Here's a complete integration example you can copy and paste directly into your project.

html

Loading script configuration...

Need Help?

Check our documentation or contact support if you have issues integrating the chatbot.