Widget Customization
Customize your chat widget's appearance, branding, and user experience to perfectly match your website and brand identity.
Why Customize Your Widget?
Your chat widget is often the first point of contact between your business and visitors. Customizing it to match your brand creates a seamless, professional experience that feels native to your website. Control everything from position and theme to welcome messages and branding.
A well-customized widget builds trust, encourages engagement, and makes visitors feel like they're talking to your brand, not a generic chatbot.
Accessing Widget Settings
To customize your widget, navigate to the Agents page and click on the agent you want to customize. In the agent detail page, click the Widget tab at the top. This is where all your widget customization options live.
You'll see your widget script at the top, followed by all available customization settings below. Any changes you make here will be reflected in your live widget after you save.
Widget Position
Choose where your chat widget appears on your website. Currently, OpenSpeechAI supports Bottom Right and Bottom Left positioning. Most websites use Bottom Right as it's the standard placement visitors expect, but Bottom Left works well if you have other elements (like a help icon or notification badge) occupying the right corner.
The widget automatically adjusts its position based on screen size and orientation, ensuring it looks great on desktop, tablet, and mobile devices.
Theme
Control how your widget adapts to your website's design with three theme options:
Auto (System) - The widget automatically matches your visitor's system preference. If they use dark mode on their device, the widget appears in dark mode. If they prefer light mode, it switches to light. This is the recommended setting for most websites as it respects user preferences and reduces eye strain.
Light - Forces the widget to always use a light theme with a white background and dark text, regardless of the visitor's system settings. Use this if your website has a light design and you want consistency.
Dark - Forces the widget to always use a dark theme with a dark background and light text. Perfect for websites with dark designs or developer tools where dark mode is preferred.
Header Text and Description
The header appears at the top of your chat widget and is the first thing visitors see when they open it.
Header Text is typically your company or brand name. Keep it short and recognizable. Examples include "Support Team", "Acme Inc", or "Customer Success". This helps visitors immediately understand who they're chatting with.
Header Description is an optional subtitle that appears below your header text. Use it to set expectations or add context. Good examples include "We typically reply in a few minutes", "Here to help 24/7", or "Ask us anything". Keep it friendly and reassuring. This field is optional, so leave it empty if you prefer a cleaner header.
Welcome Message
The welcome message greets visitors when they first open your chat widget and the conversation is empty. It sets the tone for the entire interaction and encourages visitors to start chatting.
A great welcome message is warm, helpful, and specific to your use case. Instead of generic greetings like Hello, try something like Hi there 👋 How can we help you today? or Welcome! What brings you here today?. You can include emojis to make it feel more personal and friendly.
Think of this as your agent's opening line. Make it count.
Logo
Display your company logo in the chat widget to reinforce brand identity and build trust. Enter the full URL to your logo image. The logo appears in the widget header next to your header text.
Your logo should be a square image (1:1 aspect ratio) for best results. Common formats like PNG, SVG, JPG, and WebP all work. SVG is recommended for crisp display at any size. The widget automatically scales and optimizes your logo for different screen sizes.
Make sure your logo URL is publicly accessible. If visitors can't load the image, they'll see a broken image icon instead.
Suggested Messages
Suggested messages are quick-reply buttons that appear on the empty chat screen, right below your welcome message. They help visitors start a conversation with a single click, removing the friction of typing their first message.
You can add up to 3 suggested messages. Choose messages that represent the most common questions or actions your visitors take. Good examples include How does pricing work?, Schedule a demo, Get in touch, or Learn about features.
To add a suggested message, type it in the input field and click Add. The message will appear as a clickable button in your widget. You can remove any message by clicking the X icon next to it.
Keep suggested messages short, clear, and action-oriented. They should feel like natural conversation starters, not marketing copy.
Branding
The Show "Powered by" Branding toggle controls whether OpenSpeechAI branding appears at the bottom of your chat widget. By default, this is enabled for all users.
If you're on a Pro, Business, or Enterprise plan, you can disable this toggle to remove OpenSpeechAI branding and create a fully white-labeled experience. Free plan users will see this option disabled, as white-labeling is a premium feature.
Removing branding gives you complete control over your widget's appearance and ensures visitors only see your brand throughout the entire chat experience.
Preview Your Changes
Before saving your customization settings, use the Preview tab to see exactly how your widget will look and behave on your website. Click the Preview tab next to the Widget tab to open an interactive preview.
The preview shows your widget with all your current settings applied. You can interact with it, send test messages, and click suggested messages to see the full experience your visitors will have. This lets you catch any issues with text length, logo sizing, or color contrast before going live.
Make adjustments in the Widget tab, then switch back to Preview to see your changes. Once you're happy with how everything looks, click Save Changes in the Widget tab to apply your customization.
Tips for Great Widget Design
Match your brand - Use your actual company name, logo, and brand voice in the header text and welcome message. Consistency builds trust.
Keep it simple - Don't overthink your welcome message or suggested prompts. Clear and friendly beats clever every time.
Test on mobile - Most visitors will see your widget on mobile devices. Use the preview to check how it looks on smaller screens.
Update seasonally - Consider updating your welcome message or suggested prompts for special promotions, new product launches, or seasonal campaigns.
Use real visitor questions - Check your Conversations page to see what visitors actually ask, then turn those into suggested messages.
Consider your audience - A playful tone with emojis works for consumer products, while B2B or enterprise tools might prefer professional, straightforward messaging.
We're constantly improving OpenSpeechAI based on user feedback. If you need additional customization options like custom colors, fonts, or advanced styling, let us know.
Last updated: November 18, 2024
Knowledge Base
Train your AI agent on your content by uploading files, crawling websites, and adding custom knowledge to make your agent smarter and more helpful.
Widget Security
Protect your widget from unauthorized use and control which websites can embed your chat widget using origin whitelisting and security best practices.