Documentation/Widget Integration/Customization

Widget Customization

Learn how to customize the appearance and behavior of your chat widget to match your brand.

Live Preview
See your customizations in real-time
SarahSarah
Hi! I'm here to help. What can I assist you with today?
Hello, I need help!

Customization Methods

Using the Admin Dashboard
The easiest way to customize your widget is through the admin dashboard
  1. 1Navigate to Admin → Clients → Settings
  2. 2Customize the appearance settings
  3. 3Save your changes
// Widget configuration in admin dashboard
{
  "bot_name": "Sarah",
  "bot_avatar_url": "https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah",
  "theme_color": "#0066CC",
  "intro_message": "Hi! I'm here to help. What can I assist you with today?"
}

Common Customizations

Mobile Responsive
@media (max-width: 640px) {
  .sensei-chat-panel {
    width: 100vw !important;
    height: 100vh !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
  }
}
Hide on Specific Pages
// Add to your page
if (window.location.pathname === '/checkout') {
  document.getElementById('sensei-widget-container')
    ?.style.setProperty('display', 'none');
}
Best Practices

Use high-quality square images (at least 200x200px) for avatars

Choose colors with sufficient contrast for accessibility

Keep intro messages friendly and under 100 characters

Test your customizations on both desktop and mobile devices