Styling the Shopper Assistant

The Fast Simon Shopper Assistant provides multiple ways to customize its appearance. The chat container has a unique ID that allows for easy CSS targeting.

Recommended Approach: Shadow DOM CSS Injection

This is the preferred and easiest method for styling the shopper assistant. The shopper assistant uses Shadow DOM for style isolation. To inject custom styles into the shadow DOM, create a <style> tag with the special ID fs-shopper-assistant-custom-styles. The chat initialization script will automatically detect this tag and inject it into the shadow root.

Styling Example

<style id="fs-shopper-assistant-custom-styles">
/* Chat window positioning and size */
#fast-simon-chat-app-container .chat-container {
    width: 420px;
    height: 650px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    overflow: hidden;
}

/* Header customization */
#fast-simon-chat-app-container .chat-header-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    border-bottom: none;
}

/* Message bubbles */
#fast-simon-chat-app-container .user-message {
    background: #667eea;
    color: white;
    border-radius: 18px 18px 4px 18px;
    padding: 12px 16px;
    max-width: 75%;
}

#fast-simon-chat-app-container .system-message {
    background: #f5f5f5;
    border-radius: 18px 18px 18px 4px;
    padding: 12px 16px;
    max-width: 75%;
}

/* Product cards */
#fast-simon-chat-app-container .chat-product-carousel-item-container {
    border-radius: 12px;
    transition: transform 0.2s;
}

#fast-simon-chat-app-container .chat-product-carousel-item-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* Prices */
#fast-simon-chat-app-container .product-price {
    color: #2E7D32;
    font-size: 18px;
    font-weight: bold;
}

#fast-simon-chat-app-container .product-compare-price {
    color: #999;
    text-decoration: line-through;
}

/* Input area */
#fast-simon-chat-app-container .chat-footer-container {
    border-top: 1px solid #e0e0e0;
    padding: 16px;
    background: white;
}

/* Floating button */
#fast-simon-chat-app-container .open-chat-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transition: transform 0.2s;
}

#fast-simon-chat-app-container .open-chat-button:hover {
    transform: scale(1.1);
}
</style>

Alternative Approaches

1. Configuration-Based Styling

Use the configuration options to customize colors:

window.__fast_simon_chat_config = {
    primaryColor: '#FF6B6B',
    // Other config options
};

2. CSS Custom Properties

Customize via CSS custom properties:

<style id="fs-shopper-assistant-custom-styles">
#fast-simon-chat-app-container {
    --primary-color: #FF6B6B;
    --text-dark: #333333;
    --light-background: #F8F8F9;
}
</style>

3. Inline Styles via Hooks

For dynamic styling based on content, use hooks:

window.FastSimonChat.registerHook(
    window.FastSimonChat.CustomizationEvent.ChatHeader,
    ({element, config}) => {
        element.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
        element.style.padding = '24px';
    }
);

Key CSS Selectors

Container Classes

Selector	Description
#fast-simon-chat-app-container	Main chat container (use this as base)
.fast-simon-chat-app-content	Inner content wrapper
.chat-container	Chat window container

Section Classes

Selector	Description
.chat-header-container	Header section
.chat-body	Messages area
.chat-footer-container	Footer with input
.messages-container	Messages wrapper

Message Classes

Selector	Description
.user-message	User message bubble
.system-message	Assistant message bubble
.user-message-image	User uploaded images

Product Classes

Selector	Description
.chat-product-carousel-container	Product carousel wrapper
.chat-product-carousel-item-container	Individual product card
.product-container	Product content wrapper
.product-price-container	Price section
.product-price	Actual price
.product-compare-price	Compare/original price
.product-actions	Product action buttons

Button Classes

Selector	Description
.open-chat-button	Floating chat button
.close-chat-button	Close button in header
.send-button	Send message button
.reset-button	New chat button

CSS Custom Properties Reference

Property	Description	Default
--primary-color	Primary theme color	#006CDC
--primary-faded	Faded primary color	#006CDC99
--lines-disabled	Border and disabled state color	#C9C9C9
--text-dark	Dark text color	#343434
--light-background	Light background color	#F8F8F9
--text-medium	Medium text color	#666666
--input-hover-color	Input hover background	#F4F4F4
--black-faded	Faded black color	rgba(0, 0, 0, 0.30)

Best Practices

1. Use the container ID - Always prefix your selectors with #fast-simon-chat-app-container to ensure overriding the app style without !important
2. Test responsiveness - The chat adapts to different screen sizes, test your styles on mobile
3. Maintain contrast - Ensure text remains readable with your color choices
4. Avoid !important - Proper specificity with the container ID should be sufficient

Troubleshooting

Styles not applying?

• Ensure you're using a <style> tag with id="fs-shopper-assistant-custom-styles" for shadow DOM injection
• Prefix your selectors with #fast-simon-chat-app-container to override app styles without using !important
• Verify the style tag is present in the DOM before the chat initializes
• Use browser dev tools to inspect the shadow root and verify styles are injected

Styles disappear after chat updates?

• Use the id="fs-shopper-assistant-custom-styles" pattern (recommended approach)
• Avoid inline styles unless using hooks
• CSS defined in the special style tag will be automatically injected into the shadow DOM