# 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="/files/bK2OUHTBTOMRBuyme1ob" 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="/files/RbfBw1d3KfZuCAYkFk5f" 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://interworky.gitbook.io/interworky-docs/integration/integration-to-react-websites.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.