Customizing Appearance

Introduction

Your chatbot should feel like a natural part of your website. OrcaHive offers extensive customization options to match your brand identity and create a seamless user experience.

Widget Appearance

Colors & Theme

Customize your chatbot's color scheme to match your brand:

// Customize colors
orcahive('init', {
  botId: 'your-bot-id',
  theme: {
    primaryColor: '#0066FF',
    secondaryColor: '#00D4FF',
    backgroundColor: '#FFFFFF',
    textColor: '#1F2937',
    mode: 'light' // 'light', 'dark', or 'auto'
  }
});

Widget Position

Choose where your chatbot appears on your website:

Avatar & Branding

Personalize your bot's identity:

• Bot Avatar: Upload a custom icon or logo (PNG, SVG, 512x512px recommended)
• Bot Name: Give your bot a friendly name
• Company Logo: Display your logo in the chat header
• Powered By Badge: Show or hide "Powered by OrcaHive" (Pro+)

Messages & Behavior

Welcome Message

Customize the first message users see:

orcahive('init', {
  botId: 'your-bot-id',
  messages: {
    welcome: 'Hi! 👋 I\'m here to help. What can I do for you today?',
    placeholder: 'Type your message here...',
    offline: 'We\'re currently offline. Leave a message!',
    error: 'Oops! Something went wrong. Please try again.'
  }
});

Suggested Questions

Help users get started with quick reply buttons:

orcahive('init', {
  botId: 'your-bot-id',
  suggestedQuestions: [
    'What are your business hours?',
    'How can I track my order?',
    'What\'s your return policy?',
    'Do you offer international shipping?'
  ]
});

Auto-Open Settings

Control when the chat widget opens automatically:

• On Page Load: Open immediately when page loads
• After Delay: Open after X seconds
• On Scroll: Open when user scrolls down
• On Exit Intent: Open when user is about to leave
• Never: Only open when user clicks

Advanced Styling

Custom CSS

For complete control, add custom CSS:

/* Customize widget button */
.orcahive-widget-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.orcahive-widget-button:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.6);
}

/* Customize chat window */
.orcahive-chat-window {
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

/* Customize message bubbles */
.orcahive-message-bot {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-radius: 18px 18px 18px 4px;
}

.orcahive-message-user {
  background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
  border-radius: 18px 18px 4px 18px;
  color: white;
}

Mobile Optimization

Your chatbot automatically adapts to mobile devices, but you can customize mobile-specific settings:

• Full Screen Mode: Open chat in full screen on mobile
• Mobile Position: Different position for mobile devices
• Touch Gestures: Swipe to close, pull to refresh
• Mobile Button Size: Larger tap target for mobile

Preview & Test

Before deploying, preview your customizations:

1. Go to the "Customize" tab in your bot dashboard
2. Make your changes in the customization panel
3. See live preview on the right side
4. Test on different devices using the device selector
5. Click "Save Changes" when satisfied