Skip to main content
Framer sites can host a live TruGen agent using the standard iframe embed. Setup takes about 5 minutes.

​
Prerequisites

  • A TruGen agent with an agent_id: see the quickstart if you don’t have one
  • Access to a Framer project you can edit

​
Add the embed

1

Add an Embed component in Framer

In your Framer canvas, insert a new Embed component from the Insert menu.
2

Paste the TruGen iframe

Set the Embed component’s HTML to:
Replace YOUR_AGENT_ID with your agent ID, and swap USER_NAME, USER_ID, and CONTEXT with values you want to identify the visitor by.
3

Publish

Publish the Framer site. Visitors will be prompted for camera + microphone permissions the first time they land on the page.

​
Verify domain access

If your agent has an allowed_domains list configured, add your Framer site’s custom domain (or the default .framer.website URL) to it. Otherwise requests from Framer will be blocked with 403 origin_not_allowed.

​
Sizing tips

  • Full-screen agent: set the Embed’s height to 100vh and width to 100%.
  • Panel-style agent: constrain the Embed size and place it inside a stack with the rest of your page content.
  • Mobile: keep height at least 500px: anything less crops the avatar.

​
What’s next

Widget (React)

For custom React apps, use the widget instead of the raw iframe.

iFrame reference

Every iframe parameter documented.