Web Widget & Embed Customization
The Omniflow Web Widget allows customers to chat with your AI agents and human support team directly from your website or web application. You can customize every aspect of the widget to match your company’s branding.
Quick Embed Installation
Add this code snippet just before the closing </body> tag on every page of your website:
<script
async
src="https://cdn.omniflow.io/widget.js"
data-workspace="your-workspace-slug">
</script>Customizing Widget Appearance
Configure your widget under Settings → Channels → Web Chat:
| Setting | Options | Description |
|---|---|---|
| Primary Brand Color | Hex Code (e.g. #007AFF) | Sets the color of the chat bubble, header bar, and send button. |
| Launcher Style | Floating Icon, Text Pill, Minimal Circle | Choose how the chat button appears in the bottom corner. |
| Position | Bottom Right (Default), Bottom Left | Position on the screen with customizable offset padding (px). |
| Custom Company Logo | PNG, SVG, JPG (120x120px) | Displayed in the chat header and beside AI agent replies. |
| Greeting Message | Custom Text | ”Hi there! How can we help you today?” |
Pre-Chat Data Capture Forms
Require visitors to provide basic contact details before starting a conversation:
- In Widget Settings, turn on Pre-Chat Form.
- Select mandatory and optional fields:
- Name & Email: Automatically creates or links a customer profile in Contacts.
- Order Number / Account ID: Looked up in your CRM or Shopify store immediately.
- Department Selector: Routes the chat directly to Billing, Technical Support, or Sales.
Proactive Chat Greetings
Engage website visitors automatically based on their browsing behavior:
| Trigger Scenario | Example Behavior |
|---|---|
| Checkout Page Hesitation | If a customer spends over 45 seconds on /checkout, open a friendly prompt: “Have questions about shipping or payment methods?” |
| Pricing Page Comparison | If a visitor views /pricing for 30 seconds, trigger: “Looking for an enterprise quote? Chat with our sales team.” |
| Returning Customer Welcome | Greet logged-in users by first name with their recent order status. |
Authenticated User Identity (JWT)
To securely pass logged-in user credentials from your SaaS portal or mobile app:
- Generate a user identity JWT signed with your workspace secret.
- Pass the token when initializing the widget:
window.OmniflowWidget.init({
workspace: "your-workspace-slug",
userToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
});Authenticated mode prevents impersonation and lets customers view past conversation history across sessions and devices.
Related Guides
| If you want to… | Read |
|---|---|
| Assign AI agents to your widget | Building Agents with Wayfinder |
| Set business hours for live chat | SLA & Business Hours |
| Connect WhatsApp and Slack | Messaging Integrations |