Embed a fully customizable chat widget on your website with a single line of code.
WebChat allows you to embed a chat widget directly on your website. Visitors can interact with your flows without leaving your site, and conversations persist across page navigations and return visits.
Key Features
Creating a WebChat deployment is straightforward and doesn't require any external connections.
Click "Customize Widget" to open the visual customizer where you can configure colors, sizing, greeting messages, and more. See the Customization section for details.
After creating the deployment, click the "Embed" button to view and copy your embed code.
Add the embed code to your website, just before the closing </body> tag:
<script
async
src="https://universalchatbot.com/chatbot.js"
data-bot-url="https://universalchatbot.com/deployments/YOUR_ID/embed">
</script>The script loads asynchronously and won't block your page from rendering. Once loaded, a chat widget button appears in the corner of your page (bottom-right by default).
Configuration in Embed Code
All widget configuration is embedded directly in the script tag as data attributes. When you customize your widget in the dashboard, the embed code automatically includes all your settings.
The widget customizer provides a visual interface to configure every aspect of your chat widget's appearance and behavior.
The widget supports both light and dark themes with automatic detection and full color customization.
lightdarksystem*tailwind_class** Reactive: automatically updates when value changes
Start with one of our professionally designed presets:
Each theme (light and dark) has its own set of customizable colors:
primaryColorprimaryHoverColoraccentColorheaderColorlauncherColorbotMessageBackgroundColorbotMessageTextColorbotMessageTextSecondaryColoruserMessageBackgroundColoruserMessageTextColoruserMessageTextSecondaryColorbackgroundColorsurfaceColorsurfaceTextColorborderColorFont FamilyFont SizeBorder RadiusTitleSubtitleWidget WidthWidget HeightButton SizePositionShadow StrengthBackdrop BlurAnimationsConfigure an automatic greeting that appears when visitors first see the widget:
Greeting MessageGreeting DelayShow GreetingOptionally collect user information before or during the conversation. This data becomes available as variables in your flow.
neverbefore_chatafter_first_messageSelect which fields to collect:
Each field can be marked as required or optional. Users can skip optional fields.
Accessing Collected Info
Collected user information is available in your flow via {{@request.user.name}}, {{@request.user.email}}, and {{@request.user.phone}}.
Control the widget programmatically using the global UCBChatbotWidget object.
UCBChatbotWidget.open()UCBChatbotWidget.close()UCBChatbotWidget.toggle()UCBChatbotWidget.isOpen()UCBChatbotWidget.setUnreadCount(n)// Open chat when user clicks a custom button
document.getElementById('help-button').addEventListener('click', () => {
UCBChatbotWidget.open();
});
// Open chat automatically after 30 seconds
setTimeout(() => {
if (!UCBChatbotWidget.isOpen()) {
UCBChatbotWidget.open();
}
}, 30000);Wait for Widget Ready
The UCBChatbotWidget object is available after the script loads. If you need to call methods immediately, wait for the load event or check if the object exists.