Kontato Docs

Appearance

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.

Kontato AI Chat Widget - Installation Guide ​

Quick Start ​

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

html
<script>
    window.kontatoSettings = {
        'store-id': "YOUR_STORE_ID"  // Replace with your Store ID
    };
</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-idstringrequiredYour unique Kontato store identifier
dark-modestring"light"Theme mode: "light" or "dark"
chat-closedstring"true"Initial state of chat widget
full-namestringundefinedCustomer's full name
emailstringundefinedCustomer's email
uuidstringundefinedUnique identifier for the customer

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
domainstringundefinedWebsite domain
openbooleanfalseAuto-open chat on load
closablebooleantrueAllow closing the chat widget

Installation Methods ​

1. JavaScript Settings (Recommended) ​

html
<script>
    window.kontatoSettings = {
        'store-id': "YOUR_STORE_ID",
        'full-name': "John Doe",
        'dark-mode': "light",
        'brand-name': "MyCompany",
        'brand-logo': "https://example.com/logo.png",
        'hide-kontato-brand': "false"
    };
</script>
<script async src="https://chat.kontato.com/chat-loader.js"></script>

2. HTML Element Installation ​

html
<kontato-chat 
    store-id="YOUR_STORE_ID"
    dark-mode="light"
    brand-name="MyCompany"
    chat-closed="false">
</kontato-chat>

3. JavaScript API Installation ​

javascript
const chat = new KontatoChat({
    'store-id': "YOUR_STORE_ID",
    'dark-mode': "light",
    'brand-name': "MyCompany"
});

JavaScript API ​

Control the chat widget programmatically:

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

// Open chat
chat.open();

// Close chat
chat.close();

// Toggle chat
chat.toggle();

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

// Destroy chat instance
chat.destroy();

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);
});

Common Questions ​

How do I customize the branding? ​

javascript
window.kontatoSettings = {
    'store-id': "YOUR_STORE_ID",
    '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-id': "YOUR_STORE_ID",
    'dark-mode': "dark"
};

How do I identify customers? ​

javascript
window.kontatoSettings = {
    'store-id': "YOUR_STORE_ID",
    'full-name': "John Doe",
    'email': "[email protected]",
    'uuid': "unique-customer-id"
};

Troubleshooting ​

  1. Widget not showing?

    • Verify your Store ID is correct
    • Check browser console for errors
    • Ensure the script is loaded after your settings

  2. 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

  3. Performance issues?

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

Support ​

Need help? Contact us: