Integration to Next.js websites

Integration Tutorial: Adding Interworky AI ChatBot 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.

Integration Page - Interworky Dashboard

1. Locate the Embed Code

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

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

Integration Page (Copied) - Interworky Dashboard

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.

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 desired page

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

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