Styling The Container

CUSTOMIZING THE MESSAGES WINDOW AND BACKDROP

Styling The Container

The backdrop and message container are the main overlay components that appear when your customers interact with Nobi's chat assistant. They create a modal-like interface containing the chatbot conversation area and close functionality. The drawer can be customized using global CSS classes and CSS custom properties (variables).
In this image, the overlay is the dark, translucent area surrounding the main chat window, the chatbot container is the white panel with rounded corners, and the close button is the “X” icon in the top right
In this image, the overlay is the dark, translucent area surrounding the main chat window, the chatbot container is the white panel with rounded corners, and the close button is the “X” icon in the top right

Global CSS Classes

The following global CSS classes are available for targeting specific elements within the chat drawer:
Class Name
Description
nobi-chatbot-backdrop
The semi-transparent backdrop/overlay that appears behind the drawer
nobi-chatbot-container
The main drawer container that holds the chat content
nobi-chatbot-close-button
The close button element in the top-right corner
nobi-chatbot-mobile
Applied to the container when viewed on mobile devices (conditionally added)
nobi-chatbot-inner
The inner paper element in the chatbot

CSS Variables

The following CSS custom properties can be used to customize the appearance of the chat drawer:
Variable Name
Description
Default Value
--nobi-chatbot-backdrop-color
Background color of the backdrop overlay
#000000AA
--nobi-chatbot-desktop-width
Width of the drawer on desktop viewports
85vw
--nobi-chatbot-border-radius
Border radius for the chatbot container and header
20px
--nobi-chatbot-close-icon-color
Color of the close button icon
#ffffff
--nobi-chatbot-close-icon-size
Size of the close button icon
35px

Usage Example

/* Customize the chat drawer appearance */
:root {
  /* Make the backdrop more opaque */
  --nobi-chatbot-backdrop-color: #000000DD;

  /* Make the drawer wider on desktop */
  --nobi-chatbot-desktop-width: 90vw;

  /* Use smaller border radius for a more angular look */
  --nobi-chatbot-border-radius: 8px;

  /* Change close button to black */
  --nobi-chatbot-close-icon-color: #000000;

  /* Make close button larger */
  --nobi-chatbot-close-icon-size: 40px;
}

/* Target specific elements with global classes */
.nobi-chatbot-container {
  /* Add custom box shadow */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.nobi-chatbot-mobile {
  /* Mobile-specific customizations */
  padding: 10px;
}