Customize Your Chat Widget Appearance: Design the Look
The "Design the Look" page is where you control how your AI Concierge looks and behaves on your website. It's organized into seven tabs, each covering a different aspect of your widget's appearance and functionality.
To access it, go to Settings > Chat Widget in your Rep AI Console, then select the Design tab at the top.
Basics
The Basics tab is where you set up your widget's core visual identity.
Widget Style — Choose between two visual styles for your chat widget:
Classic — A clean, traditional chat bubble design.
Rep 2.0 — A modern, richer interface with support for titles, subtitles, and enhanced branding.
Colors — Customize the color scheme to match your brand:
Primary — The main color used for message bubbles and key UI elements.
Secondary — Used for backgrounds and secondary elements.
Background — The chat window background color.
Chip text and border — The color for suggestion chips (quick-reply buttons) shown to shoppers.
Widget Title (Rep 2.0 only) — The name displayed at the top of your chat widget. Up to 25 characters. This is what shoppers see when the chat opens.
Widget Subtitle (Rep 2.0 only) — A short tagline below the title (e.g., "Doctor-Guided. AI-Powered.").
Rep Branding — Toggle the "Powered by REP" badge on or off at the bottom of the chat widget.
Contact Support Sidebar — When enabled, shows a sidebar option that lets shoppers request to speak with a human agent.
Desktop Default Open Mode — Control how the chat widget appears when shoppers first visit your site on desktop:
Regular chat box view — Opens as a standard floating chat box in the corner of the page.
Full-screen view — Opens the chat in a full-screen overlay for a more immersive experience.
Note: This only affects the initial view for new visitors. Once a shopper interacts with the widget, their preference (chat box or full screen) is remembered for future visits.
Chat Experience
The Chat Experience tab controls how conversations feel for your shoppers.
Message Display Style — Choose how AI messages appear in the chat:
Typing effect — Characters appear one by one, simulating a real person typing. Creates a more natural, conversational feel.
Instant display — The full message appears immediately. Better for shoppers who prefer speed.
Hide Product Prices — When enabled, product prices are hidden from the product carousel in the chat widget. This includes original prices, sale prices, and "Starts from" labels — all price information is fully removed.
This setting is ideal for:
Luxury brands that prefer not to display prices in conversational experiences
B2B or wholesale merchants where pricing is quote-based or varies by customer
"Contact for pricing" models where showing a listed price could be misleading
Stores with complex pricing (e.g., strikethrough prices or variant-based pricing) that may not display correctly in the chat widget
When prices are hidden, shoppers still see product images, titles, and action buttons (like "Add to Cart" or "Learn More"). The product card layout adjusts automatically — there are no blank gaps or broken layouts.
By default, this setting is OFF and prices appear normally. Turning it on takes effect for new chat sessions immediately — shoppers don't need to clear their cache.
To enable it:
Go to Settings > Chat Widget > Chat Experience tab
Toggle Hide Product Prices to ON
Click Save and Preview
To show prices again, simply toggle it back to OFF and save.
Use Different Colors for Proactive Approach Mode — When your AI proactively reaches out to shoppers, you can make those messages visually distinct by using different colors:
Message color — The bubble color for proactive messages.
Button x — Close button color.
Chip — Suggestion chip color for proactive messages.
Chip text and border — Text and border color for proactive chips.
Position
The Position tab lets you control exactly where the chat widget appears on your website.
Align To — Choose a preset position (bottom-right, bottom-left) or select "Custom" to set exact pixel offsets.
X Axis / Y Axis — When using Custom alignment, specify the exact position:
X axis: Left or Right + pixel offset
Y axis: Top or Bottom + pixel offset
Hide Chat Window Under Elements — Enable this if parts of your website (like sticky headers or floating banners) overlap the chat widget. This adjusts the widget's z-index so it sits behind those elements instead of on top.
Different Position on Mobile — Enable this to set a separate position for the chat widget on mobile devices. Mobile screens have different layouts, so you may want the widget in a different spot than on desktop.
Button
The Button tab controls the chat launcher — the button shoppers click to open the chat widget.
Notifications — The color of the notification badge that appears on the chat button when there are unread messages.
Button Color — The background color of the chat launcher button.
Button Style — Choose the look of your launcher:
Store icon — Uses your store's logo/icon.
Round chat icon — A standard circular chat bubble icon.
With text — Displays a text label alongside the icon.
Button Size — Select from Extra Large, Large, Normal, or Small.
Button Text — When using the "With text" style, customize the label (e.g., "Ask Durable AI"). Up to 30 characters.
Hidden — Hides the chat button entirely. Useful if you only want shoppers to interact through embedded widgets or proactive approaches.
Different Style and Size on Mobile — Enable this to use a different button style and size on mobile devices.
Embedded Widgets
The Embedded Widgets tab manages widgets that are embedded directly into your store pages (rather than floating on top).
Inline PDP Widget — An interactive question widget that appears directly on your Product Detail Pages (PDPs). When enabled, shoppers see a prompt like "Ask about this product" with quick-action buttons (e.g., "What's my size?", "Add to cart", "Ask another question").
Title — The heading text above the widget (e.g., "Ask about this product").
Custom Container ID — The HTML element ID where the widget should be inserted on your page. Default is
rep_widget.Need help embedding this widget? A "View guide" link is available in the settings.
Menu
The Menu tab lets you add persistent shortcut buttons inside the chat widget's menu, giving shoppers quick access to common actions.
Show Icons — Toggle whether icons appear next to shortcut labels.
Top Menu Shortcuts — Primary actions shown at the top of the menu. These are the first things shoppers see when they open the menu. Examples: "What's recommended?", "Promotions", "Track order". You can add, edit, reorder (drag and drop), or remove shortcuts.
Bottom Menu Shortcuts — Utility actions shown at the bottom of the menu. Good for secondary actions like "View cart" or "Checkout".
Each shortcut has a display label (what the shopper sees) and a message (what gets sent to the AI when clicked). Click + Add to create new shortcuts.
Settings
The Settings tab contains technical configuration for your chat widget.
Shopify Preview — If your store is on Shopify, click "Preview" to see how the chat widget looks on your live store.
AI Concierge Active and Visible — The master switch. When enabled, your AI assistant appears on all pages of your online shop. Turn this off to temporarily hide the widget without losing your configuration.
Headless Websites — If your store uses a headless or custom frontend (not standard Shopify), copy the provided JavaScript snippet and place it before your closing </body> tag. You can also install it via Google Tag Manager.
Saving Your Changes
After making changes on any tab, click Save and Preview in the top-right corner. Your changes apply across all tabs at once — you don't need to save each tab separately. A live preview on the right side of most tabs shows you how your changes will look in real time.