Embed the AgentPMT Dashboard Widget

Developer guide for embedding the AgentPMT dashboard as an iframe so your users can manage their AI agents, credentials, orders, wallet, and account directly on your site.

Give your users a self-service dashboard they can use to manage their AgentPMT AI agents, credentials, orders, wallet, and account -- without ever leaving your site.

The dashboard is a standalone page hosted at https://www.agentpmt.com/embed/dashboard that you load inside an <iframe>. Drop it into a tab, a panel, or any container in your own UI.

Quick Start

Add this iframe wherever you want the dashboard to appear -- inside a tab panel, a sidebar, a settings page, or any container in your layout:

<iframe
  src="https://www.agentpmt.com/embed/dashboard"
  title="AgentPMT Dashboard"
  style="width: 100%; height: 100%; border: none;"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
  allow="storage-access"
  loading="lazy"
></iframe>

That is it. The dashboard handles its own authentication and renders a full management UI inside the frame.

Theme

The dashboard defaults to light mode. To use dark mode, add ?theme=dark to the URL:

Light mode (default):

https://www.agentpmt.com/embed/dashboard

Dark mode:

https://www.agentpmt.com/embed/dashboard?theme=dark

Pick whichever matches your site's color scheme.

Implementation Examples

Plain HTML -- Tab Panel

<div class="tab-content">
  <iframe
    src="https://www.agentpmt.com/embed/dashboard?theme=light"
    title="AgentPMT Dashboard"
    style="width: 100%; height: 700px; border: none;"
    sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
    allow="storage-access"
    loading="lazy"
  ></iframe>
</div>

React or Next.js

export function AgentPMTDashboard({ theme = "light" }: { theme?: "light" | "dark" }) {
  return (
    <iframe
      src={`https://www.agentpmt.com/embed/dashboard?theme=${theme}`}
      title="AgentPMT Dashboard"
      style={{ width: "100%", height: "100%", border: "none" }}
      sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
      allow="storage-access"
      loading="lazy"
    />
  );
}

Use it inside any tab or layout:

<div style={{ height: "700px" }}>
  <AgentPMTDashboard theme="dark" />
</div>

Webflow or Other Site Builders

Add an Embed block inside the tab or container where you want the dashboard, then paste:

<iframe
  src="https://www.agentpmt.com/embed/dashboard"
  title="AgentPMT Dashboard"
  style="width: 100%; height: 700px; border: none;"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
  allow="storage-access"
  loading="lazy"
></iframe>

WordPress

Add a Custom HTML block inside the tab or page section where you want the dashboard:

<iframe
  src="https://www.agentpmt.com/embed/dashboard"
  title="AgentPMT Dashboard"
  style="width: 100%; height: 700px; border: none;"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
  allow="storage-access"
  loading="lazy"
></iframe>

What Users Will See

The dashboard has two top-level tabs:

Dashboard Tab

Contains five sub-tabs:

AI Agents -- View and manage the AI agent budgets. Add or remove tools and workflows.
Credentials -- Manage API credentials tied to the account.
Orders -- View purchase history and order details.
x402 Wallet -- View wallet address, chain, balance, and payment records.
Account -- View and edit account settings.

Marketplace Tab

A searchable product marketplace where users can browse and add tools or workflows to their budget.

Dashboard Features

AI Agent Management

View, add, and remove tools and workflows on each budget

Credentials

Manage API keys and credentials

Orders

View purchase history and order status

Wallet

View wallet address, balance, and payment records

Account Settings

Edit account details and preferences

Marketplace

Search and add tools or workflows from the marketplace

Authentication

The dashboard handles authentication entirely inside the iframe. No tokens or cookies need to be passed in from the host page.

First-party embeds (iframe hosted on the same domain as your AgentPMT site): Users are signed in automatically via site cookies.
Third-party embeds (iframe on a different domain): Users register or log in with email and password directly inside the dashboard.

Sizing Tips

The iframe takes whatever size its parent container gives it. A few recommendations:

Set a minimum height of around 600px so the dashboard tabs and content are not cramped.
Use width: 100% to fill the available width of your tab panel or container.
If you want the dashboard to fill the full viewport height of a tab, use height: 100% on both the iframe and its parent container.

<!-- Full-height tab panel example -->
<div style="height: calc(100vh - 60px);">
  <iframe
    src="https://www.agentpmt.com/embed/dashboard"
    title="AgentPMT Dashboard"
    style="width: 100%; height: 100%; border: none;"
    sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
    allow="storage-access"
    loading="lazy"
  ></iframe>
</div>

Integration Checklist

Add the iframe to your page

Place the iframe inside the tab, panel, or container where you want the dashboard to appear.

Choose light or dark theme

Add ?theme=dark to the URL if your site uses a dark color scheme. Otherwise, the default light theme is used.

Test authentication

Open the dashboard and register a test account. Verify that login, logout, and session persistence work correctly.

Test AI agent management

Add and remove a tool from a budget. Confirm changes appear immediately in the AI Agents tab.

Test on mobile

The dashboard is responsive. Verify it does not overlap critical mobile UI or get clipped by the viewport.

Troubleshooting

Copy-Paste Starter

<iframe
  src="https://www.agentpmt.com/embed/dashboard"
  title="AgentPMT Dashboard"
  style="width: 100%; height: 700px; border: none;"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
  allow="storage-access"
  loading="lazy"
></iframe>

What is a Budget

Understand how budgets control your agent's tools and spending

Embed the Crypto Widget

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