Integration to React Websites

Integration Tutorial: Adding Interworky AI ChatBot to Your React Website

Start your free trial now at https://interworky.com

Step-by-Step Guide:

1. Log into the Interworky Dashboard

• After creating your Interworky account, log into the Interworky dashboard.

• Navigate to the Integration Page.

Integration Page - Interworky Dashboard

1. Locate the Embed Code

• In the Integration Page, locate the Embed Code section.

• Capture your api-key next to data-api-key=

Integration Page (Copied) - Interworky Dashboard

1. Create the Interworky Component

Add the Interworky script with the data-api-key attribute captured from the previous step, see example below.

import { useEffect } from 'react';

const Interworky = () => {
  useEffect(() => {
    // Dynamically inject the Interworky script
    const script = document.createElement('script');
    script.src = 'https://storage.googleapis.com/multisync/interworky/production/interworky.js';
    script.setAttribute('data-api-key', 'your-api-key-here'); // Replace with your actual API key
    document.body.appendChild(script);

    // Cleanup: Remove the script on component unmount
    return () => {
      const scriptElement = document.querySelector('script[src="https://storage.googleapis.com/multisync/interworky/production/interworky.js"]');
      if (scriptElement) {
        document.body.removeChild(scriptElement);
      }
    };
  }, []);

  return null; // This component doesn't render anything
};

export default Interworky;

1. Add the Interworky Component to your Application

• Include the Interworky component in your application where you want the assistant to be initialized. For example, you can include it in your App.js or a specific page component.

See Example below:

import React from 'react';
import Interworky from './components/Interworky';

const App = () => {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      {/* Other application content */}
      <Interworky />
    </div>
  );
};

export default App;

And Tadaa 🎉, you just integrated Interworky AI ChatBot into your React project.

If you have any questions about the Interworky React Integration, please reach out to our support team at [e-mail]. We're here to help!