Skip to main content

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 TypeBest ForKey Features
StandardFull integration into page layout• Customizable size and positioning
• Responsive design
• Flexible styling options
BubbleNon-intrusive corner placement• Chat bubble interface
• Preview messages
• Responsive design
• Flexible styling options
PopupModal-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.

Getting Started​

Ready to add a chatbot to your website? Follow these steps:

  1. Create your agent in the Predictable Dialogs dashboard
  2. Connect an AI resource like OpenAI Assistant
  3. Choose and embed your widget using our step-by-step guide
  4. 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>
<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​