Widget Overview
Customize and deploy your Goldilocks chat widget
The Widget page is where you customize the appearance and behavior of your chat widget and get the code to embed it on your website. All configuration is done on a single page with collapsible sections and a live preview.
What Is the Widget?
The widget is the chat interface your contacts see. It appears as a small button on your website that expands into a full chat window.
Accessing the Widget Page
- Navigate to Widget in the sidebar
- The configuration panel appears on the left
- A Live Preview appears on the right
As you make changes, the preview updates in real-time. Click Save Changes when you're ready to apply your configuration.
Configuration Sections
The Widget page is organized into collapsible sections. Click any section header to expand or collapse it.
Essentials
The most important settings for your widget:
- Bot Name - What your AI assistant is called
- Welcome Message - The initial greeting contacts see
- Brand Color - Your primary accent color (with preset options)
- Logo URL - Your brand logo displayed in the widget
- Input Placeholder - Text shown in the message input field
Theme & Colors
Visual styling beyond the basics:
- Gradient Blend - Add a secondary color for gradient effects
- Content Element Colors - Customize colors for:
- Steps (numbered indicators)
- Links (action buttons)
- Tips (helpful callouts)
- Warnings (warning callouts)
- Notes (info callouts)
Appearance
Position, theme, and typography:
- Position - Bottom right or bottom left
- Theme - Light, dark, or auto (follows system)
- Button Style - Rounded, square, or pill
- Animation - Slide, fade, or bounce
- Font Family - System default or popular web fonts
- Font Size - Small, medium, or large
Behavior
How the widget functions:
- Default AI Agent - Which persona handles conversations
- Auto-open Widget - Automatically open after a delay
- Sound Effects - Play sounds for messages
- Contact Tracking - Accept contact identifiers for personalization
Navigation Tabs
Configure the widget's tab navigation:
- Home Tab - Welcome screen with greeting, subtitle, and CTA button
- Help Tab - Contact form and help links
The navigation bar only appears when 2+ tabs are enabled. With only Messages visible, the widget opens directly to chat.
Advanced
For power users:
- Custom CSS - Add your own styles to further customize appearance
Live Preview
The right side of the page shows a live preview of your widget:
- See changes in real-time as you configure
- Click the widget bubble to open and interact
- Test actual conversations
- Verify persona behavior
The preview uses your real knowledge base, so you can test actual responses.
Getting Your Embed Code
- Click Get Embed Code in the top right
- A modal appears with your JavaScript snippet
- Copy the code
- Add it to your website before the closing
</body>tag
Learn more about embed options →
Developer Mode
Below the live preview, you can toggle Developer Mode to:
- See technical configuration details
- Test with specific persona settings
- View rich content color previews
- Access debugging information
Widget States
Minimized
When not in use, the widget shows as a small button:
- Usually bottom-right corner
- Shows your custom icon or default chat bubble
- Styled with your brand color
Open
When clicked, expands to show:
- Header with your logo/title
- Conversation area
- Input field
- Navigation tabs (if configured)
Mobile
On mobile devices:
- Opens full-screen
- Touch-optimized interface
- Responsive layout
Best Practices
Make It Visible
- Use contrasting colors for the button
- Position where users expect help
- Don't hide behind other elements
Match Your Brand
- Use your brand colors
- Add your logo
- Keep consistent with your site
Set Expectations
- Write a clear welcome message
- Indicate what the AI can help with
- Configure appropriate persona behavior
Test Before Launch
- Test on different devices
- Try various contact scenarios
- Verify responses are accurate
- Get team feedback
Related Documentation
- Branding Details - Deep dive into visual customization
- Embed Code - Installation instructions for various platforms
- Advanced Options - JavaScript API and programmatic control