Widget Customization
The Conduet webchat widget is a standalone, embeddable chat component that you add to any website. It connects to your published agent and provides a polished conversation interface for your users.
How It Works
The widget is a single optimised JavaScript file you drop onto any page. It renders in an isolated container so it cannot collide with your site's styles, streams responses from your agent in real time, and remembers the visitor's conversation between page loads if you want it to.
<!-- Embed the widget on any page --> <script src="https://your-domain.com/widget/bundle.js"></script> <conduet-widget project-id="your-project-id"></conduet-widget>
Widget Configuration
Configure the widget's appearance and behavior from the Widget tab in your project dashboard. Changes are saved with your project and picked up automatically the next time the widget loads — no redeploy needed.
Appearance
| Setting | Description |
|---|---|
| Primary Color | Main accent color for the widget header, buttons, and user message bubbles |
| Logo URL | Custom logo image displayed in the widget header |
| Welcome Message | Initial message shown when the widget opens before the user sends anything |
| Placeholder Text | Hint text in the message input field |
| Position | Widget launcher position on the page (bottom-right, bottom-left) |
Behavior
| Setting | Description |
|---|---|
| Auto-open | Whether the widget opens automatically when the page loads |
| Persistent Sessions | Whether conversation history persists across page reloads |
| Streaming | Enable SSE streaming for real-time token-by-token responses |
What's Inside
The widget handles every part of the chat experience out of the box:
- Chat window — Polished header, message list, and input area
- Message bubbles — User and agent messages with rich markdown formatting
- Button groups — Interactive quick replies sent by the agent
- Cards & carousels — Rich content displays with images and action buttons
- Typing indicator — Animated dots shown while the agent is thinking
- File upload — Let visitors attach images and documents
- Launcher — Floating button that opens and closes the widget
Previewing the Widget
The Widget tab in your project dashboard includes a live preview panel. Changes you make to the configuration are reflected in the preview immediately. You can test the full conversation flow right from the dashboard before embedding the widget on your site. The preview connects to the development version of your agent, so you can iterate without publishing.
Embedding on Your Website
Once configured, embed the widget by adding two lines to your HTML:
<script src="https://your-api-domain.com/widget/bundle.js"></script> <conduet-widget project-id="proj_abc123"></conduet-widget>
The widget loads asynchronously and runs in full isolation so it cannot conflict with your page's styles. The project-id attribute tells the widget which agent to connect to — it pulls its configuration automatically and handles everything from there.
What You Get Out of the Box
- A tiny self-contained bundle — no extra stylesheets, fonts, or dependencies to pull in
- Full style isolation, so the widget will not affect your site and your site will not affect the widget
- Real-time streaming responses with a polished typing experience
- Persistent conversations that pick up where the visitor left off across page loads
- One-line embed with nothing to host, build, or maintain yourself