Inline Chat Embed & Settings
Inline Chat
The inline chat (<web-chat-agent-inline>) renders inside your page layout instead of floating over it. Use it for a help center, product advisor, internal portal, or full-page assistant.
Open Dashboard → your assistant → Channels → Inline chat. The channel has its own installation code, settings, and live preview. It can run on the same site as the floating chat widget with a different title, welcome content, height, prompts, and styling.
Install inline chat
Expand Show installation details and copy the pre-filled code. The manual form is:
<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
Place the element exactly where the chat should appear and load the script once per page. The element fills its parent container, so your layout controls the width:
<div style="max-width: 720px; margin: 0 auto;">
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
</div>
Use the dashboard's copied version to avoid a typo in the Chatbot ID. The installation panel can also verify whether this assistant is loading on an allowed domain.
Appearance
| Setting | What it changes |
|---|---|
| Title | Heading on the start screen. Leave it empty to hide the heading. |
| Theme color | Accent color for buttons and visitor messages. |
| Font family | Widget font. Search Google Fonts or add a custom font name. |
| Height | Chat container height as a CSS length such as 600px, 80vh, or 100%. |
| Welcome message | Content shown before the first visitor message. |
The live preview updates with these settings. Sending a message in the preview uses the real assistant and consumes normal message quota.
Images
Add an optional Welcome image by upload or URL. It appears on the start screen above the welcome message. Use an optimized logo or banner and verify the result at the narrowest container width used on your site.
Content & Behavior
| Setting | What it changes |
|---|---|
| Welcome message | Rich-text introduction above the input before the first message. |
| Show sources | Appends available source references to answers. |
| AI labelling under bot replies | Marks every assistant reply as AI-generated. This is always on. |
| Automatic translation | Translates interface labels to the detected visitor language. |
| File upload | Lets visitors attach files when the plan permits it. |
| Prompt buttons | Starter questions on the start screen, also called suggested questions or conversation starters. Each item has a visible title and a message sent to the assistant. Up to 10 items. |
Prompt buttons can be drafted with AI or added manually. Keep the set short and use questions that demonstrate the assistant's real knowledge.
Advanced
| Setting | What it changes |
|---|---|
| Language detection source | Uses either browser language or the page's <html lang> attribute for automatic translation. |
| Hide branding | Removes the “Powered by” link when the plan allows it. |
| Custom CSS | Injects CSS into the inline widget using the documented stable selectors. |
The CSS editor includes starter presets, a stable-selector reference, a character counter, and live preview. See Custom CSS.
Optional context attributes
The inline element accepts tracking-consent and context-data in addition to chatbot-id. Context data can pass non-secret session information from the embedding page:
<web-chat-agent-inline
chatbot-id="YOUR_CHATBOT_ID"
context-data="Customer=Jane Doe;OrderID=A-1023"
></web-chat-agent-inline>
The AI may use these values in answers and approved tool calls. Do not place secrets, credentials, or information the current visitor is not authorized to access in HTML attributes. See Session Context Data for formats, limits, and the runtime event.
Floating vs. inline
| Chat widget | Inline chat | |
|---|---|---|
| Placement | Fixed floating button and overlay | Inside your page layout |
| Element | <web-chat-agent> | <web-chat-agent-inline> |
| Script | /widget/web-chat-agent.js | /widget/chat-widget-inline.js |
| Speech bubble and proactive triggers | Yes | No |
| Action Bar and forms | Yes | No |
| Live chat takeover | Yes | No |
| Settings | Channels → Chat widget | Channels → Inline chat |
Test before publishing
- Save the inline settings.
- Send one grounded question in the live preview.
- Open the real page and check height, scroll behavior, font loading, sources, and prompt buttons.
- Test the smallest mobile container.
- If both widget types are installed, confirm they use the intended independent settings.