Embed Your Free AI Chat Widget — Fetchply
Add a free AI chat widget to your website with one line of code. Works on any site — HTML, WordPress, Shopify, React. No coding required, completely free.
Floating Widget (Recommended)
The floating widget adds a chat launcher to the corner of your page. It loads in an isolated iframe so it won't break your site styles.
Copy your embed code
Open Dashboard → Agent → Embed and copy the script snippet:
<script
src="https://fetchply.com/widget.js"
data-chatbot-id="YOUR_CHATBOT_ID"
defer
></script>Install it on your site
Paste the snippet before </body> on each page where the widget should appear.
Add the script in a shared layout component or _app.tsx so it loads on every page.
Add the snippet through your theme footer, site-wide script settings, or a header/footer plugin like Insert Headers and Footers.
Add the script to your theme's theme.liquid file before </body> so it loads across your storefront.
Test the live widget
Refresh your page, click the launcher in the bottom corner, and confirm the branding and starter questions look right.
Script Attributes
Customize the widget directly from the script tag:
| Attribute | Description | Default |
|---|---|---|
data-chatbot-id | Your agent ID (required) | — |
data-position | bottom-right or bottom-left | bottom-right |
data-bubble-size | Launcher size in pixels | 60 |
data-panel-width | Chat panel width in pixels | 380 |
data-panel-height | Chat panel height in pixels | 520 |
data-accent-color | Override the accent color | — |
Open the Chat From a Button
Turn any button or link on your site into a chat launcher by adding a single attribute — no JavaScript required. When a visitor clicks it, the widget opens, and it can even send a message for them automatically.
Open the chat and send a message (great for buttons like "Track my order" or "Talk to sales"):
<button data-fetchply-message="I want to track my order">
Track my order
</button>Just open the chat so the visitor can type their own message:
<button data-fetchply-open>Chat with us</button>The attribute works on any clickable element (<button>, <a>, <div>, …), as long as the widget script is installed on the same page.
Trigger From JavaScript
Prefer to control the widget in code? Use the global FetchplyWidget API:
// Open the chat and send a message
FetchplyWidget.open('How do I reset my password?');
// Open without sending — let the visitor type
FetchplyWidget.open();
// Close the chat
FetchplyWidget.close();Button triggers and the FetchplyWidget API become active once the widget
has finished loading on the page (typically under a second after page load).
Inline Iframe
Use an iframe when you want the chat to live inside a specific section of your page instead of floating as a launcher.
<iframe
src="https://fetchply.com/widget?chatbotId=YOUR_CHATBOT_ID"
width="380"
height="520"
style="border: none; border-radius: 12px;"
></iframe>Make sure your agent is enabled and has completed at least one training run before embedding. Disabled agents show an offline message in the widget.
Create Your First AI Agent
Create a free AI agent trained on your website URL in minutes. Train your chatbot, customize it, and embed it on your site — free.
AI Agents
Create free AI agents trained on your website, files, and Q&A pairs. Each agent has its own knowledge, personality, and chat widget. Start free — no credit card.