Widget Integration

Add the Dochat widget to your website with a single script tag. We provide integration code for HTML, React, Next.js, and vanilla JavaScript.

Getting Your Code

Select your agent from the workspace
Go to Setup & Integrations
Choose your platform
Copy the code snippet

HTML

Add this script before the closing </body> tag:

index.html

<script
  src="https://widget.dochat.site/widget.js"
  data-organization-id="YOUR_ORG_ID"
  data-agent-id="YOUR_AGENT_ID"
  async
></script>

React

Load the widget in your root component:

App.tsx

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://widget.dochat.site/widget.js";
    script.setAttribute("data-organization-id", "YOUR_ORG_ID");
    script.setAttribute("data-agent-id", "YOUR_AGENT_ID");
    script.async = true;
    document.body.appendChild(script);

    return () => { script.remove(); };
  }, []);

  return <div>{/* Your app */}</div>;
}

Next.js (App Router)

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://widget.dochat.site/widget.js"
          data-organization-id="YOUR_ORG_ID"
          data-agent-id="YOUR_AGENT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Next.js (Pages Router)

pages/_app.tsx

import Script from "next/script";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://widget.dochat.site/widget.js"
        data-organization-id="YOUR_ORG_ID"
        data-agent-id="YOUR_AGENT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vanilla JavaScript

const script = document.createElement("script");
script.src = "https://widget.dochat.site/widget.js";
script.setAttribute("data-organization-id", "YOUR_ORG_ID");
script.setAttribute("data-agent-id", "YOUR_AGENT_ID");
script.async = true;
document.body.appendChild(script);

Configuration Attributes

Required

Attribute	Description
`data-organization-id`	Your organization ID
`data-agent-id`	Your agent ID

Optional

Attribute	Description	Default
`data-position`	Widget button position	`bottom-right`

Verification

Refresh your website after adding the code
Look for the chat button in the bottom corner
Click to open and send a test message
Check that the conversation appears in your dashboard

Troubleshooting

Widget not appearing

Verify the script is inside <body>, not <head>
Check that organization ID and agent ID are correct
Look for errors in the browser console
Ensure ad blockers aren't interfering

Widget not responding

Confirm your agent status is "Active" (not "Provisioning")
Ensure the agent has an indexed knowledge base attached
Check network requests in browser DevTools

Performance

The widget is optimized for minimal impact on your site:

Lazy loaded — doesn't block initial page render
Loads in an isolated iframe — no CSS conflicts
Cached for fast subsequent page loads