Install the widget on WordPress, Shopify, Webflow, Next.js and more

The widget is one script tag, so it works anywhere you can add custom HTML to every page. Copy the tag from the agent's Deploy tab first, and add your site's domain to Allowed websites.

Before you start

• The embed code, from Copy embed code on the Deploy tab.
• Your domain in Allowed websites. Add preview or staging domains too if you test there.

Steps by platform

1. 1

   Plain HTML

   Paste the tag just before </body> in your page template, or in the shared footer include so every page gets it.

2. 2

   WordPress

   Use your theme's footer scripts setting or a header-and-footer code plugin, and paste the tag in the footer section. Avoid pasting it into a post's content, where some editors strip scripts.

3. 3

   Shopify

   In the theme code editor, open theme.liquid and paste the tag just before </body>. Add both your myshopify.com address and your own domain to Allowed websites.

4. 4

   Webflow

   In Site settings, paste the tag into the Footer code field and publish the site. Add your webflow.io staging domain to Allowed websites if you test there.

5. 5

   Squarespace and Wix

   Use the site-wide code injection (footer) setting.

6. 6

   Next.js or React

   Load the script once in the root layout with next/script, passing the same data- attributes. Don't render it inside a component that remounts on every route change.

   // app/layout.tsx (Next.js App Router)import Script from "next/script"export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        {children}        <Script          src="https://app.sentientone.ai/widget.js"          strategy="lazyOnload"          data-widget-key="pk-so-…"          data-agent-id="YOUR_AGENT_ID"          data-style="bubble"          data-color="#2563eb"          data-bot-name="Assistant"          data-welcome="Hi, how can I help you today?"        />      </body>    </html>  )}

If something goes wrong