Embed via Widget

Get started

Import the script

To your existing index.html file import the trugen widget java script file as follows

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

Generate an API key

Using TruGen.AI Developer Platform, generate an API key from our developers page.
Set the newly generated API key as apiKey variable in the widget script configuration.

apiKey: "x-api-key,

Configuring your widget

Just above the imported js file script tag, you can configure widget as follows

<script>
  window.TrugenWidget = {
    agentName: "Your agent name", // This is the agent name thats displayed in the widget
    agentId: "Your agent id", // copy your agent id from agents library or create a new agent and copy the id
    apiKey: "x-api-key",
    heading: "Main heading of widget",
    subHeading: "Sub heading of widget",
    logoUrl: "logo_url_to_display",
    displayAvatarUrl: "avatar image url to dispaly in widget bubble"
  };
</script>
<script src="https://dist.trugen.ai/trugen-chat.js"></script>

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Widget Integrations</title>
</head>
<body>
<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>
<script src="https://dist.trugen.ai/trugen-chat.js"></script>
</body>
</html>

More Resourcess

Our Examples

Explore our official Github Repo for more examples

Introduction

Managed Agents

Video Generation

Integrations

Avatars

Providers

AI Tools

Get started

Complete Example

More Resourcess

Our Examples

​Get started

​Complete Example

​More Resourcess

Our Examples

Get started

Complete Example

More Resourcess