Automatically Opening the Chatbot Screen on a Website

Knowledge Articles
1

Problem Statement

Is there a way to automatically open the chatbot screen when a user visits the website? While I understand this can be done by customizing the Web SDK from GitHub, is it possible to achieve this using the Kore.ai hosted SDK by adding a line or two of code directly to the embedded script?

Solution

You can accomplish this by using the Kore.ai hosted SDK. Depending on the user requirements, two options are provided:

Option 1: Reload Chat Window After Closure

This option reloads the chatbot when required after the user clicks the close icon (x).

Code Implementation:

<link rel='stylesheet' href='https://bots.kore.ai/webclient/UI/dist/kore-ai-sdk.min.css'></link>
<script src='https://bots.kore.ai/api/platform/websdkjs/a75b58xxxxxxxxxxxxxxxxxx'></script>
<script>
  KoreSDK.chatConfig.minimizeMode = false; // Opens the chat window when the page loads
  KoreSDK.show(KoreSDK.chatConfig);
</script>

Use Case:
Ideal when the chat window should be hidden completely after the user closes it and only reopened programmatically.

Option 2: Persistent Chat Window

This option ensures the chatbot remains visible even after the user closes it, by automatically reopening the minimized chat window.

Code Implementation:

<link rel='stylesheet' href='https://bots.kore.ai/webclient/UI/dist/kore-ai-sdk.min.css'></link>
<script src='https://bots.kore.ai/api/platform/websdkjs/a75b58xxxxxxxxxxxxxxxxxxxxxxxxxxxd26cst8d'></script>
<script>
  window.addEventListener('load', (event) => {
    const minimizedElement = document.querySelector('.minimized');
    if (minimizedElement) {
      minimizedElement.click(); // Reopens the chatbot if minimized
    }
  });
  KoreSDK.show(KoreSDK.chatConfig);
</script>

Use Case:
Best suited for scenarios where the chat window should always remain accessible, ensuring the user sees it automatically on every page visit.

Important Notes

  • These solutions work with the Kore.ai hosted SDK and do not require extensive customizations.
  • Replace the script source URL (src) with the appropriate API key or endpoint for your chatbot instance.
  • Test the behavior in your environment to ensure it aligns with your desired user experience.

For further customization or queries, refer to the Kore.ai Developer Documentation

Content by @venkateswara.velidi