• Blog
  • Documentation
  • Pricing
  • FAQ
  • Contact
Sign InSign Up

Here you can add a description about your company or product

© Copyright 2025 Makerchat. All Rights Reserved.

About
  • Blog
  • Contact
Product
  • Documentation
Legal
  • Terms of Service
  • Privacy Policy
  • Cookie Policy
Back to Documentation

Guides

Quick Start
Get up and running in minutes
Team Management
Invite and manage team members
Embedding
Add chatbot to your website
Customization
Customize colors and branding

Customizing Your Chatbot

Complete guide to customizing colors, branding, text, and advanced settings for your chatbot.

Overview

Customize your chatbot to match your brand identity with our comprehensive design and settings options. All changes are applied in real-time and work across all devices.

Design Settings

Colors & Branding

Primary Color

Choose your brand's primary color for buttons and highlights.

#3B82F6

Text Color

Set the text color for buttons and interface elements.

#FFFFFF

Logo & Images

Custom Logo

Upload your company logo to replace the default icon.

Click to upload logo

PNG, JPG up to 2MB

Position

Choose where the chatbot appears on your website.

Text Customization

Form Text & Labels

Text displayed on the main submit button

Main heading of the application form

Message shown after successful submission

Advanced Settings

Legal & Compliance

Link to your privacy policy

Link to your terms of use

File Upload Settings

PDF
DOC
DOCX
+ Add Type

Live Preview

See Your Changes

All changes are applied in real-time. Use the preview to see how your chatbot will look to visitors.

A

Job Application

Preview of your customized chatbot

Advanced CSS Customization

Custom CSS

For advanced customization, you can add custom CSS to override default styles.

/* Custom chatbot styles */
.chatbot-widget {
  --primary-color: #your-brand-color;
  --text-color: #ffffff;
  --border-radius: 8px;
}

.chatbot-button {
  background-color: var(--primary-color);
  color: var(--text-color);
  border-radius: var(--border-radius);
}

/* Override specific elements */
.chatbot-form input[type="text"] {
  border-color: #your-accent-color;
}

.chatbot-form button:hover {
  opacity: 0.9;
}

⚠️ Important Notes

  • • CSS changes may be overridden by widget updates
  • • Test thoroughly across different browsers
  • • Use specific selectors to avoid conflicts

Best Practices

Design Guidelines

  • Use high contrast colors for better readability
  • Keep logos simple and recognizable at small sizes
  • Test on mobile devices for responsive design
  • Maintain consistency with your website's design

Performance Tips

  • Optimize logo images (recommended: 200x200px or smaller)
  • Use web-safe fonts for better compatibility
  • Test loading times on slow connections
  • Keep custom CSS minimal for better performance

Troubleshooting

Changes not appearing

  • • Clear your browser cache and refresh the page
  • • Check that you've saved your changes
  • • Verify the widget script is loading correctly

Logo not displaying

  • • Ensure the image file is in a supported format (PNG, JPG)
  • • Check that the file size is under 2MB
  • • Verify the image URL is accessible

CSS not applying

  • • Use more specific CSS selectors
  • • Add !important to override default styles
  • • Check for syntax errors in your CSS