Skip to main content

Chat appearance & branding

Creating a chat experience that matches your brand builds customer trust. This guide covers the real appearance controls available in the ShopGuide admin app's Appearance and Settings pages.

Style Templates​

Pick one of three built-in templates as your starting point:

  • Classic — traditional design with solid backgrounds, borders, and shadows
  • Floaty — modern glassy design with ambient glow effects and transparent elements
  • Bubbly Glow — rounded, iOS-style bubble with a soft shimmering color outline and a frosted-glass fill

Switching templates loads a matching set of defaults for shadows, borders, dividers, and radii — you can adjust each of these afterward without losing the template's overall look.

Colors​

  • User message color: background of the customer's own messages
  • Bot message color: background of the AI's replies (plus separate text colors for each)
  • Primary color (block-level override): used for user messages and the container border/bubble color on a specific page when a block has "Use custom settings" enabled
  • Container background color, border color/width, and shadow (offset, blur, opacity)
  • Divider color and thickness between messages

Shape and Spacing​

  • Outer container radius, chat bubble radius, and input/button radius — dial in anything from sharp corners to fully rounded
  • Container width, padding, and margin
  • Maximum chat height on desktop and mobile (as a percentage of the viewport)

The Floating Bubble​

The chat always renders as a fixed-position floating bubble anchored to the bottom-left or bottom-right of the viewport — it is not an inline or sidebar-embedded element. You can configure:

  • Position: left or right
  • Size: pixel diameter of the bubble
  • Icon: sparkles, chat, message, question, robot, or search
  • Icon color
  • Whether the bubble is shown at all

See Chat positioning & layout for placement guidance.

Header, Login Button, and Disclaimer​

  • Show or hide the chat header (with its own text color)
  • Show or hide the "log in" prompt shown to guest visitors
  • Show or hide the AI disclaimer text ("This AI Guide can make mistakes...")
  • Optionally show a profile image (e.g. your logo) next to bot messages, at a configurable size

Custom CSS​

Global settings include a Custom CSS field that is injected directly into the page. See Advanced chat styling for the CSS custom properties and DOM structure you can target safely.

Language​

The chat widget UI supports three languages — English, German, and Dutch — resolved from your store's content language. This covers on-screen labels, tool status messages, and the header/disclaimer text; it is not automatic translation of arbitrary content. See Multi-language support.

Next Steps​

Perfect your chat appearance:

Great chat appearance builds trust and encourages engagement. Invest time in creating a cohesive visual experience that feels native to your store.