React Integration

Learn how to integrate EasyFindAi into your React application

1

Get Your API Key

Select a chatbot in the dashboard to view its API key

2

Create a React Component

Create a new React component to load the EasyFindAi chatbot script.

// EasyFindAiChatbot.tsx
import { useEffect } from 'react';


interface EasyFindAiChatbotProps {
  apiKey: string;
}


export function EasyFindAiChatbot({ apiKey }: EasyFindAiChatbotProps) {
  useEffect(() => {
    // Create script element
    const script = document.createElement('script');
    script.src = 'https://easyfindai.com/api/chatbot-embed?apiKey=YOUR_API_KEY';
    
    // Append to document
    document.body.appendChild(script);
    
    // Cleanup function
    return () => {
      if (document.body.contains(script)) {
        document.body.removeChild(script);
      }
    };
  }, [apiKey]);
  
  return null;
}
3

Add to Your App

Import and use the component in your main App component so it's available throughout your site.

// App.tsx
import { EasyFindAiChatbot } from './components/EasyFindAiChatbot';


function App() {
  return (
    <div className="app">
      {/* Your app content */}
      <Routes>
        {/* Your routes */}
      </Routes>
      
      {/* Add the chatbot component */}
      <EasyFindAiChatbot apiKey="YOUR_API_KEY" />
    </div>
  );
}
4

Alternative: Script Tag Method

Alternatively, you can add the script directly to your HTML file. This method works well if you're using Create React App or a similar setup.

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- Other meta tags -->
  </head>
  <body>
    <div id="root"></div>
    <!-- Add the chatbot script -->
    <script
      src="https://easyfindai.com/api/chatbot-embed?apiKey=YOUR_API_KEY"
    ></script>
  </body>
</html>

That's it!

The chatbot will now be available on all pages of your React application. No additional configuration is needed!