Widget Setup

Install the Fetchply chat widget on your website in minutes — works with any platform.

Installation

Get Your Embed Code

Go to your agent's Embed tab in the dashboard. Copy the code snippet:

embed-snippet.html

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

Add to Your Website

Paste the snippet before the closing </body> tag.

index.html

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

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

Option 1: Theme Editor Go to Appearance → Theme File Editor → footer.php and paste before </body>.

Option 2: Plugin Install the "WPCode" or "Insert Headers and Footers" plugin. Add the snippet to the footer section.

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://fetchply.com/widget.js"
          data-chatbot-id="YOUR_CHATBOT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

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

Go to Settings → Custom Code → Add Code. Paste the snippet, set placement to Body - end, and apply to All pages.

Go to Settings → Advanced → Code Injection. Paste the snippet in the Footer field.

Verify Installation

Open your website in a browser. Look for the chat bubble in the bottom-right corner. Click it to test a conversation.

Testing locally? The widget works on localhost — no special configuration needed.

Configuration Attributes

Customize the widget by adding data attributes to the script tag:

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>

Available Attributes

Attribute	Default	Description
`data-chatbot-id`	required	Your agent's unique identifier
`data-position`	`bottom-right`	`bottom-right` or `bottom-left`
`data-accent-color`	`#3b82f6`	Primary color (hex format)
`data-bubble-size`	`60`	Floating bubble diameter in px
`data-panel-width`	`420`	Chat panel width in px
`data-panel-height`	`650`	Chat panel height in px

Standalone Chat Page

Share a direct link to a full-page chat interface:

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

This is a complete, hosted chat page — no embedding required. Useful for email links, social media, and QR codes.

Performance

Script size: ~15 KB (gzipped)
Loads asynchronously — doesn't block page rendering
Widget content loads on demand when the bubble is clicked
Zero impact on your page speed scores

The widget runs inside an iframe, which means it cannot access your page's DOM, cookies, or JavaScript. This provides complete isolation and security.

On this page