Developer guide for embedding the AgentPMT AI chat widget on your site. Supports product, workflow, and bundle scopes with customizable theming and automatic credential provisioning.
Embed the AgentPMT Chat Widget
Give your users a conversational AI agent that can call tools, execute workflows, and make purchases -- all embedded directly in your site as an iframe or floating widget.
Production URL
https://www.agentpmt.com/embed.js
How It Works
The chat embed creates a scoped AI conversation tied to a specific product, workflow, or bundle. When a user opens the chat:
- They register or sign in with email and password
- The widget checks whether the scoped tools are on the user's budget
- If tools are missing, the widget walks the user through adding them and configuring credentials
- Once everything is provisioned, the AI agent can chat, call tools, and run workflows on the user's behalf
All tool and agent usage is billed to the end user's AgentPMT account. The embedding site does not pay for user activity -- costs pass through directly to each user based on their own usage.
Embed Types
The chat widget supports three scope types. All three accept the same parameters and follow the same authentication flow. The difference is what tools the AI has access to.
Product
Single-tool chat. URL: /embed/product/{id-or-slug}
Workflow
Multi-step workflow chat. URL: /embed/{id-or-slug}
Bundle
Multiple tools and workflows. URL: /embed/bundle/{id-or-slug}
Quick Start
Option 1 -- Script Tag (Floating Widget)
Paste this before the closing </body> tag:
<script
src="https://www.agentpmt.com/embed.js"
data-workflow-id="your-workflow-id-or-slug"
data-accent-color="#22c55e"
></script>A floating chat button appears in the bottom-right corner. Clicking it opens the chat panel.
Option 2 -- Script Tag (Inline)
Use data-mode="inline" to render the chat directly in the page without a floating button. The iframe fills its parent container:
<div style="width: 480px; height: 640px;">
<script
src="https://www.agentpmt.com/embed.js"
data-workflow-id="your-workflow-id-or-slug"
data-accent-color="#22c55e"
data-mode="inline"
></script>
</div>Option 3 -- Direct iframe
For full control over placement, embed the chat directly as an iframe:
<iframe
src="https://www.agentpmt.com/embed/product/your-product-id?accent-color=%2322c55e&theme=light"
title="AgentPMT Chat"
style="width: 100%; max-width: 480px; height: 640px; border: 0; border-radius: 24px; overflow: hidden"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
allow="storage-access"
loading="lazy"
></iframe>Implementation Examples
Plain HTML -- Product Chat
<!DOCTYPE html>
<html>
<head>
<title>My Product Page</title>
</head>
<body>
<h1>AI Web Scraper</h1>
<p>Try the tool right here:</p>
<iframe
src="https://www.agentpmt.com/embed/product/web-scraper?accent-color=%233b82f6&theme=light"
title="AgentPMT Chat"
style="width: 100%; max-width: 480px; height: 640px; border: 0; border-radius: 24px"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
allow="storage-access"
loading="lazy"
></iframe>
</body>
</html>Plain HTML -- Workflow Chat (Floating Widget)
<script
src="https://www.agentpmt.com/embed.js"
data-workflow-id="research-and-summarize"
data-accent-color="#8b5cf6"
data-position="bottom-right"
data-agent-name="Research Bot"
data-agent-subtitle="Deep Research Assistant"
></script>React or Next.js -- Product Chat
Option A -- Next.js Script component:
import Script from "next/script";
export default function ProductPage() {
return (
<div>
<h1>AI Web Scraper</h1>
<Script
src="https://www.agentpmt.com/embed.js"
data-product-id="web-scraper"
data-accent-color="#3b82f6"
data-position="bottom-right"
strategy="lazyOnload"
/>
</div>
);
}Option B -- useEffect (any React app):
import { useEffect } from "react";
export function ChatWidget({ productId }: { productId: string }) {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://www.agentpmt.com/embed.js";
script.setAttribute("data-product-id", productId);
script.setAttribute("data-accent-color", "#3b82f6");
script.setAttribute("data-position", "bottom-right");
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
const container = document.getElementById("agentpmt-embed-container");
if (container) container.remove();
};
}, [productId]);
return null;
}React or Next.js -- Inline iframe
export function InlineChat({ workflowId }: { workflowId: string }) {
const src = `https://www.agentpmt.com/embed/${workflowId}?accent-color=%233b82f6&theme=light`;
return (
<iframe
src={src}
title="AgentPMT Chat"
style={{
width: "100%",
maxWidth: 480,
height: 640,
border: "none",
borderRadius: 24,
}}
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
allow="storage-access"
loading="lazy"
/>
);
}Webflow or Site Builders
Add an Embed block to your page and paste:
<iframe
src="https://www.agentpmt.com/embed/product/your-product-id?accent-color=%2322c55e"
title="AgentPMT Chat"
style="width: 100%; max-width: 480px; height: 640px; border: 0; border-radius: 24px"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
allow="storage-access"
loading="lazy"
></iframe>Configuration
All parameters use kebab-case and work identically whether passed as data- attributes on the script tag or as query parameters on a direct iframe URL.
| Parameter | Script Attribute | Description | Default |
|---|---|---|---|
| Scope (required -- pick one) | |||
product-id | data-product-id | Product ID or slug. Single-tool chat. | -- |
workflow-id | data-workflow-id | Workflow ID or slug. Multi-step workflow chat. | -- |
bundle-id | data-bundle-id | Bundle ID or slug. Multi-tool bundle chat. | -- |
| Appearance | |||
accent-color | data-accent-color | Brand color (hex) for the widget button, chat border, glow, and send button. | #22c55e |
theme | -- | light or dark. | light |
| Agent | |||
agent-name | data-agent-name | Override the AI agent's display name. | Waffles |
agent-subtitle | data-agent-subtitle | Text under the agent name. Omit to hide. | SuperAgent |
| Layout | |||
position | data-position | Widget position: bottom-right or bottom-left. Script tag only. | bottom-right |
mode | data-mode | widget (floating button + popup) or inline (fills parent container). Script tag only. | widget |
show-scope | data-show-scope | Set to true to show the workflow/product scope card. | Hidden |
budget-id | -- | Pre-select a specific budget (for multi-budget users). | Auto-detected |
One scope required
You must set exactly one of product-id, workflow-id, or bundle-id. If none is set, the script will not initialize. If you want the dashboard widget instead of chat, use data-embed-type="dashboard" (see the Dashboard Widget guide).
URL-encode the hash
When passing hex colors as query parameters, the # must be URL-encoded as %23. For example, #3b82f6 becomes %233b82f6.
Authentication Flow
The chat widget handles authentication automatically. No tokens or API keys need to be passed in by the host page.
User opens the chat widget
The widget checks for an existing session. If none is found, it shows a registration form.
User registers or logs in
New users enter their email and password, then verify via a one-time code sent to their email. Returning users log in with email and password.
Session is established
The user stays signed in for 7 days. No further login is needed during that period.
Budget is resolved
The widget automatically connects the user to their budget so tools can be used. All usage costs are billed to the user's AgentPMT account.
Requirements and Provisioning Flow
After authentication, the widget checks whether the scoped tools are ready to use. If not, it guides the user through setup before starting the chat.
Check tool availability
The widget checks if the scoped product(s) or workflow(s) are already on the user's budget.
Add tools to budget (if needed)
If tools are missing, the widget shows an "Add to Budget" prompt. The user confirms, and the tools are added.
Configure credentials (if needed)
If any tool requires API keys, OAuth tokens, or other credentials, the widget shows a credential setup form. The user enters the required values and they are securely stored.
Chat is ready
Once all tools are on the budget and all credentials are configured, the chat interface loads and the user can start talking to the AI agent.
Automatic re-checking
If a user adds a tool or configures credentials mid-conversation (via in-chat cards), the widget automatically re-checks requirements and continues the conversation.
Embed Scope Reference
Product Embed
Scopes the chat to a single product (tool). The AI agent can only call that product's tool.
URL: https://www.agentpmt.com/embed/product/{productId}
<iframe
src="https://www.agentpmt.com/embed/product/web-scraper?accent-color=%233b82f6"
title="AgentPMT Chat"
style="width: 100%; max-width: 480px; height: 640px; border: 0; border-radius: 24px"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
allow="storage-access"
loading="lazy"
></iframe>The productId can be an ID or a URL-friendly slug from your AgentPMT dashboard.
Workflow Embed
Scopes the chat to a workflow (a chain of tools that run in sequence). The AI agent follows the workflow steps and calls the required tools automatically.
URL: https://www.agentpmt.com/embed/{workflowId}
<iframe
src="https://www.agentpmt.com/embed/research-and-summarize?accent-color=%238b5cf6"
title="AgentPMT Chat"
style="width: 100%; max-width: 480px; height: 640px; border: 0; border-radius: 24px"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
allow="storage-access"
loading="lazy"
></iframe>Bundle Embed
Scopes the chat to a bundle -- a curated collection of products and workflows. The AI agent has access to all tools and workflows in the bundle.
URL: https://www.agentpmt.com/embed/bundle/{bundleId}
<iframe
src="https://www.agentpmt.com/embed/bundle/marketing-toolkit?accent-color=%23f59e0b"
title="AgentPMT Chat"
style="width: 100%; max-width: 480px; height: 640px; border: 0; border-radius: 24px"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
allow="storage-access"
loading="lazy"
></iframe>Chat Features
Scoped Tools
AI agent only accesses tools within the embed scope
Auto-Provisioning
Walks users through adding tools and credentials
Usage Billing
All tool and agent costs pass through to the end user's account
In-Chat Cards
Interactive cards for tool setup and credential entry
Streaming Responses
Real-time streaming for instant feedback
Session Persistence
Conversations persist across page reloads
Theming
Light and Dark Mode
Use the theme parameter to match your site:
<iframe
src="https://www.agentpmt.com/embed/product/your-product?theme=light"
...
></iframe>Accent Color
The accent color controls the chat shell's border, glow effects, send button, action buttons, and the floating widget button. Pass any hex color to match your brand:
<!-- Blue -->
<iframe src="...?accent-color=%233b82f6" ...></iframe>
<!-- Purple -->
<iframe src="...?accent-color=%238b5cf6" ...></iframe>
<!-- Orange -->
<iframe src="...?accent-color=%23f97316" ...></iframe>Integration Checklist
Choose your embed type
Decide whether you are embedding a product, workflow, or bundle chat. Get the ID or slug from your AgentPMT dashboard.
Add the embed code
Use a script tag for a floating widget, or an iframe for inline placement. See the examples above.
Set your brand color
Use data-accent-color (script tag) or accent-color query parameter (iframe) to match your site's primary color.
Test authentication
Open the widget and register a test account. Verify login, logout, and session persistence.
Test tool provisioning
Remove the tool from your test budget, then reopen the chat. Verify the "Add to Budget" prompt appears and works.
Test credential setup
If the tool requires credentials, verify the credential form appears and saves values correctly.
Test the chat
Send a message and verify the AI agent responds and can call the scoped tools.
Test on mobile
Verify the widget is responsive and does not overlap critical mobile UI.
Troubleshooting
Copy-Paste Starters
Product Chat (Floating Widget)
<script
src="https://www.agentpmt.com/embed.js"
data-product-id="your-product-id"
data-accent-color="#22c55e"
data-position="bottom-right"
></script>Workflow Chat (Inline iframe)
<iframe
src="https://www.agentpmt.com/embed/your-workflow-id?accent-color=%2322c55e&theme=light"
title="AgentPMT Chat"
style="width: 100%; max-width: 480px; height: 640px; border: 0; border-radius: 24px"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
allow="storage-access"
loading="lazy"
></iframe>Bundle Chat (Dark Theme)
<iframe
src="https://www.agentpmt.com/embed/bundle/your-bundle-id?accent-color=%23f59e0b&theme=dark"
title="AgentPMT Chat"
style="width: 100%; max-width: 480px; height: 640px; border: 0; border-radius: 24px"
sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
allow="storage-access"
loading="lazy"
></iframe>