Skip to content

Kontato Chat Docs

Customer Support AI Chat Widget

Add intelligent customer support to your website in minutes

Kontato AI Chat Widget - Installation Guide

Quick Start

Add this code to your website before the closing </body> tag:

html
<script>
    window.kontatoSettings = {
        'store-token': "YOUR_STORE_TOKEN"  // Replace with your Store Token
    };
</script>
<script async src="https://chat.kontato.com/chat-loader.js"></script>

That's it! The chat widget will appear in the bottom-right corner of your website.

Configuration Options

Basic Options

OptionTypeDefaultDescription
store-tokenstringrequiredYour unique Kontato store authentication token
dark-modestring"light"Theme mode: "light" or "dark"
chat-closedstring"true"Initial state of chat widget
full-namestringundefinedCustomer's full name
emailstringundefinedCustomer's email
store-user-idstringundefinedUnique identifier for authenticated customers
uuidstringundefinedLegacy customer identifier (use store-user-id instead)

Branding Options

OptionTypeDefaultDescription
brand-namestring"Kontato"Company name shown in chat header
brand-logostringundefinedURL to your company logo
brand-background-colorstring"#0d6efd"Header background color
hide-kontato-brandstring"false"Hide "Powered by Kontato" footer

Advanced Options

OptionTypeDefaultDescription
chat-modestring"chat"Widget mode: "chat" or "playground"
custom-parametersstringundefinedCustom data passed to chat (JSON string format)
domainstringundefinedWebsite domain
openbooleanfalseAuto-open chat on load
closablebooleantrueAllow closing the chat widget

Installation Methods

For Non-Authenticated Users (Guests)

html
<script>
    window.kontatoSettings = {
        'store-token': "YOUR_STORE_TOKEN",
        'full-name': "Guest User",
        'dark-mode': "light",
        'brand-name': "YourCompany",
        'brand-logo': "https://example.com/logo.png",
        'brand-background-color': "#0d6efd",
        'hide-kontato-brand': "false",
        'chat-closed': "true",
        'chat-mode': "chat",
        'custom-parameters': "{'source': 'website', 'user_type': 'guest'}"
    };
</script>
<script async src="https://chat.kontato.com/chat-loader.js"></script>

For Authenticated Users

html
<script>
    window.kontatoSettings = {
        'store-token': "YOUR_STORE_TOKEN",
        'full-name': "John Doe",
        'email': "[email protected]",
        'store-user-id': "user_123456",
        'dark-mode': "light",
        'brand-name': "YourCompany",
        'brand-logo': "https://example.com/logo.png",
        'brand-background-color': "#0d6efd",
        'hide-kontato-brand': "false",
        'chat-closed': "true",
        'chat-mode': "chat",
        'custom-parameters': "{'source': 'website', 'user_type': 'logged_in'}"
    };
</script>
<script async src="https://chat.kontato.com/chat-loader.js"></script>

2. HTML Element Installation

html
<kontato-chat 
    store-token="YOUR_STORE_TOKEN"
    dark-mode="light"
    brand-name="YourCompany"
    chat-closed="false">
</kontato-chat>

3. JavaScript API Installation

javascript
const chat = new KontatoChat({
    'store-token': "YOUR_STORE_TOKEN",
    'dark-mode': "light",
    'brand-name': "YourCompany"
});

JavaScript API

Control the chat widget programmatically:

javascript
// Initialize chat
const chat = new KontatoChat({
    'store-token': "YOUR_STORE_TOKEN"
});

// Open chat
chat.open();

// Close chat
chat.close();

// Toggle chat
chat.toggle();

// Update configuration
chat.updateConfig({
    'dark-mode': "dark"
});

// Destroy chat instance
chat.destroy();

Global Functions

You can also use global functions to control the chat widget:

javascript
/**
 * Opens the Kontato chat widget
 * Call this function from support menu or chat activation buttons
 */
function openKontatoChat() {
    try {
        // Check if Kontato chat widget is loaded and available
        if (window.kontatoChat && typeof window.kontatoChat.open === 'function') {
            // Open the chat widget
            window.kontatoChat.open();
            
            // Optional: Track chat activation for analytics
            if (window.gtag) {
                gtag('event', 'chat_opened', {
                    'event_category': 'support',
                    'event_label': 'kontato_widget'
                });
            }
        } else {
            console.warn('Kontato chat widget not loaded yet');
        }
    } catch (error) {
        console.error('Error opening Kontato chat:', error);
    }
}

Events

Listen to chat events:

javascript
window.addEventListener('kontatoReady', (event) => {
    console.log('Chat widget is ready');
});

window.addEventListener('kontatoMessage', (event) => {
    console.log('New message:', event.detail);
});

User Authentication Requirements

For Authenticated Users

When implementing the chat widget for logged-in users, follow these requirements:

  • Required Fields: If store-user-id is provided, then email is mandatory, and vice versa
  • Minimum Identification: Both email and store-user-id must be provided together for proper user identification
  • Optional Fields: full-name is optional but recommended for personalized experience

Field Validation Example

javascript
// Correct implementation for authenticated users
window.kontatoSettings = {
    'store-token': "YOUR_STORE_TOKEN",
    'email': "[email protected]",        // Required when store-user-id is present
    'store-user-id': "user_123456",     // Required when email is present
    'full-name': "John Doe"             // Optional but recommended
};

// Invalid implementation (missing required pairing)
window.kontatoSettings = {
    'store-token': "YOUR_STORE_TOKEN",
    'email': "[email protected]"         // Missing store-user-id
};

Common Questions

How do I customize the branding?

javascript
window.kontatoSettings = {
    'store-token': "YOUR_STORE_TOKEN",
    'brand-name': "MyCompany",
    'brand-logo': "https://example.com/logo.png",
    'brand-background-color': "#FF0000",
    'hide-kontato-brand': "true"
};

How do I enable dark mode?

javascript
window.kontatoSettings = {
    'store-token': "YOUR_STORE_TOKEN",
    'dark-mode': "dark"
};

How do I identify customers?

For Guest Users:

javascript
window.kontatoSettings = {
    'store-token': "YOUR_STORE_TOKEN",
    'full-name': "Guest User",
    'custom-parameters': "{'source': 'website', 'user_type': 'guest'}"
};

For Authenticated Users:

javascript
window.kontatoSettings = {
    'store-token': "YOUR_STORE_TOKEN",
    'full-name': "John Doe",
    'email': "[email protected]",
    'store-user-id': "unique-customer-id",
    'custom-parameters': "{'source': 'website', 'user_type': 'logged_in'}"
};

How do I add custom tracking parameters?

javascript
window.kontatoSettings = {
    'store-token': "YOUR_STORE_TOKEN",
    'custom-parameters': "{'source': 'homepage', 'campaign': 'summer2024', 'user_segment': 'premium'}"
};

Troubleshooting

  1. Widget not showing?

    • Verify your Store Token is correct
    • Check browser console for errors
    • Ensure the script is loaded after your settings
  2. User identification not working?

    • For authenticated users, ensure both email and store-user-id are provided
    • Verify that user data is properly populated from your session system
    • Check that custom parameters are in valid JSON string format
  3. Styling conflicts?

    • The widget uses Shadow DOM for style isolation
    • Try adjusting the brand-background-color setting
    • Check z-index if widget is hidden behind other elements
  4. Performance issues?

    • The script is loaded asynchronously
    • Widget uses lazy loading for optimal performance
    • Consider using the chat-closed="true" option for initial load

Migration Guide

From uuid to store-user-id

If you're upgrading from the legacy uuid parameter:

javascript
// Old implementation
window.kontatoSettings = {
    'uuid': "user-identifier"
};

// New implementation
window.kontatoSettings = {
    'store-user-id': "user-identifier",
    'email': "[email protected]"  // Now required when store-user-id is present
};

Support

Need help? Contact us: