TruGen PlayBook

Overview

This recipe shows how to embed a TruGen managed agent into a single static HTML page. There’s no React, no framework, and no bundler – just HTML, CSS, and a small amount of JavaScript.

You’ll:

Reference a managed agent from plain HTML.
Use an iframe to display the agent.
Optionally pass simple context via query parameters.

What you’ll build

A minimal static site that:

Loads a TruGen managed agent inside an iframe.
Can be deployed on any static hosting platform.
Requires no client-side build step.

Prerequisites

A TruGen account and managed agent.
Any static hosting (or just open the HTML file in your browser).

Project setup

1. Clone the example

git clone https://github.com/trugenai/trugen-examples.git
cd trugen-examples/managed-agents/static-html

Open index.html in your editor.

You’ll see a basic HTML skeleton with an iframe placeholder for the agent.

2. Configure the agent URL

Locate the iframe used to embed the agent and update its src with your managed agent URL. Include:

Your agent ID.
Any environment or configuration parameters required by TruGen.

For example, you might set:

<iframe
  src="https://your-trugen-agent-url?agentId=YOUR_AGENT_ID"
  allow="microphone; camera"
></iframe>

You can add more query parameters to control behaviour, such as userId or plan:

<iframe
  src="https://your-trugen-agent-url?agentId=YOUR_AGENT_ID&userId=demo-user&plan=pro"
  allow="microphone; camera"
></iframe>

3. Add minimal styling

Use regular HTML and CSS to center and size the agent:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>TruGen Static HTML Managed Agent</title>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #020617;
        color: #e5e7eb;
        font-family: system-ui, sans-serif;
      }

      .agent-shell {
        width: min(960px, 100vw - 2rem);
        height: 540px;
        border-radius: 1rem;
        overflow: hidden;
        border: 1px solid #1f2937;
        background: #000;
      }

      iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>
  </head>
  <body>
    <h1>Static HTML Managed Agent</h1>
    <p>Embed a TruGen managed agent in a single HTML file.</p>

    <div class="agent-shell">
      <iframe
        src="https://your-trugen-agent-url?agentId=YOUR_AGENT_ID"
        allow="microphone; camera"
      ></iframe>
    </div>
  </body>
</html>

4. Customize the page

Use regular HTML and CSS to:

Change the layout.
Add headings and copy above or below the agent.
Fit the agent into your brand styles.

You can also add a navigation bar, footer, or CTA buttons just like any other landing page.

5. Deploy as static hosting

Because this is just HTML:

You can upload to any static host (Vercel, GitHub Pages, Netlify, S3, etc.).
Or serve it directly from a simple HTTP server.

Next steps

Add a small script to capture user identifiers and pass them into the agent URL.
Integrate this static embed into an existing marketing or documentation site.
Build multiple pages (e.g. /support.html, /onboarding.html) that each embed a different managed agent.