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.
Mobile-Specific Settings
Since most of your traffic likely comes from mobile devices, Rep AI offers separate positioning and display settings specifically for mobile users. This ensures your chat widget works perfectly on both desktop and mobile without compromising either experience.
Why Mobile Settings Matter
Mobile screens have different constraints than desktop displays. Your desktop widget position might interfere with mobile navigation, cover important touch buttons, or appear too small for easy interaction. Mobile-specific settings let you:
Position your widget to avoid mobile navigation elements
Choose different button styles optimized for touch interaction
Adjust sizing for smaller screens and touch targets
Hide the widget behind mobile-specific elements when needed
Different Position for Mobile
Toggle ON "Different position for Mobile" to activate separate positioning controls that only apply to mobile sessions. Once enabled, you'll see mobile-specific positioning options:
Align to: Choose from the same preset positions as desktop or use custom placement
X axis: Set horizontal positioning specifically for mobile screens
Y axis: Set vertical positioning specifically for mobile screens
Mobile Positioning Best Practices:
Bottom Corner: Most popular for mobile - try "Right: 20px, Bottom: 20px" for easy thumb access
Side Edge: Use "Right: 0px, Center" for a sliding tab that saves bottom space
Avoid Center: Center positioning can block important mobile content and navigation
Mobile Button Considerations
When mobile positioning is enabled, consider adjusting your button settings for better mobile interaction:
Button size: Use "Large" or "Extra Large" for easier touch targets
Button style: "Round chat icon" often works better than text on small screens
Button color: Ensure good contrast against mobile backgrounds
Testing Mobile Settings
Use these methods to verify your mobile configuration:
Live Preview: Toggle between normal and mobile views in the preview panel
Device Testing: Check actual mobile devices for real-world positioning
Browser Tools: Use browser developer tools to simulate mobile screens
Touch Testing: Verify that buttons are easy to tap without accidentally hitting other elements
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.
Mobile-Specific Element Layering
When you have mobile positioning enabled, this setting works independently for mobile sessions. This is particularly useful because mobile sites often have different layering priorities:
Mobile navigation drawers
Mobile-optimized shopping carts
Touch-optimized search overlays
Mobile-specific promotional banners
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 <body> 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: Use mobile-specific settings if your mobile traffic is significant (most stores see 60%+ mobile traffic)
Clear messaging: Use concise, helpful text for your widget title and subtitle
Touch-friendly design: When using mobile settings, ensure buttons are large enough for easy tapping
Test across devices: Verify your widget works well on various screen sizes and devices
Troubleshooting Common Issues
Desktop Issues
Widget not appearing: Check that "Sales Assistant active & visible" is enabled and positioning values don't place it off-screen
Widget blocking content: Adjust Z-index settings or reposition the widget
Color issues: Verify HEX codes are valid and provide sufficient contrast
Mobile-Specific Issues
Widget not appearing on mobile: Verify mobile positioning is enabled and mobile position values are within screen bounds
Button too small on mobile: Increase button size to "Large" or "Extra Large" for better touch interaction
Widget blocking mobile navigation: Enable mobile-specific positioning and adjust placement or use element layering controls
Inconsistent mobile appearance: Clear mobile browser cache and test in incognito mode
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.