Styling The Container | Chat Modal

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

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;
}

New Chat Button

The New Chat button appears in two locations:

Desktop: Above the chat input field

Mobile: In the header as a circular icon button

Global CSS Classes

Class Name	Description
`nobi-new-chat-button`	Both desktop and mobile New Chat buttons
`nobi-new-chat-above-input`	Desktop button specifically (above input field)

CSS Variables

Variable Name	Default	Description
`--nobi-new-chat-button-color`	`#70a4cd`	Button background color
`--nobi-new-chat-button-hover-color`	`#4b85b3`	Button background on hover
`--nobi-new-chat-button-text-color`	`#ffffff`	Text and icon color
`--nobi-new-chat-button-font-size`	15px	Button text size (desktop)
`--nobi-new-chat-button-icon-size`	19px (desktop), 24px (mobile)	Icon size
`--nobi-new-chat-button-border-radius`	16px	Corner rounding (desktop)

Styling The Container And Its Elements Global CSS Classes CSS Variables Usage Example New Chat Button Global CSS Classes CSS Variables