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

Content type: documentation
Source URL: https://www.agentpmt.com/docs/embedded-widgets/embed-the-agentpmt-dashboard-widget
Markdown URL: https://www.agentpmt.com/docs/embedded-widgets/embed-the-agentpmt-dashboard-widget?format=agent-md
Category: Embedded Widgets

---

# Embed the AgentPMT Dashboard Widget

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:

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

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

```tsx

  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:

```tsx
<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:

```html
<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:

```html
<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.

```html
<!-- 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

1. **Add the iframe to your page**
   Place the iframe inside the tab, panel, or container where you want the dashboard to appear.

2. **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.

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

4. **Test AI agent management**
   Add and remove a tool from a budget. Confirm changes appear immediately in the AI Agents tab.

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

---

## Troubleshooting

### The iframe shows a blank page

Make sure the `sandbox` attribute includes all required values: `allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox`. Missing any of these can prevent the dashboard from loading.

### Users get a login screen instead of automatic sign-in

Automatic sign-in only works for first-party embeds (the iframe is on the same domain as your AgentPMT site). For third-party embeds on a different domain, users must register or log in manually inside the dashboard. This is expected behavior.

### The dashboard content is cut off

Make sure the iframe's parent container has enough height. A minimum of `600px` is recommended. If you want the dashboard to fill the viewport, set the parent to `height: 100%` or use `calc(100vh - ...)`.

### Changes made in the dashboard are not reflected on the main site

The dashboard communicates directly with the AgentPMT API. Changes take effect immediately in the database. If the main site caches data, you may need to refresh the page or invalidate your cache.

---

## Copy-Paste Starter

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

---

## Related Docs

- [Agent Groups](/docs/core-concepts/agent-groups) - Understand how groups control your agent's tools and spending
  - [Embed the Crypto Widget](/docs/embedded-widgets/embed-the-agentpmt-crypto-on-off-ramp-widget) - Add a crypto on-off-ramp widget to your site