Skip to main content

Shopper Assistant Configuration

Fast Simon Shopper Assistant can be configured via the dashboard or programmatically through the __fast_simon_chat_config global object.

Configuration Structure​

The shopper assistant uses a configuration object stored in window.__fast_simon_chat_config. This object contains all the settings needed to customize the appearance and behavior of the chat.

Configuration Options Reference​

Required Settings​

  • store_uuid (string, required) - Your Fast Simon store UUID
  • store_id (string, required) - Your Fast Simon store ID

Basic Display Settings​

  • title (string) - Chat header title (default: "AI Virtual Assistant Chat")
  • subtitle (string, optional) - Chat header subtitle
  • thumbnail (string, optional) - URL to custom avatar/logo image
  • primaryColor (string, optional) - Primary color for the chat UI (hex color, default: "#006CDC")
  • assistantName (string, optional) - Name of the AI assistant

Layout & Positioning​

  • chatWindowSide ('left' | 'right', optional) - Position of chat window (default: 'right')
  • hideFloatingButton (boolean, optional) - Hide the floating chat button (default: false)
  • alwaysOnDisplay (boolean, optional) - Keep chat always visible (default: false)
  • containerWidth (number, optional) - Custom width for resizable container in pixels

Features​

  • disableHints (boolean, optional) - Disable hint messages (default: false)
  • hideFeedbackButtons (boolean, optional) - Hide feedback buttons on messages (default: false)

Dynamic Height​

  • disableDynamicHeight (boolean, optional) - Disable automatic height adjustment
  • getCustomDynamicHeight (function, optional) - Custom function to calculate chat height
    getCustomDynamicHeight: () => {
        return window.innerHeight - 200; // Example: Leave 200px space
    }

Custom Text Labels​

Configure custom text throughout the chat interface:

customTexts: {
    // Product actions
    quickAdd: 'Add to Cart',                    // Quick add button text
    moreLikeThis: 'Similar Items',              // More like this button text

    // Message headers
    assistantMessageHeader: 'AI Assistant',     // Header shown on assistant messages
    userMessageHeader: 'You',                   // Header shown on user messages

    // Tooltips
    newChatTooltip: 'Start New Chat',           // New chat button tooltip
    visualSearchTooltip: 'Search by Image',     // Visual search button tooltip
    wasHelpfulTooltip: 'This was helpful',      // Positive feedback tooltip
    wasNotHelpfulTooltip: 'This was not helpful', // Negative feedback tooltip

    // Input
    inputPlaceholder: 'Type your message...',   // Chat input placeholder

    // Visual similarity
    similarStylesSentences: [                   // Phrases for visual similarity feature
        'Show me similar styles',
        'Find similar products'
    ],

    // Feedback modal
    feedbackModal: {
        title: 'Help us improve',               // Modal title
        options: [                              // Feedback options
            'Inaccurate information',
            'Not helpful',
            'Other'
        ],
        inputPlaceholder: 'Tell us more...',    // Text input placeholder
        cancelButton: 'Cancel',                 // Cancel button text
        submitButton: 'Submit'                  // Submit button text
    }
}

Pricing Configuration​

Configure how prices are displayed:

pricing: {
    symbol: '$',                // Currency symbol
    symbolPosition: 'left',     // 'left' or 'right' of the price
    thousandSep: ',',           // Thousand separator
    decimalSep: '.',            // Decimal separator
    decimals: 2                 // Number of decimal places
}

Client Tools / Integrations​

Optional client-side functions for external integrations:

clientTools: {
    humanHandoff: () => {
        // Custom function to hand off to human support
        console.log('Transferring to human agent...');
        // Your integration code here
    }
}

Complete Example Configuration​

<script>
window.__fast_simon_chat_config = {
    // Required
    store_uuid: 'your-store-uuid',
    store_id: '12345',

    // Basic display
    title: 'Shop Assistant',
    subtitle: 'How can I help you today?',
    primaryColor: '#FF6B6B',
    assistantName: 'Emma',
    thumbnail: 'https://your-site.com/avatar.png',

    // Layout
    chatWindowSide: 'right',
    hideFloatingButton: false,
    alwaysOnDisplay: false,
    containerWidth: 450,

    // Features
    disableHints: false,
    hideFeedbackButtons: false,

    // Dynamic height
    disableDynamicHeight: false,
    getCustomDynamicHeight: () => window.innerHeight - 100,

    // Custom texts
    customTexts: {
        quickAdd: 'Buy Now',
        moreLikeThis: 'Find Similar',
        assistantMessageHeader: 'Emma',
        userMessageHeader: 'You',
        newChatTooltip: 'New Conversation',
        visualSearchTooltip: 'Upload Image',
        inputPlaceholder: 'Ask me anything...',
        wasHelpfulTooltip: 'Helpful',
        wasNotHelpfulTooltip: 'Not Helpful',
        feedbackModal: {
            title: 'What went wrong?',
            options: ['Wrong products', 'Unhelpful', 'Other'],
            inputPlaceholder: 'Your feedback...',
            cancelButton: 'Skip',
            submitButton: 'Send'
        }
    },

    // Pricing
    pricing: {
        symbol: '€',
        symbolPosition: 'right',
        thousandSep: '.',
        decimalSep: ',',
        decimals: 2
    },

    // Client tools
    clientTools: {
        humanHandoff: () => {
            // Your custom handoff logic
            window.Intercom && window.Intercom('show');
        }
    }
};
</script>

CSS Custom Properties​

The shopper assistant exposes CSS custom properties that can be customized via configuration or CSS:

  • --primary-color - Primary UI color
  • --primary-faded - Faded version of primary color
  • --lines-disabled - Border and disabled element color
  • --text-dark - Dark text color
  • --light-background - Light background color
  • --text-medium - Medium text color
  • --input-hover-color - Input hover state color
  • --black-faded - Faded black color

type references: Typescript Types