> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zynfo.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Add the chat widget to a React or Next.js app
> Load the ZynfoAI chat widget in a React, Next.js or Vite single-page app by adding the embed script once from your root component. No npm package needed.
# Add the chat widget to a React 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 → Embed Code** (the `data-chatbot-id` value), and use
the `src` address from that snippet.
```jsx theme={null}
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.
## Related topics
* [Add the chat widget to your website](/embed/html-embed)
* [Widget behaviour and settings](/agent-management/advanced-settings)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.