# Next.js

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

{% embed url="<https://youtu.be/hyI36DycSBU>" %}
NextJS Integration Tutorial
{% endembed %}

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

> The Next.js \<Script> component is an ideal way to load third-party scripts natively, ensuring optimal performance and proper lifecycle management.

3. **Create Interworky Component**

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

* TypeScript:

```typoscript
// components/Interworky.tsx
'use client';
import Script from 'next/script';
import { FC } from 'react';

const Interworky: FC = () => {
  const apiKey = "YOUR_API_KEY_HERE";

  return (
    <Script
      src="https://storage.googleapis.com/multisync/interworky/production/interworky.js"
      data-api-key={apiKey}
      strategy="lazyOnload"
      onLoad={async()=>{
        window?.Interworky.init();
      }}
    />
  );
};

export default Interworky;
```

* Javascript:&#x20;

```jsx
// components/Interworky.js
'use client';
import Script from 'next/script';

const Interworky = () => (
  <Script
    src="https://storage.googleapis.com/multisync/interworky/production/interworky.js"
    data-api-key="YOUR_API_KEY_HERE" // Replace with your API key
    strategy="lazyOnload" // Loads the script after the main content
    onLoad={() => { window.Interworky.init(); }} // Initialize Interworky on load
  />
);

export default Interworky;
```

4. **Add Interworky Component to your Project**

```typoscript
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
          <Interworky />
        {children}
      </body>
    </html>
  );
}
```

Or Add the component to your desired page

```javascript
<Interworky />
```

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

<figure><img src="https://3900551154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh8KeqaWePL624uIZ0FlH%2Fuploads%2FMzsgKWscZ2s7iiUN1Eln%2Finterworky-nextjs.png?alt=media&#x26;token=bfa6dfca-53af-41ca-840a-4ad3d0bb3116" alt=""><figcaption><p>Interworky added to your NextJS project</p></figcaption></figure>

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