Chatbot integration in websites & (native) apps

Introduction

The DialogShift Chatbot can be integrated easily into any app or website.

There are two fundamental ways of integrating the chatbot:

• Displaying the DialogShift chat button in an HTML GUI using the prepared code snippet (suitable for Desktop & Mobile contexts)
• Linking to the DialogShift chat widget and opening it in a new browser tab/web view

Displaying the DialogShift chat button

Displaying the chat button requires embedding the chat button with a JS code snippet provided by DialogShift. The snippet should be able to identify the language from the host page and set the chat language accordingly.

The hotel chatbot will be identified by DialogShift's clientid. In the demo below, the clientid is: pro12bd

Here you will find a working example of this code snippet. The demo client pro12bd can be used to test the technical integration.

;(function () {
  function loadStyle(href) {
    var style = document.createElement('link')
    style.href = href
    style.type = 'text/css'
    style.rel = 'stylesheet'
    document.getElementsByTagName('head')[0].appendChild(style)
  }

  function loadScript(src, callback) {
    var script = document.createElement('script')
    var isLoaded = false
    script.async = true
    script.src = src
    script.onload = script.onreadystatechange = function () {
      if (!isLoaded && (!this.readyState || this.readyState == 'complete')) {
        callback()
      }
    }
    document.getElementsByTagName('head')[0].appendChild(script)
  }

  function loadSDK(callback) {
    var sdkJsCdn =
      'https://cdn.dialogshift.com/sdk/latest/dialogshift-webchat-sdk.umd.js'
    var sdkCssCdn =
      'https://cdn.dialogshift.com/sdk/latest/dialogshift-webchat-sdk.min.css'

    loadScript(sdkJsCdn, callback)
    loadStyle(sdkCssCdn)
  }

  function parseLocale(defaultLocale) {
    var locales = ['en-US', 'en-GB', 'de-DE', 'de', 'en']
    var locale = document.documentElement.lang

    if (locales.indexOf(locale) !== -1) {
      return locale
    }

    return defaultLocale
  }

  loadSDK(function () {
    var client = new Dialogshift.instance({
      id: 'pro12bd',
      locale: parseLocale('de-DE').substr(0, 2),
    })
  })
})()

During the instantiation you can pass user context information to the chat (booking ID, PmsName, PmsEmail, ...)

Example for demo chatbot pro12bd :

var client = new Dialogshift.instance({
  id: 'pro12bd',
  locale: parseLocale('de-DE').substr(0, 2),
  context: {
    channel: "pwa-guestapp",
    guestName: "John Doe",
    room: "Edelweiss Suite",
    email: "joe@doe.com",
  }
})

These context attributes are per default visible to the hotel team in the DialogShift App:

• guestName (string)
• room (string)
• email (string)

This context will be displayed to the hotel team after a chat has been handed over from the chatbot to a human. If you pass the email address, your users will be notified automatically in case they don't notice a new answer from the hotel team in the chat.

Context information can also be used in the chat texts: 

Hello {{PmsName | default("there", true)}}, we are looking forward ...

Linking to the DialogShift chat widget

You can add links to the chat to any elements of your app or website.

Please use links structured like in this demo:

German:

https://webchat.dialogshift.com/?clid=pro12bd&locale=de&channel=pwa-guestapp

English:

https://webchat.dialogshift.com/?clid=pro12bd&locale=en&channel=pwa-guestapp

Context can be added as standard URL parameters:

&PmsEmail=Joe@doe.com

Setting the correct channel code

Please use any of the standard channel codes:

• pwa-guestapp  (for a custom guest hotel app)
• pwa-ibe  (for integration in the booking engine)
• pwa-mice (for integration in MICE booking engines)
• pwa-staff (for integration in employee apps)

If in doubt or for an IT partnership, DailogShift will provide a custom channel code.

Reserved keys to pass guest information

• email Email of the guest
• guestName first and last name of the guest
• space