Widget integration

Add the WisebotAI chat widget to any website — HTML, React, Next.js, JavaScript, and Framer.

The WisebotAI widget is a floating chat bubble you drop into any website with a single script tag. It loads the full chat experience inside an iframe so it never conflicts with your page styles.

Step 1 — Get your IDs

Open Dashboard → Integrations (/integrations). You need two values:

Value	Where to find it
Organization ID	Shown in the Integrations page, copy button on the right
Agent ID	Shown below the Organization ID — matches the agent selected in the top navbar

Select the agent you want to power the widget before copying the IDs.

Step 2 — Add the snippet

Pick the platform your site uses.

Platform	Where to paste
HTML	Before `</body>`
JavaScript	Dynamic script injection
React	`useEffect` in a root component
Next.js (layout)	`next/script` in `app/layout.tsx`
Next.js (page)	`next/script` in a specific `page.tsx`
Next.js (Pages Router)	`next/script` in `pages/_app.tsx`
Framer	Site settings → Custom Code → End of body
Shopify	`layout/theme.liquid` before `</body>`
WordPress	`functions.php` or Header & Footer plugin
Webflow	Site settings → Custom code → Footer
Wix	Settings → Advanced → Custom Code → Body end
Squarespace	Settings → Advanced → Code Injection → Footer

HTML

Paste before the closing </body> tag on every page you want the widget to appear.

<script
  src="https://widget.wisebotai.com/widget.js"
  data-organization-id="YOUR_ORGANIZATION_ID"
  data-agent-id="YOUR_AGENT_ID"
></script>

JavaScript (vanilla)

Use this when you need to load the widget dynamically or control when it initializes.

(function () {
  var script = document.createElement("script");
  script.src = "https://widget.wisebotai.com/widget.js";
  script.async = true;
  script.setAttribute("data-organization-id", "YOUR_ORGANIZATION_ID");
  script.setAttribute("data-agent-id", "YOUR_AGENT_ID");
  document.body.appendChild(script);
})();

// Optional controls once loaded:
// window.WisebotWidget.show()
// window.WisebotWidget.hide()
// window.WisebotWidget.destroy()

React

Add once near the root of your app (e.g. App.tsx or App.jsx). The useEffect cleanup removes the script when the component unmounts.

import { useEffect } from "react";

export function WisebotWidget() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://widget.wisebotai.com/widget.js";
    script.async = true;
    script.setAttribute("data-organization-id", "YOUR_ORGANIZATION_ID");
    script.setAttribute("data-agent-id", "YOUR_AGENT_ID");
    document.body.appendChild(script);

    return () => {
      window.WisebotWidget?.destroy?.();
      script.remove();
    };
  }, []);

  return null;
}

// Render <WisebotWidget /> once near the root of your app:
// <App>
//   <WisebotWidget />
//   ...
// </App>

Next.js — App Router

There are two ways depending on whether you want the widget on every page or only a specific page.

Add next/script inside your root <body>. The afterInteractive strategy loads it after hydration without blocking render.

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://widget.wisebotai.com/widget.js"
          strategy="afterInteractive"
          data-organization-id="YOUR_ORGANIZATION_ID"
          data-agent-id="YOUR_AGENT_ID"
        />
      </body>
    </html>
  );
}

Use this when you only want the widget on, say, a support or pricing page.

// app/support/page.tsx
import Script from "next/script";

export default function SupportPage() {
  return (
    <>
      <main>
        {/* your page content */}
      </main>
      <Script
        src="https://widget.wisebotai.com/widget.js"
        strategy="afterInteractive"
        data-organization-id="YOUR_ORGANIZATION_ID"
        data-agent-id="YOUR_AGENT_ID"
      />
    </>
  );
}

Note: Do not place a raw <script> tag as a direct child of <html>. Always use next/script — Next.js 13+ will throw an error otherwise.

Next.js — Pages Router (_app.tsx)

// pages/_app.tsx
import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://widget.wisebotai.com/widget.js"
        strategy="afterInteractive"
        data-organization-id="YOUR_ORGANIZATION_ID"
        data-agent-id="YOUR_AGENT_ID"
      />
    </>
  );
}

Framer

Open your Framer project.
Go to Site settings (top toolbar) → General → Custom Code.
Paste the snippet into the End of <body> field.
Click Publish and open the live URL to verify.

<script
  src="https://widget.wisebotai.com/widget.js"
  data-organization-id="YOUR_ORGANIZATION_ID"
  data-agent-id="YOUR_AGENT_ID"
></script>

Shopify

In your Shopify admin go to Online Store → Themes → Edit code.
Open layout/theme.liquid.
Paste the snippet just before the closing </body> tag.
Click Save and reload your storefront.

{% comment %} theme.liquid — paste before </body> {% endcomment %}
<script
  src="https://widget.wisebotai.com/widget.js"
  data-organization-id="YOUR_ORGANIZATION_ID"
  data-agent-id="YOUR_AGENT_ID"
></script>

WordPress

Option A — functions.php (recommended for developers):

Go to Appearance → Theme File Editor (or use a child theme).
Open functions.php and paste at the bottom.
Save and visit your site.

<?php
function wisebot_widget() {
  ?>
  <script
    src="https://widget.wisebotai.com/widget.js"
    data-organization-id="YOUR_ORGANIZATION_ID"
    data-agent-id="YOUR_AGENT_ID"
  ></script>
  <?php
}
add_action( 'wp_footer', 'wisebot_widget' );

Option B — Header & Footer plugin (no-code):

Install a plugin like Insert Headers and Footers or WPCode.
Paste the <script> tag into the Footer section.
Save and verify.

<script
  src="https://widget.wisebotai.com/widget.js"
  data-organization-id="YOUR_ORGANIZATION_ID"
  data-agent-id="YOUR_AGENT_ID"
></script>

Webflow

In the Webflow Designer open Site settings → Custom code.
Paste the snippet into the Footer code field.
Click Save changes, then Publish.

<!-- Webflow: Site settings → Custom code → Footer code -->
<script
  src="https://widget.wisebotai.com/widget.js"
  data-organization-id="YOUR_ORGANIZATION_ID"
  data-agent-id="YOUR_AGENT_ID"
></script>

Wix

In the Wix dashboard go to Settings → Advanced → Custom Code.
Click + Add Custom Code, paste the snippet.
Set placement to Body — End and apply to All Pages.
Publish the site.

<!-- Wix: Settings → Advanced → Custom Code → Body - end -->
<script
  src="https://widget.wisebotai.com/widget.js"
  data-organization-id="YOUR_ORGANIZATION_ID"
  data-agent-id="YOUR_AGENT_ID"
></script>

Squarespace

Requires Business plan or above — Code Injection is not available on Personal plans.

Go to Settings → Advanced → Code Injection.
Paste the snippet into the Footer field.
Click Save.

<!-- Squarespace: Settings → Advanced → Code Injection → Footer -->
<script
  src="https://widget.wisebotai.com/widget.js"
  data-organization-id="YOUR_ORGANIZATION_ID"
  data-agent-id="YOUR_AGENT_ID"
></script>

Configuration attributes

All attributes are set on the <script> tag (or via setAttribute in JS).

Attribute	Required	Default	Description
`data-organization-id`	Yes	—	Your workspace ID
`data-agent-id`	Yes	—	Agent that handles conversations
`data-position`	No	`bottom-right`	`bottom-right` · `bottom-left` · `top-right` · `top-left`
`data-width`	No	`400px`	Widget width on desktop
`data-height`	No	`600px`	Widget height on desktop
`data-mobile-width`	No	`calc(100vw - 40px)`	Widget width on mobile
`data-mobile-height`	No	`calc(100vh - 110px)`	Widget height on mobile
`data-animation`	No	`none`	Bubble animation: `bounce` · `pulse` · `ping` · `spin` · `none`

Example with options:

<script
  src="https://widget.wisebotai.com/widget.js"
  data-organization-id="YOUR_ORGANIZATION_ID"
  data-agent-id="YOUR_AGENT_ID"
  data-position="bottom-left"
  data-width="380px"
  data-height="640px"
  data-animation="pulse"
></script>

JavaScript API

After the script loads, window.WisebotWidget exposes these methods:

window.WisebotWidget.show()     // open the chat window
window.WisebotWidget.hide()     // close the chat window
window.WisebotWidget.destroy()  // remove the widget from the page
window.WisebotWidget.init({     // reinitialize with new config
  organizationId: "...",
  agentId: "...",
  position: "bottom-left",
})

Example — open on button click:

<button onclick="window.WisebotWidget.show()">
  Chat with us
</button>

Troubleshooting

Widget not appearing

Check the browser console for errors (wrong org/agent ID, CORS, mixed content).
Make sure the script URL is https:// — HTTP will be blocked on HTTPS pages.
Confirm data-organization-id and data-agent-id are correct.

Widget hidden behind other elements

The widget uses z-index: 999999. If your page has elements with a higher z-index inside a new stacking context, the widget may appear behind them.

Next.js hydration warning

Use next/script with strategy="afterInteractive". Never use a raw <script> tag inside <html> or as a sibling of <body>.

Widget loads but shows a blank iframe

Verify NEXT_PUBLIC_WIDGET_URL is set correctly in your Vercel environment.
Check that widget.wisebotai.com is reachable from the browser.

Widget customization — colors, branding, floating messages
Agent settings — configure the agent behind the widget
Agent switcher — switch which agent the widget uses

Widget integration

Widget integration

Step 1 — Get your IDs

Step 2 — Add the snippet

HTML

JavaScript (vanilla)

React

Next.js — App Router

layout.tsx — widget on every page (recommended)

page.tsx — widget on one specific page

Next.js — Pages Router (_app.tsx)

Framer

Shopify

WordPress

Webflow

Wix

Squarespace

Configuration attributes

JavaScript API

Troubleshooting

On this page