Customization

Your chatbot should feel like a natural extension of your brand. Lumi provides comprehensive customization options for appearance, behavior, and user experience.

Visual Theme

Access the Theme tab in your widget settings to control colors and branding.

Color Palette

The primary theme color defines your header background and overall brand presence. Choose a color that matches your website's design system. The interface automatically calculates text color for optimal readability, showing you the contrast ratio and rating (Excellent, Good, or Poor based on WCAG standards).

If the auto-calculated text color doesn't match your vision, you can override it manually. Just be aware of the contrast ratio—anything below 4.5:1 may be difficult to read.

The bubble color controls the background of user messages in the chat. By default, this matches your theme color, but you can set it independently for more nuanced designs.

Shadows and Depth

Modern flat design is popular, so we've included a "Disable Shadows" option that removes all drop shadows from the widget. Enable this for a cleaner, more minimalist appearance.

Branding Assets

Bot Avatar

Upload a custom avatar that appears next to bot messages. Recommended size is 40x40 pixels, though larger images will be automatically scaled. Accepted formats include JPG, PNG, SVG, and WebP, with a maximum file size of 2MB.

To upload, click the upload button, select your image, and it saves automatically. The avatar appears immediately in the chat interface.

Bot Identity

Set your bot's name in the header—this could be "Support Assistant", your company name, or a friendly persona name like "Alex". This name appears in the chat header and helps establish the bot's identity.

Avatar Display Options

You can show the bot avatar inside user message bubbles rather than (or in addition to) next to messages. This is controlled by the "Bubble Avatar" toggle.

The online indicator is a small green dot that signals the bot is ready to respond. You can display this on the avatar itself, in the header, or both. The online status text defaults to "Online" but can be customized to anything you like—"Available", "Active", "Ready to help", etc.

Proactive Messaging

Proactive messages greet visitors before they even open the chat, increasing engagement and guiding users toward asking questions.

Basic Setup

Navigate to Proactive Messages settings. Enter the message you want displayed—something like "👋 Hi! Need help finding something?" works well. You can add multiple messages, and the system will randomly select one each time a user visits.

Set the delay in seconds before the message appears. Five seconds is a good default—long enough that the user has oriented themselves on the page, but not so long that they've already navigated away.

Positioning and Appearance

Choose whether proactive messages slide in from the left or right. This should match where your chat bubble is positioned.

The avatar, border radius, and padding can all be adjusted to match your design language. If you prefer a more compact notification, reduce padding and avatar size. For a prominent, friendly greeting, increase both.

Device-Specific Control

You may want proactive messages on desktop but not on mobile (where they might obscure content). Toggle each device category—Mobile, Tablet, and Desktop—independently to control where proactive messages appear.

Voice Messages

Voice input allows users to speak instead of type, which is especially valuable on mobile devices.

How It Works

When enabled, a microphone icon appears in the chat input. Users click to record, speak their message, and click again to stop. The audio is transcribed using Groq's Whisper model, and the transcribed text is sent to the LLM.

Users see an audio player in the chat history, but the bot receives only text—it doesn't "listen" to the audio itself. This keeps processing fast and costs low while still providing a natural voice interface.

Browser Requirements

Voice recording requires HTTPS (it won't work on HTTP) and is supported in Chrome, Safari, and Edge. Firefox has limited support. Users must grant microphone permission when first using the feature.

Storage and Cleanup

Audio files are stored in Supabase Storage for 3 days, then automatically deleted. This keeps storage costs manageable while giving users time to reference their messages.

Link Previews

When the bot includes URLs in responses, the system automatically generates preview cards with title, description, and thumbnail image. This makes responses more visually engaging and helps users understand where links lead before clicking.

Link previews are generated automatically—no configuration needed.