@hellotext/hellotext 2.4.53 → 2.5.0

package/lib/hellotext.cjs

@@ -36,12 +36,17 @@ let Hellotext = /*#__PURE__*/function () {
       this.query = new _models.Query();
       const businessData = await this.business.hydrate();
       const webchatConfig = config.webchat === false ? false : this.mergeWebchatConfig(businessData && businessData.webchat || {}, config.webchat || {});
+      const whatsappConfig = config.whatsappWidget === false ? false : this.mergeWhatsAppConfig(businessData && businessData.whatsapp || {}, config.whatsappWidget || {});
       const hasExplicitBehaviourOverride = config.webchat && config.webchat !== false && Object.prototype.hasOwnProperty.call(config.webchat, 'behaviour');
       _core.Configuration.webchat.behaviourOverride = hasExplicitBehaviourOverride;
       if (webchatConfig && webchatConfig.id) {
         _core.Configuration.webchat.assign(webchatConfig);
         this.webchat = await _models.Webchat.load(webchatConfig.id);
       }
+      if (whatsappConfig && whatsappConfig.id) {
+        _core.Configuration.whatsapp.assign(whatsappConfig);
+        this.whatsapp = await _models.WhatsAppWidget.load(whatsappConfig.id);
+      }
       if (typeof MutationObserver !== 'undefined') {
         this.forms.collectExistingFormsOnPage();
       }
@@ -51,6 +56,11 @@ let Hellotext = /*#__PURE__*/function () {
     value: function mergeWebchatConfig(dashboardConfig, localConfig) {
       return this.deepMergePlainObjects(dashboardConfig, localConfig);
     }
+  }, {
+    key: "mergeWhatsAppConfig",
+    value: function mergeWhatsAppConfig(dashboardConfig, localConfig) {
+      return this.deepMergePlainObjects(dashboardConfig, localConfig);
+    }
   }, {
     key: "deepMergePlainObjects",
     value: function deepMergePlainObjects(base, override) {
@@ -226,5 +236,6 @@ Hellotext.eventEmitter = new _core.Event();
 Hellotext.forms = void 0;
 Hellotext.business = void 0;
 Hellotext.webchat = void 0;
+Hellotext.whatsapp = void 0;
 var _default = Hellotext;
 exports.default = _default;

package/lib/hellotext.js

@@ -10,7 +10,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { Configuration, Event } from './core';
 import API, { Response, keepaliveFor } from './api';
-import { Business, Fingerprint, FormCollection, Page, Query, Session, User, Webchat } from './models';
+import { Business, Fingerprint, FormCollection, Page, Query, Session, User, Webchat, WhatsAppWidget } from './models';
 import { NotInitializedError } from './errors';
 var Hellotext = /*#__PURE__*/function () {
   function Hellotext() {
@@ -35,12 +35,17 @@ var Hellotext = /*#__PURE__*/function () {
         this.query = new Query();
         var businessData = yield this.business.hydrate();
         var webchatConfig = config.webchat === false ? false : this.mergeWebchatConfig(businessData && businessData.webchat || {}, config.webchat || {});
+        var whatsappConfig = config.whatsappWidget === false ? false : this.mergeWhatsAppConfig(businessData && businessData.whatsapp || {}, config.whatsappWidget || {});
         var hasExplicitBehaviourOverride = config.webchat && config.webchat !== false && Object.prototype.hasOwnProperty.call(config.webchat, 'behaviour');
         Configuration.webchat.behaviourOverride = hasExplicitBehaviourOverride;
         if (webchatConfig && webchatConfig.id) {
           Configuration.webchat.assign(webchatConfig);
           this.webchat = yield Webchat.load(webchatConfig.id);
         }
+        if (whatsappConfig && whatsappConfig.id) {
+          Configuration.whatsapp.assign(whatsappConfig);
+          this.whatsapp = yield WhatsAppWidget.load(whatsappConfig.id);
+        }
         if (typeof MutationObserver !== 'undefined') {
           this.forms.collectExistingFormsOnPage();
         }
@@ -55,6 +60,11 @@ var Hellotext = /*#__PURE__*/function () {
     value: function mergeWebchatConfig(dashboardConfig, localConfig) {
       return this.deepMergePlainObjects(dashboardConfig, localConfig);
     }
+  }, {
+    key: "mergeWhatsAppConfig",
+    value: function mergeWhatsAppConfig(dashboardConfig, localConfig) {
+      return this.deepMergePlainObjects(dashboardConfig, localConfig);
+    }
   }, {
     key: "deepMergePlainObjects",
     value: function deepMergePlainObjects(base, override) {
@@ -240,4 +250,5 @@ Hellotext.eventEmitter = new Event();
 Hellotext.forms = void 0;
 Hellotext.business = void 0;
 Hellotext.webchat = void 0;
+Hellotext.whatsapp = void 0;
 export default Hellotext;

package/lib/models/index.cjs

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "Webchat", {
     return _webchat.Webchat;
   }
 });
+Object.defineProperty(exports, "WhatsAppWidget", {
+  enumerable: true,
+  get: function () {
+    return _whatsapp_widget.WhatsAppWidget;
+  }
+});
 var _business = require("./business");
 var _cookies = require("./cookies");
 var _fingerprint = require("./fingerprint");
@@ -79,4 +85,5 @@ var _query = require("./query");
 var _session = require("./session");
 var _user = require("./user");
 var _utm = require("./utm");
-var _webchat = require("./webchat");
+var _webchat = require("./webchat");
+var _whatsapp_widget = require("./whatsapp_widget");

package/lib/models/index.js

@@ -8,4 +8,5 @@ export { Query } from './query';
 export { Session } from './session';
 export { User } from './user';
 export { UTM } from './utm';
-export { Webchat } from './webchat';
+export { Webchat } from './webchat';
+export { WhatsAppWidget } from './whatsapp_widget';

package/lib/models/webchat.cjs

@@ -29,6 +29,7 @@ let Webchat = /*#__PURE__*/function () {
         return false;
       }
       this.containerToAppendTo.appendChild(this.data.html);
+      this.markCoexistingWidgets();
       this.mounted = true;
       return true;
     }
@@ -66,6 +67,15 @@ let Webchat = /*#__PURE__*/function () {
     get: function () {
       return _business.Business.waitForStylesheet(_business.Business.latestStylesheet);
     }
+  }, {
+    key: "markCoexistingWidgets",
+    value: function markCoexistingWidgets() {
+      const webchat = this.data.html;
+      const whatsapp = document.querySelector('.hellotext--whatsapp-widget');
+      if (!webchat || !whatsapp) return;
+      webchat.classList.add('hellotext--with-whatsapp-widget');
+      whatsapp.classList.add('hellotext--with-webchat');
+    }
   }], [{
     key: "load",
     value: async function load(id) {

package/lib/models/webchat.js

@@ -25,6 +25,7 @@ var Webchat = /*#__PURE__*/function () {
           return false;
         }
         this.containerToAppendTo.appendChild(this.data.html);
+        this.markCoexistingWidgets();
         this.mounted = true;
         return true;
       });
@@ -67,6 +68,15 @@ var Webchat = /*#__PURE__*/function () {
     get: function get() {
       return Business.waitForStylesheet(Business.latestStylesheet);
     }
+  }, {
+    key: "markCoexistingWidgets",
+    value: function markCoexistingWidgets() {
+      var webchat = this.data.html;
+      var whatsapp = document.querySelector('.hellotext--whatsapp-widget');
+      if (!webchat || !whatsapp) return;
+      webchat.classList.add('hellotext--with-whatsapp-widget');
+      whatsapp.classList.add('hellotext--with-webchat');
+    }
   }], [{
     key: "load",
     value: function () {

package/lib/models/whatsapp_widget.cjs

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WhatsAppWidget = void 0;
+var _core = require("../core");
+var _api = _interopRequireDefault(require("../api"));
+var _business = require("./business");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+let WhatsAppWidget = /*#__PURE__*/function () {
+  function WhatsAppWidget(data) {
+    _classCallCheck(this, WhatsAppWidget);
+    this.data = data;
+    this.mounted = false;
+    this.rendered = Promise.resolve(false);
+  }
+  _createClass(WhatsAppWidget, [{
+    key: "render",
+    value: async function render() {
+      if (!this.data.html) return false;
+      const container = this.containerToAppendTo;
+      if (!container) {
+        console.warn(`Hellotext WhatsApp widget was not mounted because the container ${_core.Configuration.whatsapp.container} was not found.`);
+        return false;
+      }
+      if (!(await this.stylesheetLoaded)) {
+        console.warn('Hellotext WhatsApp widget was not mounted because its stylesheet failed to load.');
+        return false;
+      }
+      container.appendChild(this.data.html);
+      this.markCoexistingWidgets();
+      this.mounted = true;
+      return true;
+    }
+  }, {
+    key: "containerToAppendTo",
+    get: function () {
+      try {
+        return document.querySelector(_core.Configuration.whatsapp.container);
+      } catch (_) {
+        return null;
+      }
+    }
+  }, {
+    key: "stylesheetLoaded",
+    get: function () {
+      return _business.Business.waitForStylesheet(_business.Business.latestStylesheet);
+    }
+  }, {
+    key: "markCoexistingWidgets",
+    value: function markCoexistingWidgets() {
+      const webchat = document.querySelector('.hellotext--webchat:not(.hellotext--whatsapp-widget)');
+      const whatsapp = this.data.html;
+      if (!webchat || !whatsapp) return;
+      webchat.classList.add('hellotext--with-whatsapp-widget');
+      whatsapp.classList.add('hellotext--with-webchat');
+    }
+  }], [{
+    key: "load",
+    value: async function load(id) {
+      const widget = new WhatsAppWidget({
+        id,
+        html: await _api.default.whatsappWidgets.get(id)
+      });
+      widget.rendered = widget.render();
+      return widget;
+    }
+  }]);
+  return WhatsAppWidget;
+}();
+exports.WhatsAppWidget = WhatsAppWidget;

package/lib/models/whatsapp_widget.js

@@ -0,0 +1,84 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { Configuration } from '../core';
+import API from '../api';
+import { Business } from './business';
+var WhatsAppWidget = /*#__PURE__*/function () {
+  function WhatsAppWidget(data) {
+    _classCallCheck(this, WhatsAppWidget);
+    this.data = data;
+    this.mounted = false;
+    this.rendered = Promise.resolve(false);
+  }
+  _createClass(WhatsAppWidget, [{
+    key: "render",
+    value: function () {
+      var _render = _asyncToGenerator(function* () {
+        if (!this.data.html) return false;
+        var container = this.containerToAppendTo;
+        if (!container) {
+          console.warn("Hellotext WhatsApp widget was not mounted because the container ".concat(Configuration.whatsapp.container, " was not found."));
+          return false;
+        }
+        if (!(yield this.stylesheetLoaded)) {
+          console.warn('Hellotext WhatsApp widget was not mounted because its stylesheet failed to load.');
+          return false;
+        }
+        container.appendChild(this.data.html);
+        this.markCoexistingWidgets();
+        this.mounted = true;
+        return true;
+      });
+      function render() {
+        return _render.apply(this, arguments);
+      }
+      return render;
+    }()
+  }, {
+    key: "containerToAppendTo",
+    get: function get() {
+      try {
+        return document.querySelector(Configuration.whatsapp.container);
+      } catch (_) {
+        return null;
+      }
+    }
+  }, {
+    key: "stylesheetLoaded",
+    get: function get() {
+      return Business.waitForStylesheet(Business.latestStylesheet);
+    }
+  }, {
+    key: "markCoexistingWidgets",
+    value: function markCoexistingWidgets() {
+      var webchat = document.querySelector('.hellotext--webchat:not(.hellotext--whatsapp-widget)');
+      var whatsapp = this.data.html;
+      if (!webchat || !whatsapp) return;
+      webchat.classList.add('hellotext--with-whatsapp-widget');
+      whatsapp.classList.add('hellotext--with-webchat');
+    }
+  }], [{
+    key: "load",
+    value: function () {
+      var _load = _asyncToGenerator(function* (id) {
+        var widget = new WhatsAppWidget({
+          id,
+          html: yield API.whatsappWidgets.get(id)
+        });
+        widget.rendered = widget.render();
+        return widget;
+      });
+      function load(_x) {
+        return _load.apply(this, arguments);
+      }
+      return load;
+    }()
+  }]);
+  return WhatsAppWidget;
+}();
+export { WhatsAppWidget };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.4.53",
+  "version": "2.5.0",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
   "main": "lib/index.cjs",

package/src/api/index.js

@@ -3,6 +3,7 @@ import EventsAPI from './events'
 import FormsAPI from './forms'
 import IdentificationsAPI from './identifications'
 import WebchatsAPI from './webchats'
+import WhatsAppWidgetsAPI from './whatsapp_widgets'
 import AcksAPI from './acks'
 
 // Browsers keep `fetch(..., { keepalive: true })` requests alive during page
@@ -45,6 +46,10 @@ export default class API {
     return WebchatsAPI
   }
 
+  static get whatsappWidgets() {
+    return WhatsAppWidgetsAPI
+  }
+
   static get identifications() {
     return IdentificationsAPI
   }

package/src/api/whatsapp_widgets.js

@@ -0,0 +1,71 @@
+import { Configuration, Locale } from '../core'
+import Hellotext from '../hellotext'
+
+class WhatsAppWidgetsAPI {
+  static get endpoint() {
+    return Configuration.endpoint('public/widgets/whatsapp')
+  }
+
+  static async get(id) {
+    const url = new URL(`${this.endpoint}/${id}`)
+
+    url.searchParams.append('locale', Locale.toString())
+    url.searchParams.append('placement', Configuration.whatsapp.placement)
+    this.appendWhatsAppOverrides(url)
+
+    const response = await this.fetchWidget(url)
+
+    if (!response.ok) return null
+
+    const data = await this.parseWidgetResponse(response)
+
+    if (!data) return null
+
+    if (!Hellotext.business.data) {
+      Hellotext.business.setData(data.business)
+      Hellotext.business.setLocale(data.locale)
+    }
+
+    return new DOMParser().parseFromString(data.html, 'text/html').querySelector('article')
+  }
+
+  static appendWhatsAppOverrides(url) {
+    const { appearance, body, number } = Configuration.whatsapp
+
+    this.appendIfSupplied(
+      url,
+      'whatsapp[appearance][launcher][icon_url]',
+      appearance.launcher?.iconUrl,
+    )
+
+    this.appendIfSupplied(url, 'whatsapp[number]', number)
+    this.appendIfSupplied(url, 'whatsapp[body]', body)
+  }
+
+  static appendIfSupplied(url, key, value) {
+    if (value === undefined || value === null) return
+
+    url.searchParams.append(key, String(value))
+  }
+
+  static async fetchWidget(url) {
+    try {
+      return await fetch(url, {
+        method: 'GET',
+        headers: Hellotext.headers,
+      })
+    } catch (_) {
+      return { ok: false }
+    }
+  }
+
+  static async parseWidgetResponse(response) {
+    try {
+      return await response.json()
+    } catch (_) {
+      return null
+    }
+  }
+}
+
+export default WhatsAppWidgetsAPI

package/src/core/configuration/whatsapp.js

@@ -0,0 +1,143 @@
+/**
+ * @typedef {'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'} Placement
+ * @description Valid placements for the WhatsApp widget.
+ */
+
+/**
+ * @enum {Placement}
+ */
+const placements = {
+  TOP_LEFT: 'top-left',
+  TOP_RIGHT: 'top-right',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_RIGHT: 'bottom-right'
+}
+
+/**
+ * @typedef {Object} WhatsAppWidgetAppearance
+ * @property {Object} [launcher] - Launcher appearance overrides.
+ * @property {string} [launcher.iconUrl] - Image URL used for the launcher icon.
+ */
+
+/**
+ * @class WhatsApp
+ * @classdesc Configuration for the standalone WhatsApp widget.
+ * @property {String} id - The id of the WhatsApp widget.
+ * @property {String} container - The container to append the widget to, defaults to 'body'.
+ * @property {Placement} placement - The placement of the widget, defaults to 'bottom-right'.
+ * @property {String} number - WhatsApp number used by the widget link.
+ * @property {String} body - Prefilled WhatsApp compose text.
+ * @property {WhatsAppWidgetAppearance} appearance - Appearance overrides.
+ */
+class WhatsApp {
+  static _id
+  static _container = 'body'
+  static _placement = 'bottom-right'
+  static _appearance = {}
+  static _number = null
+  static _body = null
+
+  static set id(value) {
+    this._id = value
+  }
+
+  static get id() {
+    return this._id
+  }
+
+  static set container(value) {
+    this._container = value
+  }
+
+  static get container() {
+    return this._container
+  }
+
+  static set placement(value) {
+    if (!Object.values(placements).includes(value)) {
+      throw new Error(`Invalid placement value: ${value}`)
+    }
+
+    this._placement = value
+  }
+
+  static get placement() {
+    return this._placement
+  }
+
+  static get appearance() {
+    return this._appearance
+  }
+
+  static set appearance(value) {
+    if (!this.isPlainObject(value)) {
+      throw new Error('Appearance must be an object')
+    }
+
+    Object.entries(value).forEach(([key, nestedValue]) => {
+      if (key !== 'launcher') {
+        throw new Error(`Invalid appearance property: ${key}`)
+      }
+
+      if (!this.isPlainObject(nestedValue)) {
+        throw new Error(`Appearance ${key} must be an object`)
+      }
+
+      Object.entries(nestedValue).forEach(([nestedKey, propertyValue]) => {
+        if (nestedKey !== 'iconUrl') {
+          throw new Error(`Invalid appearance launcher property: ${nestedKey}`)
+        }
+
+        if (propertyValue == null) {
+          return
+        }
+
+        if (typeof propertyValue !== 'string') {
+          throw new Error(`Invalid appearance ${key}.${nestedKey} value: ${propertyValue}`)
+        }
+      })
+    })
+
+    this._appearance = value
+  }
+
+  static get number() {
+    return this._number
+  }
+
+  static set number(value) {
+    if (value != null && typeof value !== 'string') {
+      throw new Error(`Invalid number value: ${value}`)
+    }
+
+    this._number = value
+  }
+
+  static get body() {
+    return this._body
+  }
+
+  static set body(value) {
+    if (value != null && typeof value !== 'string') {
+      throw new Error(`Invalid body value: ${value}`)
+    }
+
+    this._body = value
+  }
+
+  static assign(props) {
+    if (props) {
+      Object.entries(props).forEach(([key, value]) => {
+        this[key] = value
+      })
+    }
+
+    return this
+  }
+
+  static isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value)
+  }
+}
+
+export { WhatsApp }

package/src/core/configuration.js

@@ -1,6 +1,7 @@
 import { Forms } from './configuration/forms'
 import { Locale } from './configuration/locale'
 import { Webchat } from './configuration/webchat'
+import { WhatsApp } from './configuration/whatsapp'
 
 /**
  * @class Configuration
@@ -10,6 +11,7 @@ import { Webchat } from './configuration/webchat'
  * @property {String} [session] - session id
  * @property {Forms} [forms] - form configuration
  * @property {Webchat} [webchat] - webchat configuration
+ * @property {WhatsApp} [whatsappWidget] - WhatsApp widget configuration
  * @property {Locale} [locale] - locale configuration
  */
 class Configuration {
@@ -21,6 +23,7 @@ class Configuration {
 
   static forms = Forms
   static webchat = Webchat
+  static whatsapp = WhatsApp
 
   /**
    *
@@ -42,6 +45,8 @@ class Configuration {
           this.forms = Forms.assign(value)
         } else if (key === 'webchat') {
           this.webchat = Webchat.assign(value)
+        } else if (key === 'whatsappWidget') {
+          this.whatsapp = WhatsApp.assign(value)
         } else {
           this[key] = value
         }

package/src/core/index.js

@@ -1,4 +1,5 @@
 export { Configuration } from './configuration'
 export { Locale } from './configuration/locale'
 export { Webchat } from './configuration/webchat'
+export { WhatsApp } from './configuration/whatsapp'
 export { default as Event } from './event'

package/src/hellotext.js

@@ -10,6 +10,7 @@ import {
   Session,
   User,
   Webchat,
+  WhatsAppWidget,
 } from './models'
 
 import { NotInitializedError } from './errors'
@@ -19,6 +20,7 @@ class Hellotext {
   static forms
   static business
   static webchat
+  static whatsapp
 
   /**
    * initialize the module.
@@ -44,6 +46,13 @@ class Hellotext {
             (businessData && businessData.webchat) || {},
             config.webchat || {},
           )
+    const whatsappConfig =
+      config.whatsappWidget === false
+        ? false
+        : this.mergeWhatsAppConfig(
+            (businessData && businessData.whatsapp) || {},
+            config.whatsappWidget || {},
+          )
 
     const hasExplicitBehaviourOverride =
       config.webchat &&
@@ -56,6 +65,11 @@ class Hellotext {
       this.webchat = await Webchat.load(webchatConfig.id)
     }
 
+    if (whatsappConfig && whatsappConfig.id) {
+      Configuration.whatsapp.assign(whatsappConfig)
+      this.whatsapp = await WhatsAppWidget.load(whatsappConfig.id)
+    }
+
     if (typeof MutationObserver !== 'undefined') {
       this.forms.collectExistingFormsOnPage()
     }
@@ -65,6 +79,10 @@ class Hellotext {
     return this.deepMergePlainObjects(dashboardConfig, localConfig)
   }
 
+  static mergeWhatsAppConfig(dashboardConfig, localConfig) {
+    return this.deepMergePlainObjects(dashboardConfig, localConfig)
+  }
+
   static deepMergePlainObjects(base, override) {
     const result = { ...base }
 

package/src/models/index.js

@@ -9,3 +9,4 @@ export { Session } from './session'
 export { User } from './user'
 export { UTM } from './utm'
 export { Webchat } from './webchat'
+export { WhatsAppWidget } from './whatsapp_widget'