Embed the AgentPMT Chat Widget

Developer guide for embedding AgentPMT scoped chat on your site. Supports product, workflow, and agent iframe embeds, plus script-based product, workflow, and bundle widgets.

Give your users a conversational AI agent that can call approved tools and workflows -- 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, agent, or preconfigured bundle. When a user opens the chat:

They register or sign in inside the embed
AgentPMT checks the scoped tools, Agent Group access, and credential requirements
If setup is needed, the chat can show action cards for enabling tools or configuring credentials
Once the user is authenticated and the scope is ready, the AI agent can chat and call the approved tools 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

Use a direct iframe for the most explicit integration. Use the script tag when you want AgentPMT to create a floating widget or inline iframe for you.

Product

Single-tool chat. URL: /embed/product/{id-or-slug}

Workflow

Workflow-scoped chat. URL: /embed/{id-or-slug}

Agent

A built agent with its attached tools and workflows. URL: /embed/agent/{id-or-slug}

Bundle

A preconfigured group of tools and workflows. URL: /embed/bundle/{id-or-slug}

Quick Start

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-product-id="your-product-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/agent/your-agent-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>

<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 -- Agent iframe

export function AgentChat({ agentId }: { agentId: string }) {
  const src = `https://www.agentpmt.com/embed/agent/${agentId}?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

Script attributes and iframe query parameters overlap, but they are not identical. Use data- attributes on the script tag; use query parameters on direct iframe URLs.

Parameter	Script Attribute	Iframe Query	Description	Default
Scope (script tag -- pick one)
`product-id`	`data-product-id`	--	Product ID or slug. Single-tool chat.	--
`workflow-id`	`data-workflow-id`	--	Workflow ID or slug. Workflow-scoped chat.	--
`bundle-id`	`data-bundle-id`	--	Bundle ID or slug. Preconfigured grouped chat.	--
Scope (direct iframe path)
Product path	--	`/embed/product/{id-or-slug}`	Product-scoped iframe.	--
Workflow path	--	`/embed/{id-or-slug}`	Workflow-scoped iframe.	--
Agent path	--	`/embed/agent/{id-or-slug}`	Agent-scoped iframe.	--
Bundle path	--	`/embed/bundle/{id-or-slug}`	Bundle-scoped iframe.	--
Appearance
`accent-color`	`data-accent-color`	`accent-color`	Brand color (hex) for the widget button, chat border, glow, and send button.	`#22c55e`
`theme`	--	`theme`	`light` or `dark`.	`light`
Agent display
`agent-name`	`data-agent-name`	`agent-name`	Override the AI agent's display name.	`Waffles`
`agent-subtitle`	`data-agent-subtitle`	`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`	`show-scope`	Set to `true` to show the workflow/product/agent scope card.	Hidden

One script scope required

For script-tag embeds, set exactly one of data-product-id, data-workflow-id, or data-bundle-id. If none is set, the script will not initialize. For Agent embeds, use a direct iframe URL under /embed/agent/{id-or-slug}.

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, then verify via a one-time code sent to their email. Returning users log in inside the embed.

Session is established

The user stays signed in for the embed session. No host-page token is required.

Agent Group access is resolved

AgentPMT connects the signed-in user to the relevant Agent Group context so scoped tools can be used and activity can be logged.

Requirements and Setup Flow

After authentication, AgentPMT checks whether the scoped tools are ready to use. If setup is needed, the user handles it through chat cards or the dashboard.

Check tool availability

AgentPMT checks whether the scoped product, workflow, agent, or bundle can run for the user's Agent Group.

Enable missing tools if needed

If scoped tools are missing from the Agent Group, the chat can show a setup card so the user can confirm the change.

Configure credentials if needed

If any tool requires API keys, OAuth tokens, or other credentials, the chat can show a credential setup card. Secret values are stored by AgentPMT and injected server-side.

Chat is ready

Once access and credentials are ready, the user can chat with the scoped AI agent.

Automatic re-checking

If a user enables a tool or configures credentials mid-conversation, the widget 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.

Workflow Embed

Scopes the chat to a workflow. The AI agent follows the workflow context and calls 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>

Agent Embed

Scopes the chat to a built AgentPMT agent and the tools and workflows attached to that agent.

URL: https://www.agentpmt.com/embed/agent/{agentId}

<iframe
  src="https://www.agentpmt.com/embed/agent/support-assistant?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>

Bundle Embed

Scopes the chat to a preconfigured bundle -- a curated collection of products and workflows.

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

Setup Cards

Guides users through enabling tools and configuring credentials when needed

Usage Billing

All tool and agent costs pass through to the end user's account

Credential Cards

Interactive setup cards for credential entry and OAuth flows

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, agent, or bundle chat. Get the ID or slug from AgentPMT.

Add the embed code

Use a script tag for a floating widget, or an iframe for inline placement. Use a direct iframe for Agent embeds.

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 setup cards

Try the embed with a user whose Agent Group does not already include the scoped tools. Verify the setup card appears and the confirmed change is saved.

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

<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>

Agent Chat (Inline iframe)

<iframe
  src="https://www.agentpmt.com/embed/agent/your-agent-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>

Embed the Dashboard Widget

Let users manage tools, workflows, and Agent Group settings on your site

What is a Workflow

Learn how workflows chain tools together

How Credentials Work

Understand how AgentPMT manages API keys and tokens

Embed the Crypto Widget

Add a crypto on-off-ramp widget to your site

Try Building Your Own Autonomous Workflow!

It's free to start, no credit card required. Dive in and build it yourself, or bring in the AgentPMT experts for a seamless end-to-end implementation.

Free to start. Consulting available when you want expert implementation.