Next.js
Integration Tutorial: Adding Interworky AI Agent to Your Next.js Website
Start your free trial now at https://interworky.com
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.
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.
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;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.
Last updated