Skip to main content
The chat embed lets you place the full Puppeteer chat experience directly inside your website. Unlike the widget, which floats as a bubble, the embed fills a container you define — ideal for dedicating a section of a page to the agent. Under the hood, both the embed and the widget use the same chat interface and support the same theming options. The difference is purely in presentation — the widget adds a collapsible bubble, while the embed renders inline. Embedded chat

​
Basic setup

Add an iframe pointing to the /widget route: 
<iframe
  src="https://dashboard.puppeteerai.com/widget?projectId=YOUR_PROJECT_ID"
  style="width: 100%; height: 600px; border: none;">
</iframe>

​
Theming

Pass color and branding options as URL parameters:
ParameterDescription
projectIdYour project ID (required).
accessTokenPre-generated access token for the thread.
headerBgColorHeader background color (hex-encoded, e.g. %23712F4A).
headerTextColorHeader text color.
headerBotNameDisplay name shown in the header.
agentImageURL for the bot’s avatar image.
botBubbleBgColorBackground color of bot message bubbles.
botBubbleTextColorText color of bot message bubbles.
userBubbleBgColorBackground color of user message bubbles.
userBubbleTextColorText color of user message bubbles.
jsonInputJSON string with initial data for the thread.
Hex color values must be URL-encoded — replace # with %23. For example, #712F4A becomes %23712F4A.

​
Full example

<iframe
  src="https://dashboard.puppeteerai.com/widget?projectId=YOUR_PROJECT_ID&headerBgColor=%23712F4A&headerTextColor=%23FFFFFF&headerBotName=Care%20Assistant&botBubbleBgColor=%23E5E7EB&userBubbleBgColor=%23712F4A&userBubbleTextColor=%23FFFFFF"
  style="width: 100%; height: 600px; border: none; border-radius: 12px;">
</iframe>

​
Opening a specific thread

By default, the embed creates a new thread. To open an existing thread, generate a JWT token for that thread and pass it as the accessToken parameter: 
<iframe
  src="https://dashboard.puppeteerai.com/widget?projectId=YOUR_PROJECT_ID&accessToken=eyJhbGciOiJIUzI1..."
  style="width: 100%; height: 600px; border: none;">
</iframe>
See Authentication for how to generate a JWT token scoped to a thread.

​
Interaction modes

The embed supports three interaction modes depending on your project configuration:
  • Text — Standard chat interface.
  • Web Call — Browser-based voice call.
  • Phone Call — Triggers a phone call to the user.
The available modes are determined by your project settings in the Puppeteer dashboard.