Wonderchat Documentation
  • 👋Welcome to Wonderchat
  • Overview
    • ⚖️Pricing
    • ✨Our Features
    • 🔍Content Overview
  • Setup Guides
    • 📪Setting up your Chatbot
      • Creating Your First Chatbot
      • How to set-up a Spontaneous Greeting Message
      • Setting up Multi-lingual Chatbots
      • How to Pick Between Source Citations Options For Your Chatbot
      • Add Suggested Questions to your Chatbot
      • Selecting Between AI models for your chatbots
      • How to Crawl and Update Private Sites
      • How to Customize Your Notification Settings for Your Chatbot
    • 🤖Training your Chatbot
      • How to add or delete webpages or websites from your chatbot
      • How to manually update your Chatbot website link for Re-Crawling
      • How to use PDF and website links simultaneously as data sources for your chatbot
      • How to upload Videos and Audio files into Wonderchat
      • How to add or delete PDFs from your chatbot
      • Writing Support Documentation for AI Chatbots
    • 🖥️Adding your Chatbot to your website
      • How to Embed a Chat Widget
      • How to Embed a Chat Screen
      • Embedding for Wix
      • Embedding for Shopify
      • Embedding for WordPress
      • Embedding for Drupal
      • Embedding for Webflow
    • ✍️Correcting your Chatbot
      • How to Set Up Chatbot Corrections
      • How to Resolve Pending Corrections
      • Export and Import Corrections
    • 💅Styling your Chatbot
      • How to Adjust Chat Widget Size
      • Customizing Your Chatbot's Style and Color
      • Using Custom CSS to style your chatbot
    • 👨‍💼Human Handover for your Chatbots
      • AI Chatbot Handover to Human Support via Email
      • How to Set Up Live Chat within Wonderchat
    • 📇Collecting Leads with your Chatbot
      • How to set-up leads generation sequences
      • How to collect user names, emails and phone numbers from users
      • Turning on email notifications for every new lead collected
      • [For Enterprise Users] How to Route Chats by Topic to Sales Representatives
    • 🤝Sharing your Chatbot
      • How to Share Your Chatbot Publicly
      • How to Add Team Members to Wonderchat
    • 🔋Using Chatbot Tools
      • Set-up Custom Chatbot Tools
    • ⚙️Adding Chatbot Workflows
      • Set-up Chatbot Workflows
  • Integration Guides
    • Active Campaign
    • Calendly
    • Freshdesk
    • HubSpot
      • Adding Wonderchat Tags to Hubspot
    • Shopify
    • Slack
      • Slack (via Zapier)
    • Twilio
    • WhatsApp
    • Zapier App
    • Zendesk
    • Google Drive
    • Microsoft Sharepoint
    • Facebook Messenger
    • Discord
  • FAQ
    • How To Exclude VAT/GST Charge at Checkout
    • How To Exclude VAT/GST Charge after Checkout (via Tax Refund)
    • How to Apply a Promo Code at Checkout
    • Upgrading Wonderchat Subscription
Powered by GitBook
On this page
  • Step 1: Pick a Profile Picture
  • Step 2: Change Your Chat Widget Color
  • Step 3: View your New Changes

Was this helpful?

  1. Setup Guides
  2. Styling your Chatbot

Customizing Your Chatbot's Style and Color

A Guide on How to Customize and Style your Chatbot.

PreviousHow to Adjust Chat Widget SizeNextUsing Custom CSS to style your chatbot

Last updated 8 months ago

Was this helpful?

Chatbots are essential for enhancing customer engagement and service. But beyond functionality, it's important that your chatbot aligns with your brand visually. In this guide, we'll show you how to style your chatbot and select a color theme that complements your branding.


Step 1: Pick a Profile Picture

The first step to styling your chatbot would be to pick a suitable profile photo. To do so, you can go to Dashboard > Actions (⋮) icon > Edit Chatbot.

In the Chatbot Settings page, under the Basic Details tab > click on Edit Logo

We recommend that you upload a photo with square dimensions, in the likes of 64px by 64px so that the photo will fit well within the profile picture frame.

Step 2: Change Your Chat Widget Color

Now that you have selected the profile photo of your Chat Widget, you can now select a color for it.

Under the Chatbot Colour section, click on the ✎ Edit to open the color picker. Select a new color for your chatbot by:

  • Option 1: Picking from the color swatch, or

  • Option 2: Input your own custom hex code.

Once you decide on your profile picture and chat widget color, you can click on 'Save' to apply your changes.

Step 3: View your New Changes

To view the new customization changes of your chatbot, go to Dashboard > Actions (⋮) icon > View Chatbot


If you have any more questions, feel free to reach out to us at support@wonderchat.io

💅
Click on "Edit Chatbot"
Click 'Save' to apply your changes.
Choose your chat widget color
Click on "View Chatbot"
View the changes on your New Icon + Color Theme