BH

Docs

Dashboard

React Integration

Learn how to integrate BotHarbor chat widget into your React applications with multiple approaches and best practices.

Quick Start

The easiest way to add BotHarbor to your React app is using the useEffect hook to load the script after component mounting.

Basic Implementation

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Set configuration before loading script
    window.BOTHARBOR_CONFIG = {
      botId: 'your-bot-id',
      theme: 'light',
      position: 'bottom-right',
      primaryColor: '#14B8A6',
      greeting: 'Hello! How can I help you?'
    };

    // Load BotHarbor script
    const script = document.createElement('script');
    script.src = 'https://botharbor.ai/embed.js';
    script.async = true;
    document.head.appendChild(script);

    // Cleanup function
    return () => {
      const existingScript = document.querySelector('script[src="https://botharbor.ai/embed.js"]');
      if (existingScript) {
        existingScript.remove();
      }
      // Clean up global config
      delete window.BOTHARBOR_CONFIG;
    };
  }, []);

  return (
    <div className="App">
      <h1>My React App</h1>
      <p>BotHarbor chat widget will appear in the bottom-right corner.</p>
    </div>
  );
}

export default App;

Custom Hook Approach

Create a reusable custom hook for better organization and reusability across your application.

useBotHarbor Hook

// hooks/useBotHarbor.js
import { useEffect, useCallback } from 'react';

export const useBotHarbor = (config) => {
  const initializeBotHarbor = useCallback(() => {
    // Set global configuration
    window.BOTHARBOR_CONFIG = config;

    // Check if script already exists
    const existingScript = document.querySelector('script[src="https://botharbor.ai/embed.js"]');
    if (existingScript) {
      return;
    }

    const script = document.createElement('script');
    script.src = 'https://botharbor.ai/embed.js';
    script.async = true;
    document.head.appendChild(script);
  }, [config]);

  useEffect(() => {
    initializeBotHarbor();

    return () => {
      // Cleanup on unmount
      const existingScript = document.querySelector('script[src="https://botharbor.ai/embed.js"]');
      if (existingScript) {
        existingScript.remove();
      }
      delete window.BOTHARBOR_CONFIG;
    };
  }, [initializeBotHarbor]);

  const openChat = useCallback(() => {
    if (window.BotHarbor) {
      window.BotHarbor.open();
    }
  }, []);

  const closeChat = useCallback(() => {
    if (window.BotHarbor) {
      window.BotHarbor.close();
    }
  }, []);

  return { openChat, closeChat };
};

Using the Hook

import React from 'react';
import { useBotHarbor } from './hooks/useBotHarbor';

function App() {
  const { openChat, closeChat } = useBotHarbor({
    botId: process.env.REACT_APP_BOTHARBOR_BOT_ID,
    theme: 'light',
    position: 'bottom-right',
    primaryColor: '#14B8A6',
    greeting: 'Hello! How can I help you?'
  });

  return (
    <div className="App">
      <header>
        <h1>Welcome to My App</h1>
        <button onClick={openChat} className="chat-button">
          Need Help? Chat with us!
        </button>
      </header>
      <main>
        <p>Your app content here...</p>
      </main>
    </div>
  );
}

export default App;

Best Practices

Performance Tips

  • ✓Load the script asynchronously to avoid blocking the main thread
  • ✓Use environment variables for configuration
  • ✓Implement proper cleanup in useEffect
  • ✓Set BOTHARBOR_CONFIG before loading the script

Error Handling

  • •Always check if window.BotHarbor exists before calling methods
  • •Implement error boundaries for graceful failure handling
  • •Add fallback UI when the chat widget fails to load