Skip to main content

Customize Appearance

Create a unique experience for your customers by completely customizing your chatbot's appearance! Configure colors, styles, and messages that reflect your brand identity and perfectly adapt to your website.

Current Context

The appearance is being edited in context: [CURRENT_CONTEXT]. Each context can have its own visual customization.

Page Layout​

The customization page is divided into two main sections:

🎨 Left Section: Settings​

Panel with all chatbot customization options

👁️ Right Section: Preview​

Real-time preview area of changes

Customize AppearanceCustomize Appearance

Advanced Mode​

Toggle Advanced Mode​

❌ Disabled (default): Basic customization options.
☑️ Enabled: Access to advanced and detailed settings

When to use Advanced Mode

Enable advanced mode when you need complete control over colors, spacing, and specific interface elements.

Chatbot Appearance​

Basic Information​

Bot Name​

  • Customization: Defines how the chatbot presents itself
  • Example: "Virtual Assistant", "Maya - Support", "Store Bot"
  • Impact: Appears in the chat header

Company Name​

  • Customization: Identifies your company in the chat
  • Example: "Company XYZ", "Virtual Store", "ABC Consulting"
  • Impact: Appears together with the bot name

AI Avatar​

  • Format: JPG or PNG
  • Maximum size: 5MB
  • Recommended dimensions: 1024x1024 pixels
  • Use: Visually represents your chatbot

Type and Positioning​

Chat Type​

  • Bubble (recommended): Circular icon that opens the chat
  • Box: Widget always visible on the page

Bubble Size​

  • Small: Discreet, less attention-grabbing
  • Medium (default): Balance between visibility and discretion
  • Large: More visible, draws more attention

Chat Position​

  • Top left: Top left corner of the screen
  • Top right: Top right corner of the screen
  • Bottom left: Bottom left corner of the screen
  • Bottom right (default): Most common and intuitive position

Display Modes​

Configure which visual elements will be displayed:

  • ☑️ Show user avatar: Displays user icon in messages
  • ☑️ Show AI avatar: Displays bot avatar in responses
  • ☑️ Show AI animation: Visual effect during processing
  • ☑️ Show bubble with AI animation: Animation in the main bubble

Advanced Settings (Advanced Mode)​

Margin​

  • Control: Adjustment slider
  • Function: Defines distance from screen edges
  • Values: 0px to 50px

Spacing​

  • Control: Adjustment slider
  • Function: Internal spacing of elements
  • Values: 0px to 30px

Border Radius​

  • Control: Adjustment slider
  • Function: Border rounding
  • Values: 0px (square) to 30px (very rounded)

Color Configuration​

Basic Colors​

Primary Color​

  • Default: #8E6EF4 (purple)
  • Use: Main buttons, highlights, header
  • Recommendation: Use your brand's main color

Font Color​

  • Default: #FFFFFF (white)
  • Use: Text in buttons and highlighted elements
  • Tip: Ensure adequate contrast with primary color
  • Default: #1B1C23 (dark gray)
  • Use: Chat window background
  • Important: Choose color that doesn't strain the eyes

Advanced Colors (Advanced Mode)​

When advanced mode is active, you have access to:

Interface and Buttons​

  • Opening button color
  • Error color: For error messages
  • Placeholder color: Example text in fields
  • Prompt font color: Text in typing area
  • Prompt button color: Send message button

Animations and Effects​

  • AI animation background color
  • AI animation icon color
  • Modal backdrop color: Dark background behind chat

Interface Elements​

  • Close button text color
  • Divider color: Separator lines
  • Link color: Clickable links in messages
  • Loading icon color: Wait indicator while chatbot responds

Messages​

  • User message background color
  • AI message background color
  • Prompt background color inside modal

Avatars​

  • Avatar background color
  • Avatar border color

Chatbot Personality​

Communication Profile​

Configure how your chatbot communicates with users:

Role​

Choose your chatbot's main function:

  • Salesperson (default): Focus on conversion and sales
  • Representative: General service and support
  • Teacher: Educational and explanatory

Personality​

Define the communication tone:

  • Confident: Secure and assertive
  • Relaxed: Casual and friendly
  • Informal: Close and personal language
  • Formal: Corporate and professional language
  • Dedicated: Attentive and committed
  • Nerd: Technical and detailed
  • Passionate: Enthusiastic and energetic
  • Irreverent: Fun and casual

Restrictive Instructions​

Configure important limitations for chatbot behavior:

Examples of Restrictions:​

  1. "Don't mention service prices or make quotes, always indicate contact with a specialist."
  2. "Don't make judgments or comparisons with competing products. Only emphasize the qualities of our products."
  3. "Don't respond with code in any programming language."

How to Create Good Restrictions:​

  • ✅ Be specific about what should not be done
  • ✅ Include alternatives when possible
  • ✅ Use clear and direct language
  • ✅ Test restrictions with real questions

Information and Messages​

System Messages​

Welcome Message​

  • Default: "Hello, how can I help you?"
  • Customization: User's first impression

Placeholder​

  • Default: "Tell me what you're looking for and I'll help you"
  • Function: Example text in the typing field

Advanced Messages (Advanced Mode)​

  • Close chat message: "Collapse conversation"
  • Error message: "Sorry, I didn't understand what you meant."

Example Questions​

Configure question suggestions to facilitate interaction:

Default Examples:​

  1. "Hello, I'd like to know about your portfolio"
  2. "What's your contact for quotes?"

Features:​

  • ➕ Add more questions: Up to 5 suggestions
  • ➖ Remove questions: Delete unnecessary suggestions
  • ✏️ Edit questions: Customize according to your business

Response Settings​

Response Profile​

  • Creative: More elaborate and varied responses
  • Balanced (default): Balance between creativity and precision
  • Precise: Direct and objective responses

Temporarily Disable Chat​

❌ Disabled: Chat working normally
☑️ Enabled: Chat temporarily offline

Available periods when enabled:

  • 4 hours: Quick maintenance
  • 24 hours: Extended maintenance
  • 7 days: Prolonged pause

Action Controls​

Main Buttons​

SAVE​

  • Function: Applies all changes
  • Important: Always save after making changes

UNDO CHANGES​

  • Function: Reverts to last saved version
  • Use: When you want to restart customization

Real-time Preview​

Preview Features​

Instant Visualization​

  • ✅ Immediate changes: See alterations in real time
  • ✅ Color testing: Check contrasts and harmony
  • ✅ Real simulation: Identical behavior to website
  • ✅ Message testing: See how settings look
UX Tip

A well-customized chatbot can significantly increase user engagement. Invest time in visual and communicative customization!

Important

Always test your settings in the preview before saving. Small adjustments can make a big difference in user experience.