logo

Help Center

Quick Start Panel

Help Center
Installations
WebsitewordpressWordpresswebflowWebflowwixWixFramerFramerShopifyShopify
Actions
WoocommerceShopifyWebhooksRest API
Features
Knowledge ManagementAuthorized DomainsCustom DomainTeam ManagementLeadsExport Conversations
Customization
AppearanceCustom CSSAI ModelsAI PersonalitiesMarkdown
FAQs

Change custom chatbot appearance

Available Customization Options

Customize your chatbot's appearance to match your brand. Here are the options available in the Appearance settings:

Basic Information

  • Name: Set the chatbot name that appears in the chat header (e.g., "EchowiseAI")
  • Placeholder text: Customize the text shown in the message input field (e.g., "Type something...")
  • Welcome message: Create the first message users see when opening the chat. Supports Markdown formatting.
  • Bubble text: Text displayed above the chat button to encourage engagement

Visual Customization

  • Theme color: Choose the accent color for buttons, links, and active elements (default: #f29f67)
  • Avatar: Upload a custom avatar image for the chatbot (recommended: 400x400px, max 1MB)
  • Bubble icon: Upload a custom icon for the chat bubble button

Layout & Behavior

  • Button alignment: Position the chat button on the left or right side of the screen
  • Show branding: Toggle to display or hide EchowiseAI branding
  • Enable streaming: Allow real-time message streaming for faster responses

Advanced Customization

  • Custom footer: Add custom text in the chat footer area. Supports Markdown formatting.
  • Custom CSS: Add custom CSS styles for complete visual control over the chat widget
The list above is covers elements that can be styled using the dashboard inputs; you can also use custom CSS to completely change the appearance of your chatbot widget. Learn more here: Custom chatbot styling with CSS

How to Access Appearance Settings

To customize your chatbot's appearance, follow these simple steps:

  1. Log in to your EchowiseAI dashboard
  2. Navigate to /app/appearance or click "Appearance" in the left sidebar
  3. Configure the settings according to your brand requirements
  4. Click "Submit" to save your changes
Chatbot appearance configuration page

Tips for Best Results

  • Images: Use high-quality images (400x400px recommended) for avatar and bubble icons
  • Colors: Choose colors that match your brand and provide good contrast
  • Messages: Keep welcome messages concise and friendly
  • Testing: Preview your changes to ensure they look good on different screen sizes

These customization options help create a cohesive brand experience for your website visitors.