Styling Message Elements

You can customize Nobi’s messaging elements in the same way that you customize the rest of Nobi, by targeting specific CSS variables or by targeting classes that we’ve applied to the different elements in the chat assistant.

Global CSS Classes

Button	Class Name	Description
New Chat	`nobi-new-chat-button`	The button that erases the current chat history and starts a new conversation
Send Message	`nobi-send-message-button`	The icon button next to the input textbox that sends a new message
Show More Products	`nobi-show-more-products-button`	The button that loads additional products after initial results have been shown
Show More and Show Less	`nobi-expandable-fade-button`	The button that expands or contracts product categories

CSS Variables

The following CSS custom properties are available for styling Nobi
buttons:

Variable Name	Description	Default Value
`--nobi-button-background`	Button background color	`#114985`
`--nobi-button-text-color`	Button text color	`#fff`
`--nobi-button-hover-background`	Button background color on hover	`#143557`
`--nobi-button-hover-text-color`	Button text color on hover	`#fff`
`--nobi-button-border-radius`	Button border radius	`20px`
`--nobi-button-font-family`	Button font family	`inherit`

Usage Example


:root {
  --nobi-button-background: #ff6b35;
  --nobi-button-text-color: #ffffff;
  --nobi-button-hover-background: #e55a2b;
  --nobi-button-hover-text-color: #ffffff;
  --nobi-button-border-radius: 8px;
  --nobi-button-font-family: 'Arial', sans-serif;
}

Logo

Global CSS Classes

Class Name	Description
`nobi-logo-container`	The div wrapper around your brand’s logo in the messages container

CSS Variables

Variable Name	Description
`--nobi-chatbot-icon-background`	The background color of the logo’s icon
`--nobi-chatbot-icon-width`	The width AND height of the button (used by both dimensions to create a circular element)

Styling Message Elements Global CSS Classes Global CSS Classes CSS Variables Usage Example Logo Global CSS Classes CSS Variables