Static HTML Managed Agent

Overview

In this article, you’ll use a TruGen managed agent inside a static HTML page.

The agent is loaded inside an iframe, and its URL is constructed dynamically using JavaScript.

This approach requires no framework or backend — just a single HTML file.

What you’ll build

A static HTML page that:

• Loads a TruGen agent using an iframe
• Passes user and context information
• Starts an agent session automatically in the browser

Prerequisites

• A TruGen account and managed agent.
• A browser (Chrome, Edge, or Firefox)

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.

2. Add the iframe

<iframe
  src=""
  title="TruGen AI Agent"
  allow="camera; microphone; fullscreen; display-capture"
  allowfullscreen
  loading="lazy"
  sandbox="allow-scripts allow-same-origin"
></iframe>

This iframe acts as the container where the agent UI will be rendered.

3. Configure agent and user

<script>
  const agentId = "YOUR_AGENT_ID";
  const userName = "USER_NAME";
  const userId = "USER_ID";
  const conversationContext = "CONTEXT";
</script>

Replace these values with your actual data. These values define the session:

• agentId → Which agent to load
• userName → Display name of the user
• userId → Unique identifier for the user
• conversationContext → Initial context passed to the agent

4. Build the embed URL

<script>
  const baseUrl = "https://app.trugen.ai/embed";

  const params = new URLSearchParams({
    username: userName,
    id: userId,
    context: conversationContext,
  });

  const iframeSrc = `${baseUrl}/${agentId}?${params.toString()}`;
</script>

This step constructs the full URL used to load the agent.

The user details and context are added as query parameters, allowing the agent to start with personalized information.

5. Load the agent

<script>
  document.querySelector("iframe").src = iframeSrc;
</script>

This sets the iframe source and loads the agent UI into the page.

6. Open in browser

Open the file in your browser:

open index.html

Or double-click the file. The agent will load automatically and start the session.

Result

• The agent loads inside the iframe
• User details are passed via query parameters
• The session starts with the provided context
• You can interact with the agent directly

Next steps

• Replace placeholder values with real credentials
• Pass dynamic user data from your application
• Update context based on user interactions