Add the chat widget to a React or Next.js app

There’s no npm package for the widget. In a single-page app (React, Next.js, Vite), load the same embed script once, from the component that wraps every page. Get your agent ID from the snippet under AI agent → Website → Add to your website → Embed code (the data-chatbot-id value), and use the src address from that snippet.

Embed code block showing the script tag with its src address and data-chatbot-id, and a Copy code button. — The data-chatbot-id value in the embed code is your agent ID.

import { useEffect } from 'react';

export default function App({ children }) {
  useEffect(() => {
    if (document.getElementById('__chatbotSdk__')) return; // load once

    const script = document.createElement('script');
    script.id = '__chatbotSdk__';
    script.src = 'https://app.zynfo.ai/widget/embed.js'; // the src from your snippet
    script.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID');
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return <>{children}</>;
}

Put this in your root layout or App component, not in a page component, so the widget loads once and stays open when the visitor moves between pages. In Next.js (App Router) you can instead add the snippet with the Script component from next/script in your root layout. The widget’s text, colours and behaviour come from the AI agent page, so you don’t pass any settings in your code. The only attribute you set is data-chatbot-id.

Open the chat from your own button

Once the script has loaded, the page has a window.ChatWidget object. Calls made before the widget finishes loading are queued:

<button onClick={() => window.ChatWidget?.open()}>Chat with us</button>

open(), close() and toggle() are available.

Check that it’s live

Open your app once. Under AI agent → Website → Add to your website, the status then reads Live on and your address. Verify installation reads the page source, so it may not see a script that React adds after the page loads. Opening the app is the reliable check. Add your app’s address under Allowed websites to keep other sites from using the code.

Getting started

Dashboard

Knowledge

AI agent

Install on your website

Inbox

Leads, tickets and contacts

Automate

Integrations

Connect AI agents

Workspace settings

Billing and plans

Add the chat widget to a React or Next.js app

Open the chat from your own button

Check that it’s live

Open the chat from your own button

Check that it’s live

Related topics