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

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.