Web Channel
The Web channel allows you to embed AI chatbot widgets directly into your website, providing interactive AI assistance to your visitors. Choose from three different widget types and customize them to match your brand.
Widget Types
Predictable Dialogs offers three distinct widget types, each designed for different use cases and user experiences:
Widget Type | Best For | Key Features |
---|---|---|
Standard | Full integration into page layout | • Customizable size and positioning • Responsive design • Flexible styling options |
Bubble | Non-intrusive corner placement | • Chat bubble interface • Preview messages • Responsive design • Flexible styling options |
Popup | Modal-style interactions | • Auto-show and centered modal • Responsive design • Flexible styling options |
When to Use Each Widget
Choose Standard Widget when:
- You want to integrate chat directly into your page layout
- You need full control over positioning and sizing
- You're building a dedicated support or chat page
- You want the chat to be a permanent part of your UI
Choose Bubble Widget when:
- You want a non-intrusive chat option
- Your users should be able to browse while chatting
- You prefer a familiar messenger-style interface
- You want to save screen real estate
Choose Popup Widget when:
- You want to grab user attention
- You need a modal-style interaction
- You want to automatically engage visitors
- You prefer a focused, distraction-free chat experience
Core Features
All web widgets support these essential features:
Real-time Streaming
See AI responses appear in real-time for a more engaging conversation experience. Learn more
Advanced Theming
Customize colors, fonts, backgrounds, and styling through our visual theme editor or with custom CSS. Learn more
Responsive Design
All widgets automatically adapt to different screen sizes and devices for optimal user experience.
Custom CSS Support
Apply advanced styling and branding with full CSS customization capabilities. Learn more
Programmatic Control
Control widget behavior through JavaScript APIs for dynamic interactions.
User Information Capture
Automatically capture user data including IP address and country, with optional custom fields like user ID, name, email, and segments for enhanced session tracking. Learn more
Getting Started
Ready to add a chatbot to your website? Follow these steps:
- Create your agent in the Predictable Dialogs dashboard
- Connect an AI resource like OpenAI Assistant
- Choose and embed your widget using our step-by-step guide
- Customize your widget with themes and styling to match your brand
Quick Implementation
Here's a minimal example to get you started with each widget type:
Standard Widget
<script type="module">
import Agent from 'https://cdn.jsdelivr.net/npm/@agent-embed/js@latest/dist/web.js'
Agent.initStandard({
agentName: "your-agent-name",
});
</script>
<agent-standard style="width: 100%; height: 600px;"></agent-standard>
Bubble Widget
<script type="module">
import Agent from 'https://cdn.jsdelivr.net/npm/@agent-embed/js@latest/dist/web.js'
Agent.initBubble({
agentName: "your-agent-name",
});
</script>
Popup Widget
<script type="module">
import Agent from 'https://cdn.jsdelivr.net/npm/@agent-embed/js@latest/dist/web.js'
Agent.initPopup({
agentName: "your-agent-name",
autoShowDelay: 3000,
});
</script>
Next Steps
- Embed Your Widget - Step-by-step embedding guide
- Customize with Themes - Visual customization options
- Advanced Styling - Custom CSS techniques
- Widget Documentation - Different widget options