Embed the Widget

Add the Fetchply chat widget to your website with a single script tag — customize position, colors, and behavior.

The Fetchply widget is a lightweight chat bubble that floats on your website. Visitors click it to start a conversation with your AI agent.

Get Your Embed Code

In your dashboard, go to your agent's Embed tab. You'll see a code snippet like this:

embed-snippet.html

<script
  src="https://fetchply.com/widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
></script>

Copy the snippet — your chatbot ID is already filled in.

Paste Into Your Website

Add the snippet just before the closing </body> tag on every page where you want the widget to appear.

index.html

<body>
  <!-- Your page content -->

  <script
    src="https://fetchply.com/widget.js"
    data-chatbot-id="YOUR_CHATBOT_ID"
  ></script>
</body>

Go to Appearance → Theme Editor → footer.php and paste the snippet before </body>.

Or use the Insert Headers and Footers plugin to add it site-wide.

Add the script to your root layout:

app/layout.tsx

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://fetchply.com/widget.js"
          data-chatbot-id="YOUR_CHATBOT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Go to Online Store → Themes → Edit Code → theme.liquid and paste the snippet before </body>.

Customize Appearance

You can configure the widget directly via data attributes:

customized-widget.html

<script
  src="https://fetchply.com/widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-position="bottom-right"
  data-accent-color="#3b82f6"
  data-bubble-size="60"
  data-panel-width="420"
  data-panel-height="650"
></script>

Attribute	Default	Description
`data-position`	`bottom-right`	Widget position: `bottom-right` or `bottom-left`
`data-accent-color`	`#3b82f6`	Primary color for the widget
`data-bubble-size`	`60`	Size of the floating bubble in pixels
`data-panel-width`	`420`	Chat panel width in pixels
`data-panel-height`	`650`	Chat panel height in pixels

For more customization options, see Widget Customization.

Verify It's Working

Open your website in a browser. You should see the floating chat bubble in the corner. Click it to open the chat panel and test a conversation.

Performance: The widget script is lightweight (~15 KB) and loads asynchronously. It won't slow down your page.

CORS: If you're testing locally (e.g., localhost:3000), the widget will still work — no CORS configuration needed.

Standalone Chat Page

Don't want to embed a widget? You can share a direct link to a hosted chat page instead:

https://fetchply.com/widget?id=YOUR_CHATBOT_ID

Share this link in emails, social media, or QR codes.

Next Steps

Customize your widget appearance — colors, welcome messages, and more
View conversations — see what your visitors are asking
Capture leads — collect visitor contact information

Add the Chat Widget