Interworky
  • Home
  • Introduction to Interworky
  • Getting Started
    • Account Setup Guide
    • LM Studio (Self Hosted LLM)
  • Integration
    • Integration to WordPress WebSites
    • Integration to Wix Websites
    • Integration to Squarespace Websites
    • Integration to Next.js Websites
    • Integration to React Websites
  • Integration Django Websites
  • Features Overview
    • AI Agent Customization
      • Website Sync
      • Naming & Personality
      • Profile Picture
      • Opening Statement
      • First Message
      • Custom Knowledge Base
      • Customizing the Theme
      • Knowledge Files
    • Capabilities
      • Managed Capabilities
      • Custom Capabilities
      • Importing Custom Capabilities via Postman Collection
    • Interworky Dashboard
    • Interworky AI Agent
    • Post-Visit Survey AI Agent
    • Appointments System
  • Support and Resources
Powered by GitBook
On this page
  1. Integration

Integration to Next.js Websites

Integration Tutorial: Adding Interworky AI Agent to Your Next.js Website

PreviousIntegration to Squarespace WebsitesNextIntegration to React Websites

Last updated 5 days ago

Start your free trial now at

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.

  1. Locate the Embed Code

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

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

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

  1. Create Interworky Component

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

  • TypeScript:

// 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:

// 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;
  1. Add Interworky Component to your Project

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

<Interworky />

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

If you have any questions about the Interworky Next.js Integration, please reach out to our support team at . We're here to help!

hello@interworky.com
https://interworky.com
Integration Page - Interworky Dashboard
Integration Page (Copied) - Interworky Dashboard
Interworky added to your NextJS project
Page cover image