Documentation/Widget Integration/Styling

Widget Styling

Customize the appearance of the chat widget with CSS.

CSS Class Reference
Available CSS classes for styling the widget
ClassDescription
.sensei-widget-containerMain container for the entire widget
.sensei-chat-buttonThe floating chat button
.sensei-chat-panelThe chat panel/window
.sensei-chat-headerHeader area with bot name
.sensei-chat-messagesMessages container
.sensei-message-userUser message bubbles
.sensei-message-botBot message bubbles
.sensei-chat-inputInput area at bottom

Custom CSS Examples

Change Widget Position
/* Move to bottom-left */
.sensei-chat-button {
  right: auto !important;
  left: 20px !important;
}

.sensei-chat-panel {
  right: auto !important;
  left: 20px !important;
}
Customize Colors
/* Custom message colors */
.sensei-message-user {
  background: #4F46E5 !important;
}

.sensei-message-bot {
  background: #F3F4F6 !important;
  color: #1F2937 !important;
}
Resize Widget
/* Larger chat panel */
.sensei-chat-panel {
  width: 420px !important;
  height: 650px !important;
}

/* Full screen on mobile */
@media (max-width: 640px) {
  .sensei-chat-panel {
    width: 100vw !important;
    height: 100vh !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
  }
}