Configuration Options

The TekstiAI Widget is initialized using the window.TekstiAI() function. This page documents all available configuration options.

Configuration Structure

window.TekstiAI('boot', {
    // Required: Core API Configuration
    container: 'tekstiai-widget',
    widget_id: 'your-widget-id',
    
    // Authentication (choose one)
    token: 'your-jwt-token',  // OR
    transport_function: customTransportFn,
    
    // Optional: Style Overrides
    'styles-backgroundColor': '#667eea',
    'styles-buttonBackgroundColor': '#0d9488',
    // ... more style options
    
    // Optional: Behavior Overrides  
    'options-welcomeMessage': 'Hello! How can I help?',
    'options-validateInput': true,
    // ... more option overrides
});

Core Configuration

Required Parameters

`container`

Type: string
Required: Yes
Description: The tag name of the widget element. Must be 'tekstiai-widget'.

container: 'tekstiai-widget'

`widget_id`

Type: string
Required: Yes
Description: Your unique widget identifier from TekstiAI.

widget_id: 'wdgt_abc123xyz789'

`api_url`

Type: string
Required: No
Description: The base URL for the TekstiAI API, mainly used for testing.
Default: https://app.teksti.ai/api/v1/widget

api_url: 'https://app.teksti.ai/api/v1/widget'

Authentication Parameters

Provide the appropriate authentication parameter based on your widget's configuration:

`token`

Type: string
Required: If your widget is configured to use JWT authentication
Description: JWT token for authentication.

token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'

`transport_function`

Type: Function
Required: If your widget is configured to use proxy/transport function authentication
Description: Custom function to handle all API requests.
Signature: (endpoint: string, options: RequestOptions) => Promise<Response>

transport_function: async (endpoint, options) => {
    const response = await fetch(endpoint, options);
    return response;
}

See Authentication for detailed examples.

Style Configuration

info

Style settings are loaded from your TekstiAI app as JSON. The following options serve as overrides for testing or specific implementations. In most cases, you should configure styles through your TekstiAI dashboard.

All style options use the prefix styles- followed by the camelCase property name.

Background and Container Styles

`styles-backgroundColor`

Type: string (CSS color)
Description: Main background color of the widget
Default: Loaded from server configuration

'styles-backgroundColor': '#667eea'
'styles-backgroundColor': 'rgb(102, 126, 234)'
'styles-backgroundColor': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'

`styles-chatContainerWidth`

Type: string (CSS width)
Description: Width of the chat container
Default: '100%'

'styles-chatContainerWidth': '100%'
'styles-chatContainerWidth': '600px'
'styles-chatContainerWidth': 'min(100%, 800px)'

`styles-baseFontSize`

Type: string (CSS size)
Description: Base font size for the widget. All internal sizing is relative to this value.
Default: '1rem'

'styles-baseFontSize': '1rem'      // Standard
'styles-baseFontSize': '14px'      // Smaller
'styles-baseFontSize': '18px'      // Larger
'styles-baseFontSize': '1.125rem'  // Slightly larger

Button and Control Styles

`styles-buttonBackgroundColor`

Type: string (CSS color)
Description: Background color for action buttons
Default: Loaded from server configuration

'styles-buttonBackgroundColor': '#0d9488'
'styles-buttonBackgroundColor': '#6366f1'

`styles-controlsBackgroundColor`

Type: string (CSS color)
Description: Background color for control elements (input area, buttons)
Default: Loaded from server configuration

'styles-controlsBackgroundColor': '#f3f4f6'
'styles-controlsBackgroundColor': '#ffffff'

`styles-controlsTextColor`

Type: string (CSS color)
Description: Text color for controls
Default: Loaded from server configuration

'styles-controlsTextColor': '#374151'
'styles-controlsTextColor': '#1f2937'

Message Styles

`styles-questionBackgroundColor`

Type: string (CSS color)
Description: Background color for user questions
Default: Loaded from server configuration

'styles-questionBackgroundColor': '#1f2937'
'styles-questionBackgroundColor': '#4f46e5'

`styles-discussionTextColor`

Type: string (CSS color)
Description: Text color for chat messages
Default: Loaded from server configuration

'styles-discussionTextColor': '#111827'
'styles-discussionTextColor': '#374151'

`styles-placeholderImage`

Type: string (URL)
Description: Custom placeholder image URL
Default: Loaded from server configuration

'styles-placeholderImage': 'https://yourdomain.com/images/placeholder.png'

Behavior Configuration

info

Like styles, behavior options are loaded from your TekstiAI app as JSON. The following options serve as overrides for testing purposes.

All option parameters use the prefix options- followed by the camelCase property name.

Welcome Message

`options-welcomeMessage`

Type: string
Description: Initial message shown when the widget loads
Default: Loaded from server configuration

'options-welcomeMessage': 'Hello! How can I help you today?'
'options-welcomeMessage': 'Welcome to our support chat!'

Input Configuration

`options-maxLength`

Type: number
Description: Maximum character length for input
Default: 360

'options-maxLength': 500
'options-maxLength': 1000

`options-inputPlaceholderText`

Type: string
Description: Placeholder text shown in the input field
Default: 'Type your question here...'

'options-inputPlaceholderText': 'Ask me anything...'
'options-inputPlaceholderText': 'What would you like to know?'

Input Validation

`options-validateInput`

Type: boolean
Description: Enable input validation
Default: false

'options-validateInput': true

`options-validationInputLength`

Type: number
Description: Minimum character length required for valid input
Default: 10
Note: Only applies when validateInput is true

'options-validationInputLength': 5
'options-validationInputLength': 15

`options-validationRegex`

Type: RegExp
Description: Custom regex pattern for input validation
Default: Loaded from server configuration

'options-validationRegex': /^[a-zA-Z0-9\s.,!?-]+$/  // Alphanumeric with basic punctuation

`options-validationErrorMessage`

Type: string
Description: Error message shown when validation fails
Default: Loaded from server configuration

'options-validationErrorMessage': 'Please enter at least 10 characters'
'options-validationErrorMessage': 'Invalid input. Please use only letters and numbers.'

Button and UI Text

`options-copyButtonText`

Type: string
Description: Text for the copy button
Default: 'Copy'

'options-copyButtonText': 'Copy'
'options-copyButtonText': 'Copy to Clipboard'

`options-copiedToClipboardText`

Type: string
Description: Text shown after successful copy
Default: 'Copied!'

'options-copiedToClipboardText': 'Copied!'
'options-copiedToClipboardText': '✓ Copied to clipboard'

`options-referenceButtonText`

Type: string
Description: Text for the references button
Default: 'References'

'options-referenceButtonText': 'References'
'options-referenceButtonText': 'Show Sources'

`options-referenceListHeaderText`

Type: string
Description: Header text for the references list
Default: 'References'

'options-referenceListHeaderText': 'Sources'
'options-referenceListHeaderText': 'Referenced Documents'

`options-gatheringReferencesText`

Type: string
Description: Text shown while references are being loaded
Default: 'Gathering references...'

'options-gatheringReferencesText': 'Loading sources...'
'options-gatheringReferencesText': 'Finding relevant information...'

Reference Display

`options-referencesOpenByDefault`

Type: boolean
Description: Whether reference sections are expanded by default
Default: false

'options-referencesOpenByDefault': true

Complete Configuration Example

window.TekstiAI('boot', {
    // Core Configuration
    container: 'tekstiai-widget',
    widget_id: 'wdgt_abc123xyz789',
    
    // Authentication
    transport_function: async (endpoint, options) => {
        const response = await fetch('/api/proxy', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${getToken()}`
            },
            body: JSON.stringify({
                target: endpoint,
                options: options
            })
        });
        return response;
    },
    
    // Style Overrides (optional - normally loaded from server)
    'styles-backgroundColor': '#667eea',
    'styles-buttonBackgroundColor': '#0d9488',
    'styles-chatContainerWidth': '100%',
    'styles-controlsBackgroundColor': '#f3f4f6',
    'styles-controlsTextColor': '#374151',
    'styles-questionBackgroundColor': '#1f2937',
    'styles-discussionTextColor': '#111827',
    'styles-baseFontSize': '1rem',
    
    // Behavior Overrides (optional - normally loaded from server)
    'options-welcomeMessage': 'Hello! How can I assist you today?',
    'options-maxLength': 500,
    'options-inputPlaceholderText': 'Type your question here...',
    'options-validateInput': true,
    'options-validationInputLength': 10,
    'options-validationErrorMessage': 'Please enter at least 10 characters',
    'options-copyButtonText': 'Copy',
    'options-copiedToClipboardText': '✓ Copied!',
    'options-referenceButtonText': 'View Sources',
    'options-referenceListHeaderText': 'Referenced Documents',
    'options-gatheringReferencesText': 'Loading sources...',
    'options-referencesOpenByDefault': false
});

Configuration Priority

Configuration is loaded and merged in the following priority order (highest to lowest):

Client initialization parameters - Options passed to window.TekstiAI('boot', {...})
Server configuration - JSON loaded from TekstiAI API (styles and options)
Default values - Built-in defaults

This means your initialization parameters will override server configuration, which in turn overrides defaults.

Configuration Structure​

Core Configuration​

Required Parameters​

container​

widget_id​

api_url​

Authentication Parameters​

token​

transport_function​

Style Configuration​

Background and Container Styles​

styles-backgroundColor​

styles-chatContainerWidth​

styles-baseFontSize​

Button and Control Styles​

styles-buttonBackgroundColor​

styles-controlsBackgroundColor​

styles-controlsTextColor​

Message Styles​

styles-questionBackgroundColor​

styles-discussionTextColor​

styles-placeholderImage​

Behavior Configuration​

Welcome Message​

options-welcomeMessage​

Input Configuration​

options-maxLength​

options-inputPlaceholderText​

Input Validation​

options-validateInput​

options-validationInputLength​

options-validationRegex​

options-validationErrorMessage​

Button and UI Text​

options-copyButtonText​

options-copiedToClipboardText​

options-referenceButtonText​

options-referenceListHeaderText​

options-gatheringReferencesText​

Reference Display​

options-referencesOpenByDefault​

Complete Configuration Example​

Configuration Priority​