Chat Modal

NOBI’S PRIMARY CHAT UX

Chat Modal

Nobi’s chat modal is an overlay that sits on top of your site and is how shoppers chat with the assistant. It’s a messaging system that shows shopper and assistant messages as they appear in a conversation, along with products and product groups recommended by the assistant.
notion image

What is the Chat Modal?

The chat modal is the primary interface for shopper-assistant interactions on your site. When activated through launch components (like search bars, buttons, or custom triggers), it opens as a bottom-anchored drawer that provides a seamless chat experience without navigating away from the current page.

Key Components

The chat modal consists of several distinct areas that work together to create the conversation experience:

Main Container

  • Chat Drawer: The outer container that holds all modal content
  • Backdrop: Semi-transparent overlay behind the modal
  • Close Button: Allows shoppers to dismiss the modal

Conversation Area

  • Chat Messages: Individual message bubbles from both shopper and assistant
  • Message Input: Text field where shoppers type their messages
  • Send Button: Submits shopper messages to the assistant

Product Display

  • Product Cards: Individual product recommendations with images, titles, and pricing
  • Product Carousels: Scrollable groups of related products
  • Quick Add Buttons: Allow adding products to cart directly from the modal

Interactive Elements

  • Suggestion Pills: Pre-written conversation starters and follow-up questions
  • Category Filters: Help narrow product recommendations
  • Loading States: Visual feedback during assistant processing

Modal Behavior

Opening & Closing

  • Opens from launch components (search bars, buttons, etc.)
  • Can be closed via the close button or clicking the backdrop
  • Maintains conversation state between sessions
  • Responsive design adapts to mobile and desktop viewports

Conversation Flow

  • Real-time message streaming from the assistant
  • Product recommendations appear inline with messages
  • Conversation history is preserved during the session
  • Smart suggestions help guide the conversation

Product Integration

  • Products are displayed with full details (images, prices, variants)
  • Direct integration with your site's cart functionality
  • Support for product collections and filtering
  • Seamless transition to product pages when needed

Customization Options

The chat modal is built with merchant customization in mind:

Visual Styling

  • Global CSS classes for targeting specific elements
  • CSS custom properties (variables) for consistent theming
  • Responsive behavior that works with your site's design
  • Support for custom colors, sizing, and spacing

Content Configuration

  • Customizable assistant personality and responses
  • Product recommendation settings
  • Category and collection integration
  • Custom messaging and conversation starters

Behavioral Settings

  • Auto-open conditions and triggers
  • Session management and conversation persistence
  • Integration with existing site navigation
  • Cart and checkout workflow customization

Getting Started

To begin customizing your chat modal:
  1. Review the styling options - Understand available CSS classes and variables
  1. Plan your design - Consider how the modal fits with your site's aesthetic
  1. Test thoroughly - Verify the experience works well on all devices
  1. Monitor performance - Ensure the modal enhances rather than disrupts the user experience
The following sections provide detailed guidance on styling specific components of the chat modal to match your brand and provide the best possible shopping experience for your customers.