Customize Your Chatbot’s Visual Identity
Adapt your assistant’s appearance so it integrates perfectly with your website’s design and reflects your brand image.
Introduction
A chatbot that matches your website inspires trust and increases your visitors’ engagement rate. DoxyChat offers you comprehensive visual customization tools (Branding) so that the chat interface is not an add-on, but a natural extension of your business.
All visual modifications are made in the Appearance tab of your dashboard.
1. Change the Logo (Avatar)
The avatar is the “face” of your artificial intelligence. It appears in the widget launch bubble and next to each message sent by the bot.
To modify the avatar:
- Click on the current image area or on the Edit avatar button.
- Select an image file from your computer (JPG, PNG).
- Validate.
Design tips:
- Square image: Choose a square format (1:1 ratio) for optimal rendering in the circle.
- Logo or Human? Use your logo to reinforce the brand, or a human face photo (royalty-free) to make the interaction warmer and more personal.
2. Set the Primary Color
The primary color is the key element of graphic integration. It applies to three strategic places:
- The launch button (the floating bubble at the bottom of the page).
- The header of the conversation window.
- The message bubbles sent by the user.
To modify the color:
- Locate the Theme color section.
- Use the color picker to choose a shade visually.
- For perfect precision, copy-paste the HEX code from your brand guidelines (e.g.,
#FF5733) into the dedicated field.
3. Name and Welcome Message
The textual identity is the first thing your visitors will read even before asking a question.
The Chatbot Name
This is the title displayed at the top of the chat window.
- Functional approach: “Virtual Assistant”, “DoxyChat Support”.
- Personified approach: “Julie from Accounting”, “Leo”, “Product Expert”.
The Welcome Message
This is the tagline that appears automatically when the widget opens. It should encourage the user to start the conversation.
- Neutral example: “Hello, how can I help you?”
- Proactive example: “Welcome! I’m here to answer all your questions about our pricing and services.”
Real-time preview: All your modifications (logo, color, text) are immediately visible in the Preview window located on the right side of your configuration screen. This allows you to test the rendering before saving.
