DocumentaçãoWidgets

Entregue AI em um widget que se adapta ao seu produto.

Escolha o mecanismo de conversação, restrinja os sites permitidos e ajuste cada parte visível da experiência de chat incorporada com feedback ao vivo.

Visão geral da configuração

4 seções do editor · visualização ao vivo

Um widget tem como alvo um Agente, Fluxo de Trabalho ou RAG e expõe controles de apresentação como cores padrão e valores compatíveis com CSS.

Visão geral

Configure behavior and presentation together

Widget settings combine routing, origin security, copy, colors, typography, controls, and launcher appearance. Every design change is reflected in the preview without saving.

1. Route

Choose the AI resource that will receive visitor conversations.

2. Style

Match the host product with color, type, border, and shadow controls.

3. Preview

Inspect the chat window and floating launcher as values change.

Section 01

Widget Identity & Conversational Target

Define where the widget can run, what visitors see first, and which AI resource handles their messages.

Widget Identity and Conversational Target configuration — Create Widget · Identity, security, and target

Widget NameObrigatória

The internal display name used in the Widgets directory.

Use a deployment-oriented name such as Customer Support Chat.

DescriptionOpcional

Summarizes the widget purpose and where it will be deployed.

This is configuration metadata and is not shown in the visitor chat window.

Welcome MessageOpcional

The first message displayed automatically when a visitor opens the chat.

Default: Hello! How can I help you today?

Allowed DomainsOpcional

A comma-separated origin allowlist authorized to initialize and interact with the widget.

Leave empty to allow all websites; specify hostnames for production deployments.

Chat TargetObrigatória

Selects whether conversations run through one Agent, Workflow, or RAG.

After choosing the type, the corresponding searchable resource selector becomes required.

Target ResourceCondicional

The specific saved Agent, Workflow, or RAG that receives visitor messages.

Only the selector matching the active Chat Target is persisted.

Simple Agent

Runs messages directly through a selected autonomous agent.

Workflow

Runs the selected multi-agent orchestrator and returns its final output.

RAG

Queries a selected knowledge base for grounded retrieval or synthesized answers.

Section 02

Header & Floating Launcher Style

Style the widget's top bar and the floating button visitors use to open it. Color controls pair a visual swatch with an editable hexadecimal value.

Widget Header and Floating Launcher Style section — Create Widget · Header and launcher styling

Campo	Padrão	Propósito
Header Title Text	Support Chat	Title displayed in the widget header.
Header Background	#173c35	Background color of the top branding bar.
Header Text Color	#f8fffd	Color used for header text and controls.
Header Font Family	inherit	CSS font family applied to the header.
Launcher Background	#173c35	Background color of the floating trigger button.
Launcher Icon	Chat	Symbol displayed inside the floating trigger.

Chat

Mail

Sparkle

Support

Bot

Section 03

Message Bubbles & Typography

Configure outgoing visitor messages and incoming AI messages independently. Both groups accept the same six CSS-oriented properties.

Widget Message Bubbles and Typography section — Create Widget · Outgoing and incoming message styles

User Messages · Outgoing

Background: #173c35
Text color: #f8fffd
Font family: inherit
Font size: 14px
Box shadow: none
Border: none

AI Messages · Incoming

Background: #f3f6f4
Text color: #30423d
Font family: inherit
Font size: 14px
Box shadow: none
Border: 1px solid #d9e3df

Section 04

Compose Input, Send Button & Actions

Control the message input, send action, surrounding surfaces, and the feedback tools shown beneath AI responses.

Widget Compose Input, Send Button, and Actions configuration — Create Widget · Composer, surfaces, and response controls

Campo	Padrão	Propósito
Input Background	#ffffff	Message compose input surface.
Input Text Color	#132a24	Typed message text color.
Input Border	1px solid #cbd8d3	CSS border declaration for the compose input.
Placeholder Text	Type your message...	Hint shown while the input is empty.
Input Font Family	inherit	CSS font family used in the compose input.
Input Font Size	14px	CSS text size used in the compose input.
Send Background	#173c35	Send button background color.
Send Color	#f8fffd	Send button icon color.
Send Border	none	CSS border declaration for the send button.
Chat Background	#fbfdfc	Main conversation surface color.
Footer Background	#f7f9f8	Footer and compose-area surface color.

Like

Allows visitors to mark an AI response as useful.

Default: On

Dislike

Allows visitors to flag an unsatisfactory response.

Default: On

Copy

Copies the response content to the clipboard.

Default: On

Retry

Requests another generation for the same visitor message.

Default: On

Live feedback

Preview & Security Summary

The right column previews a complete conversation, response actions, compose bar, and floating launcher. The summary below tracks the selected target, allowed origins, and icon.

Live Widget Preview with sample conversation and launcher — Create Widget · Real-time visitor preview

Widget Overview and Security Summary — Create Widget · Deployment summary

An empty Allowed Security Domains value permits every origin. For production, list only the hostnames that should initialize and communicate with this widget.

Obrigatório antes de salvar

Widget name, target type, and one resource selected for that target type.

Após a criação

Use the saved widget configuration and its generated embed details to install the launcher on an allowed website.