Visual Widget Builder
Customize your chat widget to match your brand perfectly. No code required—just drag, drop, and see changes in real-time.
What is the Widget Builder?
The Visual Widget Builder is a no-code tool that lets you customize every aspect of your chat widget. Change colors, position, size, behavior, and branding—all with live preview and instant updates.
Appearance
- • Colors & theme
- • Position & size
- • Button customization
- • Typography & fonts
Behavior
- • Greeting messages
- • Auto-open settings
- • Typing indicators
- • File uploads & emojis
Branding
- • Custom logo & avatar
- • Widget title & subtitle
- • Remove "Powered by"
Advanced (Pro)
- • Custom CSS
- • Domain restrictions
- • Custom metadata
How to Use the Widget Builder
Access the Builder
Navigate to Agents → Select your agent → Widgets → Create Widget or edit an existing one → Open Builder.
Customize in Real-Time
Use the left panel to adjust appearance, behavior, and branding. The right panel shows a live preview.
- Change colors using the color picker
- Drag sliders to adjust size and position
- Toggle features on/off
- Preview changes instantly
Get Embed Code
Once satisfied, click "Get Embed Code" and choose your integration method: Script tag, React component, npm package, or iframe.
Deploy to Your Site
Copy the code and paste it into your website before the closing </body> tag. Your widget goes live instantly.
Multiple Widgets Per Agent
Create different widget configurations for different pages or user segments. Each widget can have unique styling and behavior.
Widgets Allowed by Plan
- Free1 widget/agent
- Starter3 widgets/agent
- Pro10 widgets/agent
- Business & EnterpriseUnlimited
Start customizing your widget
Login to your dashboard to access the Visual Widget Builder