Style Your Chatbot to Match Your Brand

1 Prerequisites

Before customizing your chatbot's appearance, you need:

A SoundMinds.ai account - See our Signup Guide
A chatbot created (see our Create Your First Chatbot guide)
A Web Integration configured (automatically created with new chatbots)

2 Access appearance settings

Navigate to your chatbot's Settings page and click the Appearance tab.

You'll see the Appearance configuration interface with:

Three configuration tabs: Colors, Layout, and Content
Live Preview panel: On the right side, showing changes in real-time
Status badges: Showing "Using Global Defaults", "Customized", or "Unsaved Changes"

The Live Preview updates automatically as you make changes, so you can see exactly how your widget will look before saving.

3 Customize colors

The Colors tab has two sections to help you create a cohesive color scheme.

General Colors

Primary Color: Main accent color used for buttons, links, and the chat launcher button (default: #4F46E5)
Background Color: Widget background color - Phase 1 feature (default: #FFFFFF)
Text Color: Main text color throughout the widget - Phase 1 feature (default: #1F2937)
Border Color: Color for borders and dividers - Phase 2 feature (default: #E5E7EB)

Message Bubble Colors

User Bubble Color: Background color for user messages (default: #4F46E5)
User Bubble Text Color: Text color for user messages (default: #FFFFFF)
Assistant Bubble Color: Background color for chatbot responses (default: #FFFFFF)
Assistant Bubble Text Color: Text color for chatbot responses (default: #111827)

How to change colors

Click the color picker (square) next to any color field to open a color palette
Or type a hex color code directly in the input field (e.g., #4F46E5)
Changes appear immediately in the Live Preview on the right

Tip: Use your brand's primary color for the Primary Color and User Bubble Color for a cohesive look that reinforces your brand identity.

4 Adjust layout and dimensions

The Layout tab controls the sizing, positioning, and typography of your widget.

Dimensions

Widget Width: Width of the chat window (300-500px, default: 384px)
Border Radius: Roundedness of corners (0-24px, default: 8px)

Position and Font

Default Position: Where the widget appears on your website - Bottom Right (default) or Bottom Left
Font Family: Choose from System Default, Inter, Roboto, Open Sans, or Poppins

Tip: The default widget width of 384px works well for most websites. Increase it for sites with more content-heavy conversations or if you need more space for complex interactions.

5 Configure content and branding

The Content tab has three sections for customizing text, branding elements, and behavior.

Messages

Input Placeholder Text: Text shown in the message input field before the user types (default: "Type your message...")

Branding

Company Name: Displayed in the widget header. Falls back to your chatbot name if left empty.
Logo URL: URL to your logo/avatar image displayed in the header. Must be a publicly accessible URL.
Company Website URL: Makes the "Powered by" text link to your website - Phase 2 feature

Behavior

Enable Animations: Toggle smooth transitions and hover effects (default: enabled)
Show Typing Animation: Show a typing indicator when the chatbot is generating a response - Phase 2 feature (default: enabled)

Tip: For the logo, use a square image (at least 64x64 pixels) with a transparent background for best results. PNG format works well for logos with transparency.

6 Preview your changes

The Live Preview panel on the right side of the screen updates in real-time as you make changes to any appearance setting.

The preview shows:

The chat window with your customized colors, fonts, and layout
Sample messages showing both user and assistant bubble styles
The launcher button with your primary color applied
Your logo and company name if configured

The preview is scaled down to fit the interface, but it shows accurate colors, fonts, and proportions that match exactly what visitors will see on your website.

7 Save and apply changes

Click the Save Changes button in the top-right corner to apply your customizations.

Important points about saving:

The button is only enabled when you have unsaved changes
After saving, the "Unsaved Changes" badge changes to "Customized"
Changes apply immediately to your live widget
No need to update your embed code - changes are automatic
If you navigate away with unsaved changes, you'll see a warning prompt

Important: Changes take effect immediately after saving. If you're testing on a live site, consider testing in a staging environment first to avoid showing incomplete customizations to your visitors.

8 Reset to global defaults (optional)

If you want to remove all custom appearance settings and start fresh, click the Reset to Global button.

What happens when you reset:

Your chatbot will use the platform's global default appearance
All custom colors, layout, and content settings are removed
A confirmation dialog appears before resetting to prevent accidental data loss
After reset, the badge changes to "Using Global Defaults"

This is useful if you want to start fresh with a clean slate or if you prefer the default styling provided by the platform.

9 Export and import settings

The export and import features allow you to backup your settings or copy them to other chatbots.

Export settings

Click the Export button to download your current appearance settings as a JSON file
The file includes all color, layout, content, and behavior settings
Useful for backing up settings or copying to another chatbot

Import settings

Click the Import button and select a previously exported JSON file
Settings load into the form but are NOT automatically saved
Review the changes in the Live Preview to ensure they look correct
Click Save Changes to apply the imported settings

Tip: Use export/import to quickly apply the same branding across multiple chatbots, ensuring a consistent look and feel throughout your organization.