Chat
The Chat Channel in MagicBlocks lets you bring your AI Agent to life on your website.
Here, you can:
- Create and manage Chat Appearances (your agent’s visual identity).
- Customize the chat design, logo, and welcome behavior.
- Preview how the chat widget looks before publishing.
Each Chat Appearance acts as a separate visual configuration — allowing you to maintain distinct branding and style per project or domain.
Your Chat Appearance defines your AI Agent’s personality in visual form — it’s what users see when they open your chatbot.
In this section, you’ll design the chat widget, adjust its layout, set brand colors, and preview your changes instantly before going live.
MagicBlocks gives you two customization modes:
- Advanced → Quick setup for theme and brand color.
- Customize → Detailed styling and fine-tuning of every chat element.
When to Use
Use Chat Appearance customization when you want to:
- Match your chat widget with your website’s design system.
- Give each workspace or brand its own chat look.
- Personalize chat tone and user experience.
- Add accessibility or legal disclaimers for compliance.
How It Works
Access Chat Appearance
Go to Channels › Chat, then click your chat appearance name.
Inside the Chat Appearance settings, open the Style section.
Advanced Settings
Under the Advanced tab, you can control your global visual theme and color identity:
Setting | Description |
|---|---|
Chatbot Theme Color | Choose between Light and Dark modes for your chat interface. |
Brand Color Palette | Select your main brand color for chat bubbles, buttons, and highlights. |
Custom Color Code | Input a HEX color (e.g.,
) to perfectly match your brand. |
Tip: Choose contrasting text and bubble colors for readability and accessibility.
Customize Settings
Switch to the Customize tab for detailed style control.
Here’s what each section allows you to adjust:
Section | Description |
|---|---|
Main Display | Configure your chat header — upload your logo , set AI name , choose background color, and define welcome layout. |
Mini Popup Widget | Customize your AI’s launcher bubble (icon shape, position, hover animation, and label text). |
Chat Messages | Choose bubble styles, colors, spacing, and whether to show typing indicators. |
Send Style | Adjust the send button’s shape, icon, and color for better user experience. |
Fonts | Select font family and size to match your website’s typography. |
Buttons | Control button shapes, padding, and hover effects for options like “Your company” or “What can you do for me?” |
Chat Input | Edit placeholder text (e.g., “Ask me...”), input background color, and border radius. |
Welcome Disclaimer Message | Add or edit a disclaimer shown under your first chat message — ideal for compliance or transparency. |
Legal Disclaimer | Write a persistent footer note (e.g., “I’m an AI agent and may not be 100% accurate.”). |
Label Editing | Modify or translate standard chat labels (e.g., “End Chat”, “Send”). |
CSS Customization | Add custom CSS rules for advanced styling (for developers or brand teams). |
Live Preview
Use the Preview panel on the right to see your changes in real time.
Your preview automatically updates as you switch themes, colors, or layout options.
Example:
In the “Beach Club AI” preview:
- Header uses the brand turquoise color.
- Welcome message appears instantly.
- Button labels (“Your company”, “Your team”, “How can I book?”) use the selected brand palette.
- The disclaimer message appears below with subtle gray text.
💡 Pro Tip: Test both Light and Dark modes to ensure your text remains readable and consistent.
After Customizing
Once you’re satisfied with the design:
- Click Save.
- Return to Going Live › Chat › Embed Script.
- Deploy the chat widget on your website or app.
Changes made to your appearance will update instantly on all embedded sites — no need to re-install the script.
Best Practices
- Keep your launcher icon consistent with your site’s color scheme.
- Write a short, friendly welcome message (under 120 characters).
- Include a legal disclaimer if your AI handles customer or financial data.
- Use rounded corners and soft tones for a conversational feel.
- For high-contrast sites, prefer the Dark theme for accessibility.
Related Articles