Embedding Your Chatbot on Any Website
Copy the embed snippet and add your PageGPT chatbot to any webpage in under 2 minutes.
Embedding Your Chatbot on Any Website
Once your chatbot is trained, you can embed it on any website with a single <script> tag.
Get the Embed Code
It looks like this:
<script
src="https://pagegpt.tech/widget.js"
data-chatbot-id="your-chatbot-id"
defer
></script>
Plain HTML Site
Paste the snippet just before the closing </body> tag on every page you want the chatbot to appear:
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<!-- your page content -->
<script
src="https://pagegpt.tech/widget.js"
data-chatbot-id="your-chatbot-id"
defer
></script>
</body>
</html>
The widget loads asynchronously so it never slows down your page.
WordPress
The easiest way is to add the snippet to your theme's footer so it appears on every page.
Option A — Theme Editor (classic themes)footer.php.</body>:<script
src="https://pagegpt.tech/widget.js"
data-chatbot-id="your-chatbot-id"
defer
></script>
Index or Single).Next.js
Add the widget once in your root layout so it loads on every page.
App Router (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://pagegpt.tech/widget.js"
data-chatbot-id="your-chatbot-id"
strategy="lazyOnload"
/>
</body>
</html>
);
}
pages/_document.tsx)
import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
<Script
src="https://pagegpt.tech/widget.js"
data-chatbot-id="your-chatbot-id"
strategy="lazyOnload"
/>
</body>
</Html>
);
}
Always use Next.js <Script> (not a plain <script>) so Next.js can manage loading strategy correctly.
Webflow
To add it to a single page only, open that page's settings and paste in the page-level Footer Code field instead.
Shopify
layout/theme.liquid.</body>.Wix
Squarespace
Allowed Domains
To prevent unauthorized use of your chatbot, add your domain to the Allowed Domains list in the Embed tab. Requests from other domains will be blocked.
Customizing the Widget
You can change the chatbot's appearance in the Appearance tab:
- Primary color — matches your brand
- Bot icon — upload a custom avatar
- Welcome message — the first message shown to visitors
- Suggested questions — shown as quick-start buttons