Integration Steps

There are several ways to integrate your Cloudpresser AI chatbot with a React application:

Method 1: Using Helmet (Recommended)

The easiest way to add your chatbot to a React app is by using React Helmet:

Get your chatbot code:
- Go to your Cloudpresser AI Chat dashboard
- Select the chatbot you want to integrate
- Click on the "View Code" or "Integration" button
- Copy the provided code snippet
Install React Helmet:
- Install React Helmet in your project:
```
npm install react-helmet
# or
yarn add react-helmet
```

Add the chatbot to your app:

Import and use React Helmet in your main layout or App component:

import React from 'react';
import { Helmet } from 'react-helmet';

function App() {
  return (
    <div className="App">
      <Helmet>
        <script src="https://cloudpresserai.com/chatbot-widget.js" data-chatbot-id="YOUR_CHATBOT_ID" async></script>
      </Helmet>
      {/* Your app content */}
    </div>
  );
}

export default App;

Replace "YOUR_CHATBOT_ID" with your actual chatbot ID and update the script src URL if needed.

Method 2: Using useEffect Hook

Alternatively, you can dynamically add the script using the useEffect hook:

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Get the integration code
    const integrationCode = <script src="https://cloudpresserai.com/chatbot-widget.js" data-chatbot-id="YOUR_CHATBOT_ID" async></script>;

    // Extract attributes from the code
    const parser = new DOMParser();
    const scriptDoc = parser.parseFromString(integrationCode, 'text/html');
    const scriptEl = scriptDoc.querySelector('script');

    // Create script element
    const script = document.createElement('script');
    script.src = scriptEl.src;
    script.setAttribute('data-chatbot-id', scriptEl.getAttribute('data-chatbot-id'));
    script.async = true;

    // Add to document head
    document.head.appendChild(script);

    // Clean up on component unmount
    return () => {
      document.head.removeChild(script);
    };
  }, []); // Empty dependency array means this runs once on mount

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

export default App;

Method 3: Adding to index.html

For Create React App or similar setups, you can add the script directly to public/index.html:

Edit your index.html file:

Open the public/index.html file in your project
Add your chatbot code in the <head> section:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Other head elements -->

    <!-- Cloudpresser AI Chat integration -->
    <script src="https://cloudpresserai.com/chatbot-widget.js" data-chatbot-id="YOUR_CHATBOT_ID" async></script>

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Tip: If you're using a framework like Next.js, check their specific documentation for adding scripts to the head section. For Next.js, you can use the next/head component or the Script component.

React Framework Considerations

Create React App

For Create React App, any of the methods above will work. The index.html method is simplest if you don't need dynamic control over the chatbot.

Next.js

For Next.js, use the next/head component or the next/script component to add the chatbot script to your pages.

Gatsby

For Gatsby, use react-helmet or the Gatsby Head API to add the chatbot script to your site.

Troubleshooting

Chatbot not appearing in the app

Check the browser console for any errors. Ensure the script is being added to the DOM correctly and that the chatbot ID is correct.

Script loading multiple times

If using the useEffect method, ensure the dependency array is empty to prevent the script from being added multiple times. Also, check that the cleanup function is working correctly.

Conflicts with CSP (Content Security Policy)

If your app has a strict Content Security Policy, you may need to update it to allow loading scripts from the Cloudpresser domain.

Need Help?

If you're experiencing issues with the React integration, please contact our support team at [email protected].

React Integration Guide