Embed via Widget

Overview

In this article you’ll embed a TruGen video agent widget on any website. The widget is a small, configurable script you drop into your page – similar to a chat bubble or assistant dock.

You’ll:

• Add the TruGen widget script to a page.
• Configure which agent/persona to load.
• Control where and how the widget appears.

What you’ll build

A simple HTML page that:

• Loads the TruGen widget script.
• Initializes a video agent with your configuration.
• Shows the widget as a floating assistant on the page.

Prerequisites

• A TruGen account and video agent configured.
• Any website or static HTML page where you can add a script tag.

The complete example code lives at embed_via_widget in the trugen-examples repository.

Project setup

1. Clone the example

git clone https://github.com/trugenai/trugen-examples.git
cd trugen-examples/embed_via_widget

Open the example HTML file in your editor.

Adding the widget

2. Configure the widget

Define the global configuration object before loading the script:

<script>
  window.TrugenWidget = {
    agentName: 'Lisa',
    agentId: "your agent id",
    apiKey: "x-api-key",
    heading: "Lisa AI Sales Agent",
    subHeading: "Your AI sales agent",
    logoUrl: "https://trugen.ai/_next/static/media/trugen-logo2.d572f903.svg",
    displayAvatarUrl: "https://trugen.ai/_next/static/media/trugen-logo2.d572f903.svg"
  };
</script>

This configuration defines:

• agentName → Name of the agent
• agentId → Unique agent identifier
• apiKey → Authentication key
• heading → Widget title
• subHeading → Widget subtitle
• logoUrl → Logo displayed in UI
• displayAvatarUrl → Avatar/branding image

3. Load the widget script

Add the TruGen widget script:

<script src="https://dist.trugen.ai/trugen-chat.js"></script>

The script reads window.TrugenWidget, initializes the agent, and injects the widget UI into the page.

4. Test on your site

Open the page in your browser and verify:

• The widget loads successfully
• The configured agent is initialized
• You can interact with the agent

How it works

• The page defines window.TrugenWidget
• The widget script is loaded
• The script reads the configuration
• The agent session is initialized
• The widget UI is rendered

Next steps

• Replace placeholder values (agentId, apiKey) with real credentials
• Customize widget text and branding
• Integrate this widget into your application pages