Skip to main content
Every agent you create in TruGen comes with a widget — a React component (also available as an iframe) that renders the agent inside your web app. The widget picks up its appearance, position, buttons, branding, and domain restrictions directly from the agent’s widget configuration on the agent itself. That means: change the widget in the Studio or via the API, and every embed of the widget everywhere picks up the change on the next session. Your app doesn’t redeploy.

​
What lives on the widget config

When you create or edit an agent in the Studio, the Widget section lets you configure:
  • Position — left, right, center, center-mini, or full
  • Widget type — dual (Talk + Chat), Talk-only, or Chat-only
  • Colors — solid or gradient, plus theme (dark/light)
  • Branding — company logo, company name, agent display name
  • Buttons — custom text for Start Chat, Talk, and Chat
  • Suggested topics — starter prompts to nudge users toward useful conversations
  • Allowed domains — restrict which origins can embed the agent
These settings live on the agent’s widget object. See the Widget Customization reference for every field and how it renders.

​
Where to ship it

Pick the embed path that matches your stack:

React widget

Install @aiteammate/agent-widget and render with your agent ID.

iFrame

Drop the iframe into any HTML page — no npm install.
For no-code platforms (Framer, Shopify, WordPress, Wix, Squarespace) see the dedicated Site Builder guides.

​
Widget vs iFrame

Both paths render the same underlying widget with the same agent config. The difference is how it lives inside your app. The React widget is slightly more powerful — you can pass userName, userId, and context as typed props. The iframe accepts the same via query params.

​
Next steps

Widget Customization

Every widget config field — position, colors, buttons, branding, domain restrictions.

Widget SDK Reference

Every prop the React widget accepts.