Kontato Chat Docs

Customer Support AI Chat Widget

Add intelligent customer support to your website in minutes

Simple Integration

Add Kontato Chat to your website with just two lines of code. No complex setup required.

AI-Powered Support

Intelligent responses powered by advanced AI to handle customer inquiries 24/7.

Highly Customizable

Customize the appearance and behavior to match your brand and specific needs.

Multi-Channel Support

Connect with customers via chat, WhatsApp, email, and phone from a single platform.

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

Option	Type	Default	Description
store-token	string	required	Your unique Kontato store authentication token
dark-mode	string	"light"	Theme mode: "light" or "dark"
chat-closed	string	"true"	Initial state of chat widget
full-name	string	undefined	Customer's full name
email	string	undefined	Customer's email
store-user-id	string	undefined	Unique identifier for authenticated customers
uuid	string	undefined	Legacy customer identifier (use store-user-id instead)

Branding Options

Option	Type	Default	Description
brand-name	string	"Kontato"	Company name shown in chat header
brand-logo	string	undefined	URL to your company logo
brand-background-color	string	"#0d6efd"	Header background color
hide-kontato-brand	string	"false"	Hide "Powered by Kontato" footer

Advanced Options

Option	Type	Default	Description
chat-mode	string	"chat"	Widget mode: "chat" or "playground"
custom-parameters	string	undefined	Custom data passed to chat (JSON string format)
domain	string	undefined	Website domain
open	boolean	false	Auto-open chat on load
closable	boolean	true	Allow closing the chat widget

Installation Methods

1. JavaScript Settings (Recommended)

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

Widget not showing?
- Verify your Store Token is correct
- Check browser console for errors
- Ensure the script is loaded after your settings
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
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
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:

Email: [email protected]
Documentation: https://docs.kontato.com

Kontato Chat Docs

Simple Integration

AI-Powered Support

Highly Customizable

Multi-Channel Support

Kontato AI Chat Widget - Installation Guide ​

Quick Start ​

Configuration Options ​

Basic Options ​

Branding Options ​

Advanced Options ​

Installation Methods ​

1. JavaScript Settings (Recommended) ​

For Non-Authenticated Users (Guests) ​

For Authenticated Users ​

2. HTML Element Installation ​

3. JavaScript API Installation ​

JavaScript API ​

Global Functions ​

Events ​

User Authentication Requirements ​

For Authenticated Users ​

Field Validation Example ​

Common Questions ​

How do I customize the branding? ​

How do I enable dark mode? ​

How do I identify customers? ​

For Guest Users: ​

For Authenticated Users: ​

How do I add custom tracking parameters? ​

Troubleshooting ​

Migration Guide ​

From uuid to store-user-id ​

Support ​

Kontato AI Chat Widget - Installation Guide

Quick Start

Configuration Options

Basic Options

Branding Options

Advanced Options

Installation Methods

1. JavaScript Settings (Recommended)

For Non-Authenticated Users (Guests)

For Authenticated Users

2. HTML Element Installation

3. JavaScript API Installation

JavaScript API

Global Functions

Events

User Authentication Requirements

For Authenticated Users

Field Validation Example

Common Questions

How do I customize the branding?

How do I enable dark mode?

How do I identify customers?

For Guest Users:

For Authenticated Users:

How do I add custom tracking parameters?

Troubleshooting

Migration Guide

From uuid to store-user-id

Support