DearDoc AI Chat Integration

The purpose of this document is to introduce the integration of the DearDoc AI Chat in the publisher web application.

Introduction

The DearDoc Chatbot is a web app, compatible with both mobile, desktop and other devices that allows users to request appointments and obtain other useful information. The application is developed with state of art technology. The core is implemented in React and the integration layer includes the dynamic creation of an iFrame. The customization is dynamically fetched for each Chatbot and variable to the domain from whom it is requested.

The publisher adaptation includes the usage of the SomaFont provided, as well as the publisher colors and logos. The customization is applied to all the Chatbots created in the publisher context. They may differ from the chatbots embedded in the customers website.

Requirements

In order to start a new chatbot, you need an API Key, each customer or practice has a different one, this will help retrieve the necessary fields and will help create a new security token for any new conversation.

This is an example API Key placeholder: YOUR_API_KEY_HERE

Implementation

The DearDoc AI Chat can be started at any moment dynamically inside of any web application. There is a setup step and a start step.

Setup

You need to include the following code in your application:

(function (window, document) {
 var targetWindow = (window.parent && window.parent !== window) ? window.parent : window;
 if (targetWindow.ddChatbot) {
   console.error('Deardoc Chatbot embed already included');
   return;
 }
 targetWindow.ddChatbot = {},
   m = ['init', 'debug'];
 targetWindow.ddChatbot._c = [];
 m.forEach(me => targetWindow.ddChatbot[me] = function () {
   targetWindow.ddChatbot._c.push([me, arguments])
 });
 var elt = targetWindow.document.createElement('script');
 elt.type = 'text/javascript';
 elt.async = true;
 elt.src = "https://chat.getdeardoc.com/build/shim.js?v=1.0.3";
 var before = targetWindow.document.getElementsByTagName('script')[0];
 if (before) {
   before.parentNode.insertBefore(elt, before);
 } else {
   targetWindow.document.head.appendChild(elt);
 }
})(window, document, undefined);

This will create a variable context inside the user’s browser that will allow it to start any chatbot afterwards.

Start

In order to start a chatbot, you need to call a similar function:

ddChatbot.init('API_KEY','URL','VERSION');

The only dynamic parameter will be the API KEY. The URL and the version will be static.

This is an example working code:

var targetWindow = (window.parent && window.parent !== window) ? window.parent : window;
targetWindow.ddChatbot.init('YOUR_API_KEY_HERE','https://chat.getdeardoc.com/build','1.0.3');

Quickstart

Our solution can also be started with a single command, it’s not necessary to pre initialize anything, you just need to run both steps all together:

(function (window, document) {
 var targetWindow = (window.parent && window.parent !== window) ? window.parent : window;
 if (targetWindow.ddChatbot) {
   console.error('Deardoc Chatbot embed already included');
   return;
 }
 targetWindow.ddChatbot = {},
   m = ['init', 'debug'];
 targetWindow.ddChatbot._c = [];
 m.forEach(me => targetWindow.ddChatbot[me] = function () {
   targetWindow.ddChatbot._c.push([me, arguments])
 });
 var elt = targetWindow.document.createElement('script');
 elt.type = 'text/javascript';
 elt.async = true;
 elt.src = "https://chat.getdeardoc.com/build/shim.js?v=1.0.3";
 var before = targetWindow.document.getElementsByTagName('script')[0];
 if (before) {
   before.parentNode.insertBefore(elt, before);
 } else {
   targetWindow.document.head.appendChild(elt);
 }
})(window, document, undefined);
var targetWindow = (window.parent && window.parent !== window) ? window.parent : window;
targetWindow.ddChatbot.init('YOUR_API_KEY_HERE','https://chat.getdeardoc.com/build','1.0.3');

Customize Chatbot with Provider NPI

The chatbot can be tailored to deliver a more personalized experience by associating it with specific doctors or providers through their National Provider Identifier (NPI). This can help in directing inquiries more effectively or providing specific responses linked to each provider.

To customize the chatbot with a doctor's NPI, you'll call the init function with an additional options parameter that includes the NPI. Here is how you can configure it:

targetWindow.ddChatbot.init('API_KEY', 'URL', 'VERSION', false, { npi: "1234567890" });

Example

To initialize for a specific doctor, replace the NPI value with the correct identifier:

window.parent.ddChatbot.init(
  'YOUR_API_KEY_HERE',
  'https://example.com/chatbot',
  '1.0.3',
  false,
  { npi: "9876543210" }

This customization enables the chatbot to recognize and handle interactions relevant to the specified provider, enhancing the efficiency and personalization of user queries.

Toggle Chatbot

This latest version of the chatbot script includes a function to show and hide the chatbot. This allows the user to initialize the chatbot previously and decide when to instantly show it or hide it. In order to open the chatbot on request, the autostart should be disabled, and the chatbot will pop up on demand with the following function.

ddChatbot.toggleChatbot();

Toggle Chatbot with a message

The chatbot can also be initialized with a first message on behalf of the customer, so the toggle function allows adding an optional parameter as the first message of the customer. Example:

ddChatbot.toggleChatbot("I want to request an appointment");

Toggle Chatbot with a message from a third party window or iFrame

By default, web technology does not allow direct communication of in memory variables or componentes between different iframes or windows. In order to allow opening the Chatbot from a third party iFrame, we design a postMessage event, that sent to the iFrame, will open up the Chatbot and write the first message on behalf of the customer.

Interface of the event postMessage:

// Replace "Hello" with the desired message
window.parent.postMessage({ type: "TOGGLE_CHATBOT", message: "Hello" }, "*");

This method ensures the chatbot can be engaged with an initial message even when interacting through an embedded context. Review and configure your security settings to allow this communication.