# 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="/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>

> 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="/files/ugJEUwCQlEdcRzLABMVM" 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 %}


---

# 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-next.js-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.
