# React

{% hint style="success" %}
Start your free trial now at <https://interworky.com>
{% endhint %}

**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.

<figure><img src="https://3900551154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh8KeqaWePL624uIZ0FlH%2Fuploads%2FENIcEBlKLrSQJ3rau4wq%2FScreenshot%202024-10-19%20at%206.45.20%E2%80%AFPM.png?alt=media&#x26;token=b369af6a-8b3d-440f-b79f-299afe7e2b6d" alt=""><figcaption><p>Integration Page - Interworky Dashboard</p></figcaption></figure>

2. **Locate the Embed Code**

* In the Integration Page, locate the Embed Code section.&#x20;
* Capture your api-key next to `data-api-key=` &#x20;

<figure><img src="https://3900551154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh8KeqaWePL624uIZ0FlH%2Fuploads%2F8PVt9JjubDsRRu5Zk928%2FScreenshot%202024-10-19%20at%209.31.06%E2%80%AFPM.png?alt=media&#x26;token=7adf349e-a4c6-4c8a-8e3e-9520292c80df" alt=""><figcaption><p>Integration Page  (Copied) - Interworky Dashboard</p></figcaption></figure>

3. **Create the Interworky Component**

Create Interworky Component in your react project, copy and paste the code below

```jsx
import { useEffect } from 'react';

const Interworky = ({ apiKey }) => {
  useEffect(() => {
    if (!apiKey) {
      console.error('[Interworky] Missing API key');
      return;
    }
    // create & inject the script
    const s = document.createElement('script');
    s.src =
      'https://storage.googleapis.com/multisync/interworky/production/interworky.js';
    s.async = true;
    s.setAttribute('data-api-key', apiKey);
    s.onload = () => {
      window.Interworky?.init();
    };
    document.body.appendChild(s);

    return () => {
      document.body.removeChild(s);
    };
  }, [apiKey]);

  return null;
};

export default Interworky;
```

4. **Add the Interworky Component to your Application**

* Include the Interworky component in your application where you want the assistant to be initialized.&#x20;

For example, you can include it in your App.jsx or a specific page component.

> Use the API Key from step 2&#x20;

See Example below:

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

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

export default App;
```

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

{% hint style="info" %}
If you have any questions about the Interworky React Integration, please reach out to our support team at <hello@interworky.com>. We're here to help!
{% endhint %}