Connect Web Embed with Verabase

Generate a custom chat widget code snippet to deploy Verabase agents on any website with whitelists and branding.

What it does

The Web Embed channel provides a lightweight, highly customisable HTML/JavaScript chat widget. Once deployed on your website, it allows visitors to interface directly with your Verabase AI agents, resolving queries using your self-healing knowledge base RAG index.

Data Flow & Security

Widget client communications utilize secure WebSocket channels to stream replies:

Data Read: End-user messages and session IDs.
Data Written: Deployed agent text responses, references, and attachments.
Sync Frequency: Real-time streaming. Message token replies are delivered instantly over secure WebSockets.

Scope & Limits

Domain Whitelisting: To prevent unauthorized widget use, you must list your authorized domains. Embedded widgets initialized from unauthorized referrers will block connection handshakes.
Asset Customization: Styling options configure colors, border curves, offsets, and avatars. Complex stylesheet injections are blocked.
API References: Embedding utilizes standard web constraints. Refer to the MDN Iframe Specifications for configuration details.

Setup guide

Estimated setup time: ~5 minutes. Authentication type: Secure client token key and domain whitelist constraints. Developer level access to target web server required.

Access Deployed Channels

Navigate to AI Agents, click your agent, go to Deploy, and select Web Embed.

Design Widget Appearance

Modify colors, sizing dimensions, welcome messages, trigger offsets, and profile pictures. Changes are previewed live in the settings window.

Whitelist Target Domains

Input your site's domains (e.g. https://example.com) under the Whitelist inputs. Click save to store CORS boundaries.

Inject the script

Copy the generated code snippet and paste it right before the closing </body> tag on your target HTML pages. The widget will display instantly on page load.

Where it shows up

Client Website: Appears as a floating bubble in the bottom-right corner or inline block widget.
Live Inbox: Inbound conversations display as active threads marked with the 'Web Client' channel indicator badge.

Troubleshooting & Common Issues

Widget not loading: Check if your current domain is listed in Step 3. Domain matches must include correct subdomains and protocols (`http` vs `https`).
Content Security Policy (CSP) blocking: If the widget fails to launch, add the Verabase WebSocket server endpoint to your site's `connect-src` CSP header rules.

Frequently asked questions

Can I customize the design of the chat widget?

Yes, you can customize colors, fonts, avatar images, and launch button positions directly from the dashboard or via CSS variables.

Does the web embed support localization/multiple languages?

Yes, the widget automatically detects the user's browser language and displays the appropriate translated interface.

Is the web embed accessible (WCAG compliant)?

Yes, the Verabase chat widget is fully keyboard-navigable and supports screen readers in compliance with WCAG 2.1 AA guidelines.

Related integrations

Ready to deploy your widget?

Join the waitlist for early access to the self-healing knowledge platform.

Get early access to Web Embed deployment