Inline Widget
Besides the floating chat button, WebChatAgent offers an inline widget (<web-chat-agent-inline>) that renders the chat directly inside your page layout — for example as a search-style assistant on a help page, a product advisor inside a landing page, or a full-page chat.
While the floating widget overlays your site in a corner, the inline widget behaves like a regular element: it fills the width of its container and you decide where it appears.
Embed Code
Place the element wherever the chat should appear and load the inline script once:
<script src="https://app.webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
Replace YOUR_CHATBOT_ID with your Chatbot ID. The ready-to-use snippet is available in Dashboard → Chatbot → Inline Widget, where it is pre-filled with your ID.
The element takes the full width of its parent container, so you control the width through your own layout:
<div style="max-width: 720px; margin: 0 auto;">
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
</div>
Configuration
The inline widget only needs the chatbot-id attribute. Everything else is configured in the dashboard under Inline Widget and loaded automatically:
| Setting | Description | Default |
|---|---|---|
| Title | Heading shown above the chat. Leave empty to hide the heading. | Chat |
| Theme Color | Accent color for buttons and user messages. | #2563eb |
| Welcome Message | Rich-text message shown before the first interaction. | Empty |
| Welcome Image | Image (e.g. logo) displayed above the welcome message. | None |
| Font Family | Font for the widget. Search Google Fonts or type any font name and press Enter to add it. | System default |
| Height | Height of the chat container as a CSS length (e.g. 600px, 80vh). | 600px |
| Show Sources | Display source references below answers. | Off |
| Automatic Translation | Translate UI labels to the visitor's language. Paid plans only. | On |
| File Upload | Let visitors attach files. Premium plans and higher. | Off |
| Hide Branding | Remove the "Powered by" footer. Paid plans only. | Off |
| Prompt Buttons | Up to 10 quick-start buttons shown below the input. | Empty |
| Custom CSS | Style the widget with your own CSS. Standard plans and higher. See Custom CSS. | Empty |
The inline widget has its own configuration, independent of the floating widget — you can run both on the same site with different settings.
Differences from the Floating Widget
| Floating Widget | Inline Widget | |
|---|---|---|
| Placement | Fixed corner overlay with chat button | Inside your page layout |
| Element | <web-chat-agent> | <web-chat-agent-inline> |
| Script | /widget/web-chat-agent.js | /widget/chat-widget-inline.js |
| Positioning offsets | Yes | Not needed (your layout controls placement) |
| Speech bubble & proactive triggers | Yes | No |
| Action bar | Yes | No |
| HTML attribute overrides | Yes (see Widget Embed Guide) | chatbot-id only; all settings come from the dashboard |
Best Practices
- Give it room — A container of 600–800px width works well for conversations
- Use a welcome message and prompt buttons — Inline placements work best when visitors immediately see what they can ask
- Hide the title when embedded in a designed section — An empty title removes the heading bar, so the chat blends into your layout
- Combine with the floating widget — Use the inline widget on a dedicated help page and the floating widget everywhere else