name: ago-widget
description: Embed the AGO chat widget in any website using a simple script tag. No build step required. Keywords: ago, widget, embed, script, chat bubble, iframe, install, website.
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
/ago-widget - Embed the AGO Chat Widget
Adds the AGO embeddable chat widget to any website with a script tag. No build step needed.
Usage
/ago-widget
Steps
1. Detect the project type
- Static HTML site
- Server-rendered (PHP, Ruby, Python templates)
- SPA (React, Vue, Angular) — may prefer
/ago-react instead
- CMS (WordPress, Webflow, etc.)
2. Add the widget script
Add before the closing </body> tag:
<script>
window.AGO = {
basepath: "https://YOUR-DOMAIN.useago.com/",
};
</script>
<script async src="https://useago.github.io/widgetjs/frame.js"></script>
3. Optional: Customize appearance
<script>
window.AGO = {
basepath: "https://YOUR-DOMAIN.useago.com/",
prompt: "Hello! How can I help you today?",
colors: {
button: "#4F46E5",
headerBg: "#4F46E5",
headerText: "#FFFFFF",
userBubble: "#4F46E5",
userText: "#FFFFFF",
},
};
</script>
<script async src="https://useago.github.io/widgetjs/frame.js"></script>
4. Optional: Identify users
Pass user info so AGO knows who is chatting:
<script>
window.AGO = {
basepath: "https://YOUR-DOMAIN.useago.com/",
userEmail: "user@example.com",
userJwt: "jwt-token-here",
metadata: {
plan: "pro",
company: "Acme Inc",
},
};
</script>
5. Optional: Control the widget programmatically
window.AGO.open();
window.AGO.close();
window.AGO.toggle();
window.AGO.sendMessage("I need help with billing");
6. Framework-specific placement
Next.js (App Router):
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<script
dangerouslySetInnerHTML={{
__html: `window.AGO = { basepath: "${process.env.NEXT_PUBLIC_AGO_BASE_URL}" };`,
}}
/>
<script async src="https://useago.github.io/widgetjs/frame.js" />
</body>
</html>
);
}
WordPress: Add via theme's footer.php or a "Custom HTML" widget in the footer area.
Webflow: Project Settings > Custom Code > Footer Code.
Configuration Reference
| Property | Type | Description |
|---|
basepath | string | Your AGO instance URL (required, with trailing slash) |
prompt | string | Welcome message shown on open |
colors | object | Color customization (see above) |
userEmail | string | Current user's email |
userJwt | string | JWT for authenticated sessions |
metadata | object | Custom key-value pairs passed with messages |
Checklist
- Script is placed before
</body>, not in <head>
basepath ends with a trailing slash- Test: reload the page and verify the chat bubble appears in the bottom-right corner
- If the widget doesn't appear, check the browser console for errors
