TruGen PlayBook

Overview

In this recipe 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. Add the widget script

In the <head> or at the end of <body>, include the TruGen widget script as documented by TruGen. It will look roughly like this:

<script
  src="https://your-trugen-widget-url/widget.js"
  defer
></script>

Then, initialize the widget with your agent configuration. A typical pattern is:

<script>
  window.trugenWidget = window.trugenWidget || {};

  window.trugenWidget.config = {
    agentId: "YOUR_AGENT_ID",
    position: "bottom-right",
    theme: "dark",
    greeting: "Hi! How can I help you today?",
  };
</script>

3. Configure the widget

Set options such as:

Which agent or persona to use.
Initial prompt or greeting.
Positioning and size of the widget on screen.

Depending on the version of the widget, you may also configure:

Whether the widget auto-opens on page load.
Custom icons or avatar thumbnails.
Triggers (clicking a button, scrolling to a section, etc.).

4. Test on your site

Open the page in your browser and verify:

The widget loads without errors.
The agent can be started and interacted with.

Next steps

Trigger the widget from buttons or links on your site.
Pass user metadata (like account or subscription info) into the widget configuration.
Measure engagement by tracking widget open/close and conversation events.
Integrate the same widget configuration across multiple pages for a consistent assistant experience.