Customizing Your Chat Widget

Overview The Chat Widget settings page shows your AI Sales Assistant's pre-configured appearance based on your brand's colors, name, and logo. While Rep automatically handles most of the styling to match your brand identity, you can review these settings and add your personal touch to ensure the chat interface integrates seamlessly with your customer experience.

Accessing Chat Widget Settings Log in to your Rep Console

Navigate to Settings in the left sidebar
Select Chat widget from the dropdown menu
Understanding the Tabs

The Chat Widget customization interface is divided into two main tabs: Design: Controls the appearance, style, colors, and behavior of the chat interface Settings: Manages deployment options and integration with your website Design Tab Options Widget Style

Choose between two distinct interface styles for your chat widget

Classic: The traditional chat interface with customizable colors and elements Rep 2.0: A modern, streamlined design with enhanced visual elements Colors

Rep automatically syncs with your brand's color palette, but you can adjust these if needed

Primary: Sets the main color for the chat interface (buttons, headers, etc.) Secondary: Defines accent colors for secondary elements Background: Controls the chat window's background color Chip text and border: Adjusts the appearance of suggestion chips in the chat All colors can be set using HEX color codes (e.g., #1a9fc). Check that the auto-synced colors

accurately represent your brand and make adjustments if necessary. Widget Title & Subtitle Widget title: The main heading displayed at the top of your chat interface (automatically set to your brand name, but can be customized) Widget subtitle: A brief description or welcome message displayed below the title (e.g.,

"Here to help you shop") Contact Support Sidebar

Enable or disable a floating "Contact Support" tab on the edge of the chat window

ON: Shows a tab that allows customers to request human assistance OFF: Hides the support tab Proactive Approach Mode Colors Choose whether to use different colors when your chat assistant proactively initiates

conversations

ON: Uses distinct colors for proactive messages

OFF: Maintains consistent colors throughout

When enabled, you can customize

Message color: The background color for proactive messages Button X: Color for the close button Chip: Color for suggestion chips Chip text and border: Color for text and borders on suggestion chips Position

Control exactly where your chat widget appears on your website

Align to: Choose from preset positions or custom placement

Top left Top center Top right Center left Center right Bottom left Bottom center Bottom right Custom: For precise control using X and Y coordinates

When selecting "Custom" positioning

X axis: Set horizontal positioning (e.g., Right: 2px from the right edge) Y axis: Set vertical positioning (e.g., Bottom: 2px from the bottom edge) The visual position selector (dot grid) provides a quick way to choose alignment, while the pixel values allow for fine-tuning the exact placement to ensure your chat widget fits perfectly within

your website's design. Hide Chat Window Under Elements This setting controls how your chat widget interacts with other elements on your website in

terms of layering

ON: Allows you to specify a z-index value for your chat widget, controlling its stacking order relative to other page elements OFF: Uses default stacking behavior Z-index of the element to hide under: Enter a numeric value that determines which elements your chat widget appears beneath. Lower values will place the chat widget below more

elements on your page. Use case: If your website has important floating elements like a shopping cart drawer, promotional popups, or a fixed navigation bar, you may want your chat widget to appear beneath these elements rather than on top of them. For example, if your shopping cart drawer has a z-index of 1000, you could set your chat widget's z-index to 999 to ensure it never blocks

customers from accessing their cart. This provides a better user experience by ensuring critical

website functions remain accessible even when the chat widget is open. Button Customization

Control how the chat button appears when minimized

Button style

Store icon: Uses your store's favicon or logo (automatically synced)

Round chat icon: Displays a standard chat bubble icon With text: Shows text alongside the icon Hidden: Completely hides the button

Button size

Extra Large Large Normal Small Button color: Set the color using HEX code (pre-filled with your brand color) Notifications: Customize the appearance of notification badges Settings Tab Options Shopify Integration Preview button: Test how your chat widget will appear on your Shopify store Sales Assistant active & visible: Master toggle to enable or disable the chat widget across

your entire store Headless Websites

For non-Shopify or custom-built websites

Copy the provided JavaScript embed code Place it after the tag in your website's HTML Alternatively, deploy via Google Tag Manager Live Preview The right panel displays a real-time preview of your chat widget as you make changes. Toggle between normal and proactive views to see how both states will appear to your customers.

Best Practices Review auto-synced elements: While Rep automatically syncs with your brand, review all

elements to ensure they accurately represent your visual identity

Brand consistency: Make minor adjustments to the auto-synced colors if needed to perfectly

match your website's color scheme

Contrast: Ensure text remains readable against your selected background colors

Positioning: Place the widget where it's visible but doesn't interfere with critical page
elements

Mobile optimization: Test how your widget appears on mobile devices

Clear messaging: Use concise, helpful text for your widget title and subtitle
Saving Your Changes

After reviewing the auto-synced settings and making any desired customizations, click the Save and preview button at the bottom of the page to apply your changes. Need More Help? If you have questions about customizing your chat widget, contact our support team or use the Rep AI Helper in your Console for immediate assistance.