Simple Integration
Add Kontato Chat to your website with just two lines of code. No complex setup required.
Customer Support AI Chat Widget
Add intelligent customer support to your website in minutes
Add this code to your website before the closing </body>
tag:
<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.
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 |
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) |
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 |
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 |
<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>
<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>
<kontato-chat
store-token="YOUR_STORE_TOKEN"
dark-mode="light"
brand-name="YourCompany"
chat-closed="false">
</kontato-chat>
const chat = new KontatoChat({
'store-token': "YOUR_STORE_TOKEN",
'dark-mode': "light",
'brand-name': "YourCompany"
});
Control the chat widget programmatically:
// 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();
You can also use global functions to control the chat widget:
/**
* 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);
}
}
Listen to chat events:
window.addEventListener('kontatoReady', (event) => {
console.log('Chat widget is ready');
});
window.addEventListener('kontatoMessage', (event) => {
console.log('New message:', event.detail);
});
When implementing the chat widget for logged-in users, follow these requirements:
store-user-id
is provided, then email
is mandatory, and vice versaemail
and store-user-id
must be provided together for proper user identificationfull-name
is optional but recommended for personalized experience// 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
};
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"
};
window.kontatoSettings = {
'store-token': "YOUR_STORE_TOKEN",
'dark-mode': "dark"
};
window.kontatoSettings = {
'store-token': "YOUR_STORE_TOKEN",
'full-name': "Guest User",
'custom-parameters': "{'source': 'website', 'user_type': 'guest'}"
};
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'}"
};
window.kontatoSettings = {
'store-token': "YOUR_STORE_TOKEN",
'custom-parameters': "{'source': 'homepage', 'campaign': 'summer2024', 'user_segment': 'premium'}"
};
Widget not showing?
User identification not working?
email
and store-user-id
are providedStyling conflicts?
Performance issues?
If you're upgrading from the legacy uuid
parameter:
// 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
};
Need help? Contact us: