Chatbot Integration

This document covers how to open and interact with the chatbot from your own custom elements, buttons, links, search bars, or any other UI.

Prerequisites

The chatbot script must be loaded on the page:

<script src="https://scripts.dialogintelligens.dk/universal-chatbot.js?id=YOUR_CHATBOT_ID"></script>

Option 1: JavaScript API (window.DialogIntelligens)

The chatbot script exposes a global window.DialogIntelligens object with the following methods:

Examples

<button onclick="window.DialogIntelligens.open()">Chat with us</button>

<a href="#" onclick="event.preventDefault(); window.DialogIntelligens.open()">Need help?</a>

<button onclick="window.DialogIntelligens.open('I need help with my order')">Order support</button>

Option 2: URL Parameters

Append ?chat=open to any page URL where the chatbot is loaded. The chatbot will automatically open on page load and the parameters are stripped from the URL.

https://example.com/page?chat=open

You can also include a message parameter to send a pre-filled message when the chat opens:

https://example.com/page?chat=open&message=I+need+help+with+my+order

Using message alone (without chat=open) also works. The chat will open automatically:

https://example.com/page?message=What+are+your+opening+hours%3F

This is useful for email campaigns, QR codes, FAQ links, or any link where you want the chat to open with a specific question.

Option 3: Inline Search Bar Widget

An inline search bar can be embedded anywhere on the page. When the user types a question and presses Enter or clicks send, the chatbot opens and receives the message.

Setup

1. Load the search bar script after the chatbot script:

<script src="https://scripts.dialogintelligens.dk/universal-chatbot.js?id=YOUR_CHATBOT_ID"></script>
<script src="https://dialogintelligens.github.io/scripts/inline-search-bar.js"></script>

2. Add a container element where you want the search bar to appear:

<div class="chatbot-search-widget" data-placeholder="Ask us anything..."></div>

Or use a class for multiple instances:

<div class="chatbot-search-widget"></div>

Manual initialization with custom config

<script>
  window.initChatbotSearchWidget("#my-custom-element", {
    placeholder: "How can we help?",
    sendIconColor: "#333",
    borderRadius: "10px",
    maxWidth: "500px",
  });
</script>

Option 4: Send a Message via postMessage

You can open the chatbot and send a pre-filled message by posting a message directly to the chatbot iframe. This is how the inline search bar works internally.

<script>
  function openChatWithMessage(message) {
    window.DialogIntelligens.open();
 
    setTimeout(() => {
      const iframe = document.getElementById("chat-iframe");
      if (iframe && iframe.contentWindow) {
        iframe.contentWindow.postMessage(
          {
            action: "externalMessage",
            message: message,
            source: "custom-widget",
          },
          "*",
        );
      }
    }, 1000);
  }
</script>
 
<button onclick="openChatWithMessage('I need help with my order')">Order support</button>

Notes

• window.DialogIntelligens is available as soon as the chatbot script loads.
• The open() method is safe to call even if the chatbot is already open. It will not toggle it closed.
• open(message) opens the chat and sends the message. If the chat is already open, the message is still delivered.
• The ?chat=open and ?message= URL parameters only trigger once per page load and are removed from the URL bar.
• When using postMessage to send a message, use a timeout of roughly 1000ms to let the iframe initialize after opening.