Site-wide chat bubble
Paste right before </body> on every page (or in your shared layout):
<script async src="https://askthe.bot/embed.js" data-agent="YOUR-SLUG"></script>Try-on — auto button
<script async src="https://askthe.bot/tryon.js"
data-agent="YOUR-SLUG"
data-product-image="https://yoursite.com/products/dress.jpg"
data-product-label="Red floral midi dress"></script>Try-on — your own button
<script async src="https://askthe.bot/tryon.js"
data-agent="YOUR-SLUG" data-auto-button="false"></script>
<button data-tryon-trigger
data-product-image="https://yoursite.com/products/dress.jpg"
data-product-label="Red floral midi dress">
Try it on
</button>React / Next.js
For Next.js App Router, use next/script:
import Script from 'next/script';
export default function Layout({ children }) {
return (
<html>
<body>
{children}
<Script async src="https://askthe.bot/embed.js" data-agent="YOUR-SLUG" />
</body>
</html>
);
}Per-product try-on (React)
'use client';
import Script from 'next/script';
import { useCallback } from 'react';
export function TryOnButton({ image, label }) {
const open = useCallback(() => {
// @ts-ignore
window.AskTheBotTryOn?.open({ productImage: image, productLabel: label });
}, [image, label]);
return (
<>
<Script async src="https://askthe.bot/tryon.js"
data-agent="YOUR-SLUG" data-auto-button="false" />
<button onClick={open}>Try it on</button>
</>
);
}Astro
---
// src/layouts/Base.astro
---
<html>
<body>
<slot />
<script async src="https://askthe.bot/embed.js" data-agent="YOUR-SLUG"></script>
</body>
</html>Allowed domains
Add every domain you'll embed on (production, staging, custom domains) in the agent's Profile → Allowed domains. Subdomains of an allowed domain auto-pass.