@hellotext/hellotext 2.3.8 → 2.4.0

package/lib/core/configuration/webchat.js

@@ -33,13 +33,13 @@ var strategies = {
 };
 
 /**
- * @typedef {'modal' | 'popover'} Behaviour
+ * @typedef {'modal' | 'popover'} Mode
  */
 
 /**
- * @enum {Behaviour}
+ * @enum {Mode}
  */
-var behaviors = {
+var modes = {
   MODAL: 'modal',
   POPOVER: 'popover'
 };
@@ -51,6 +51,20 @@ var behaviors = {
  * @property {string} typography - The typography style (e.g., font family).
  */
 
+/**
+ * @typedef {Object} Appearance
+ * @property {Object} [header] - Header appearance overrides.
+ * @property {string} [header.name] - Business name shown in the webchat header.
+ * @property {Object} [launcher] - Launcher appearance overrides.
+ * @property {string} [launcher.iconUrl] - Image URL used for the launcher icon.
+ */
+
+/**
+ * @typedef {Object} WhatsApp
+ * @property {string} [number] - WhatsApp number used by the handoff configuration.
+ * @property {boolean} [restrictToChannel] - Whether handoff should be restricted to the configured channel.
+ */
+
 /**
  * @class Webchat
  * @classdesc
@@ -58,10 +72,11 @@ var behaviors = {
  * @property {String} id - the id of the webchat.
  * @property {String} container - the container to append the webchat to, defaults to 'body'
  * @property {Placement} placement - the placement of the webchat within the container, defaults to "bottom-right".
- * @property {String} classes - additional classes to apply to the webchat popup.
- * @property {String} triggerClasses - additional classes to apply to the webchat popup trigger.
- * @property {Behaviour} behaviour - the behaviour of the webchat, defaults to 'popover'.
+ * @property {Mode} mode - how the webchat behaves while open, defaults to 'popover'.
+ * @property {Object} behaviour - runtime opening behaviour for the webchat.
  * @property {Style} style - the style of the webchat.
+ * @property {Appearance} appearance - appearance overrides.
+ * @property {WhatsApp} whatsapp - WhatsApp handoff overrides.
  * @property {Strategy} strategy - the strategy used to position the webchat. Defaults to 'absolute'
  */
 var Webchat = /*#__PURE__*/function () {
@@ -87,36 +102,6 @@ var Webchat = /*#__PURE__*/function () {
       }
       this._placement = value;
     }
-  }, {
-    key: "classes",
-    get: function get() {
-      if (typeof this._classes === 'string') {
-        return this._classes.split(',').map(c => c.trim());
-      } else {
-        return this._classes;
-      }
-    },
-    set: function set(value) {
-      if (!Array.isArray(value) && typeof value !== 'string') {
-        throw new Error('classes must be an array or a string');
-      }
-      this._classes = value;
-    }
-  }, {
-    key: "triggerClasses",
-    get: function get() {
-      if (typeof this._triggerClasses === 'string') {
-        return this._triggerClasses.split(',').map(c => c.trim());
-      } else {
-        return this._triggerClasses;
-      }
-    },
-    set: function set(value) {
-      if (!Array.isArray(value) && typeof value !== 'string') {
-        throw new Error('triggerClasses must be an array or a string');
-      }
-      this._triggerClasses = value;
-    }
   }, {
     key: "id",
     get: function get() {
@@ -153,17 +138,103 @@ var Webchat = /*#__PURE__*/function () {
       });
       this._style = value;
     }
+  }, {
+    key: "appearance",
+    get: function get() {
+      return this._appearance;
+    },
+    set: function set(value) {
+      if (!this.isPlainObject(value)) {
+        throw new Error('Appearance must be an object');
+      }
+      Object.entries(value).forEach(_ref2 => {
+        var [key, nestedValue] = _ref2;
+        if (!['header', 'launcher'].includes(key)) {
+          throw new Error("Invalid appearance property: ".concat(key));
+        }
+        if (!this.isPlainObject(nestedValue)) {
+          throw new Error("Appearance ".concat(key, " must be an object"));
+        }
+        Object.entries(nestedValue).forEach(_ref3 => {
+          var [nestedKey, propertyValue] = _ref3;
+          if (key === 'header' && nestedKey !== 'name') {
+            throw new Error("Invalid appearance header property: ".concat(nestedKey));
+          }
+          if (key === 'launcher' && nestedKey !== 'iconUrl') {
+            throw new Error("Invalid appearance launcher property: ".concat(nestedKey));
+          }
+          if (propertyValue == null) {
+            return;
+          }
+          if (typeof propertyValue !== 'string') {
+            throw new Error("Invalid appearance ".concat(key, ".").concat(nestedKey, " value: ").concat(propertyValue));
+          }
+        });
+      });
+      this._appearance = value;
+    }
+  }, {
+    key: "whatsapp",
+    get: function get() {
+      return this._whatsapp;
+    },
+    set: function set(value) {
+      if (!this.isPlainObject(value)) {
+        throw new Error('WhatsApp must be an object');
+      }
+      Object.entries(value).forEach(_ref4 => {
+        var [key, nestedValue] = _ref4;
+        if (!['number', 'restrictToChannel'].includes(key)) {
+          throw new Error("Invalid WhatsApp property: ".concat(key));
+        }
+        if (nestedValue == null) {
+          return;
+        }
+        if (key === 'number' && typeof nestedValue !== 'string') {
+          throw new Error("Invalid WhatsApp number value: ".concat(nestedValue));
+        }
+        if (key === 'restrictToChannel' && typeof nestedValue !== 'boolean') {
+          throw new Error("Invalid WhatsApp restrictToChannel value: ".concat(nestedValue));
+        }
+      });
+      this._whatsapp = value;
+    }
+  }, {
+    key: "mode",
+    get: function get() {
+      return this._mode;
+    },
+    set: function set(value) {
+      if (!Object.values(modes).includes(value)) {
+        throw new Error("Invalid mode value: ".concat(value));
+      }
+      this._mode = value;
+    }
   }, {
     key: "behaviour",
     get: function get() {
       return this._behaviour;
     },
     set: function set(value) {
-      if (!Object.values(behaviors).includes(value)) {
+      if (value == null) {
+        this._behaviour = value;
+        return;
+      }
+      if (typeof value !== 'object' || Array.isArray(value)) {
         throw new Error("Invalid behaviour value: ".concat(value));
       }
       this._behaviour = value;
     }
+  }, {
+    key: "hasBehaviourOverride",
+    get: function get() {
+      return this._hasBehaviourOverride;
+    }
+  }, {
+    key: "behaviourOverride",
+    set: function set(value) {
+      this._hasBehaviourOverride = !!value;
+    }
   }, {
     key: "strategy",
     get: function get() {
@@ -182,8 +253,8 @@ var Webchat = /*#__PURE__*/function () {
     key: "assign",
     value: function assign(props) {
       if (props) {
-        Object.entries(props).forEach(_ref2 => {
-          var [key, value] = _ref2;
+        Object.entries(props).forEach(_ref5 => {
+          var [key, value] = _ref5;
           this[key] = value;
         });
       }
@@ -194,15 +265,22 @@ var Webchat = /*#__PURE__*/function () {
     value: function isHexOrRgba(value) {
       return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value) || /^rgba?\(\s*\d{1,3},\s*\d{1,3},\s*\d{1,3},?\s*(0|1|0?\.\d+)?\s*\)$/.test(value);
     }
+  }, {
+    key: "isPlainObject",
+    value: function isPlainObject(value) {
+      return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
   }]);
   return Webchat;
 }();
 Webchat._id = void 0;
 Webchat._container = 'body';
 Webchat._placement = 'bottom-right';
-Webchat._classes = [];
-Webchat._triggerClasses = [];
 Webchat._style = {};
-Webchat._behaviour = behaviors.POPOVER;
+Webchat._appearance = {};
+Webchat._whatsapp = {};
+Webchat._mode = modes.POPOVER;
+Webchat._behaviour = null;
+Webchat._hasBehaviourOverride = false;
 Webchat._strategy = null;
-export { behaviors, Webchat };
+export { modes, Webchat };

package/lib/hellotext.cjs

@@ -27,20 +27,50 @@ let Hellotext = /*#__PURE__*/function () {
      * @param business public business id
      * @param { Configuration } config
      */
-    async function initialize(business, config) {
+    async function initialize(business, config = {}) {
       this.business = new _models.Business(business);
       _core.Configuration.assign(config);
       _models.Session.initialize();
       this.page = new _models.Page();
       this.forms = new _models.FormCollection();
       this.query = new _models.Query();
-      if (_core.Configuration.webchat.id) {
-        this.webchat = await _models.Webchat.load(_core.Configuration.webchat.id);
+      const businessData = await this.business.hydrate();
+      const webchatConfig = config.webchat === false ? false : this.mergeWebchatConfig(businessData && businessData.webchat || {}, config.webchat || {});
+      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 (typeof MutationObserver !== 'undefined') {
         this.forms.collectExistingFormsOnPage();
       }
     }
+  }, {
+    key: "mergeWebchatConfig",
+    value: function mergeWebchatConfig(dashboardConfig, localConfig) {
+      return this.deepMergePlainObjects(dashboardConfig, localConfig);
+    }
+  }, {
+    key: "deepMergePlainObjects",
+    value: function deepMergePlainObjects(base, override) {
+      const result = {
+        ...base
+      };
+      Object.entries(override).forEach(([key, value]) => {
+        if (this.isPlainObject(value) && this.isPlainObject(result[key])) {
+          result[key] = this.deepMergePlainObjects(result[key], value);
+        } else {
+          result[key] = value;
+        }
+      });
+      return result;
+    }
+  }, {
+    key: "isPlainObject",
+    value: function isPlainObject(value) {
+      return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
 
     /**
      * Tracks an action that has happened on the page

package/lib/hellotext.js

@@ -25,25 +25,56 @@ var Hellotext = /*#__PURE__*/function () {
      * @param { Configuration } config
      */
     function () {
-      var _initialize = _asyncToGenerator(function* (business, config) {
+      var _initialize = _asyncToGenerator(function* (business) {
+        var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         this.business = new Business(business);
         Configuration.assign(config);
         Session.initialize();
         this.page = new Page();
         this.forms = new FormCollection();
         this.query = new Query();
-        if (Configuration.webchat.id) {
-          this.webchat = yield Webchat.load(Configuration.webchat.id);
+        var businessData = yield this.business.hydrate();
+        var webchatConfig = config.webchat === false ? false : this.mergeWebchatConfig(businessData && businessData.webchat || {}, config.webchat || {});
+        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 (typeof MutationObserver !== 'undefined') {
           this.forms.collectExistingFormsOnPage();
         }
       });
-      function initialize(_x, _x2) {
+      function initialize(_x) {
         return _initialize.apply(this, arguments);
       }
       return initialize;
     }()
+  }, {
+    key: "mergeWebchatConfig",
+    value: function mergeWebchatConfig(dashboardConfig, localConfig) {
+      return this.deepMergePlainObjects(dashboardConfig, localConfig);
+    }
+  }, {
+    key: "deepMergePlainObjects",
+    value: function deepMergePlainObjects(base, override) {
+      var result = _objectSpread({}, base);
+      Object.entries(override).forEach(_ref => {
+        var [key, value] = _ref;
+        if (this.isPlainObject(value) && this.isPlainObject(result[key])) {
+          result[key] = this.deepMergePlainObjects(result[key], value);
+        } else {
+          result[key] = value;
+        }
+      });
+      return result;
+    }
+  }, {
+    key: "isPlainObject",
+    value: function isPlainObject(value) {
+      return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
+
     /**
      * Tracks an action that has happened on the page
      *
@@ -73,7 +104,7 @@ var Hellotext = /*#__PURE__*/function () {
           body
         });
       });
-      function track(_x3) {
+      function track(_x2) {
         return _track.apply(this, arguments);
       }
       return track;
@@ -121,7 +152,7 @@ var Hellotext = /*#__PURE__*/function () {
         }
         return response;
       });
-      function identify(_x4) {
+      function identify(_x3) {
         return _identify.apply(this, arguments);
       }
       return identify;

package/lib/models/business.cjs

@@ -5,19 +5,85 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Business = void 0;
 var _locales = _interopRequireDefault(require("../locales"));
+var _businesses = _interopRequireDefault(require("../api/businesses"));
 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); }
+/**
+ * @typedef {Object} BusinessCountry
+ * @property {String} [code] - ISO country code configured for the business.
+ * @property {String} [prefix] - Phone country prefix configured for the business.
+ */
+/**
+ * @typedef {Object} BusinessWebchat
+ * @property {String} [id] - Dashboard webchat id configured for the business.
+ * @property {Object} [appearance] - Dashboard appearance defaults for the webchat.
+ * @property {Object} [whatsapp] - Dashboard WhatsApp handoff defaults for the webchat.
+ */
+/**
+ * Public business metadata returned by `public/businesses/:id`.
+ *
+ * @typedef {Object} BusinessData
+ * @property {String} [id] - Public business id.
+ * @property {BusinessCountry|String} [country] - Business country metadata.
+ * @property {Object} [features] - Feature flags enabled for the business.
+ * @property {String} [locale] - Default dashboard locale for the business.
+ * @property {String} [style_url] - Stylesheet URL to inject for dashboard-managed surfaces.
+ * @property {BusinessWebchat|null} [webchat] - Dashboard webchat defaults.
+ * @property {String|Array<String>} [whitelist] - Domain whitelist configuration.
+ * @property {String} [subscription] - Current business subscription tier.
+ */
+/**
+ * Public business context used by the SDK for tracking, forms, and webchat defaults.
+ */
 let Business = /*#__PURE__*/function () {
+  /**
+   * @param {String} id - Public business id.
+   */
   function Business(id) {
     _classCallCheck(this, Business);
     this.id = id;
     this.data = null;
   }
+
+  /**
+   * Hydrates business metadata from the public business endpoint.
+   *
+   * Fetch failures return `null` so tracking initialization can continue even
+   * when dashboard-driven webchat defaults are unavailable.
+   *
+   * @returns {Promise<BusinessData|null>}
+   */
   _createClass(Business, [{
+    key: "hydrate",
+    value: async function hydrate() {
+      try {
+        const response = await _businesses.default.get(this.id);
+        if (response.ok === false) {
+          return null;
+        }
+        const business = await response.json();
+        if (!business) {
+          return null;
+        }
+        this.setData(business);
+        if (business.locale) {
+          this.setLocale(business.locale);
+        }
+        return business;
+      } catch (_error) {
+        return null;
+      }
+    }
+
+    /**
+     * @param {BusinessData} data
+     * @returns {void}
+     */
+  }, {
     key: "setData",
     value: function setData(data) {
       this.data = data;
@@ -43,6 +109,11 @@ let Business = /*#__PURE__*/function () {
     get: function () {
       return this.data.whitelist !== 'disabled';
     }
+
+    /**
+     * @param {String} locale
+     * @returns {void}
+     */
   }, {
     key: "setLocale",
     value: function setLocale(locale) {

package/lib/models/business.js

@@ -1,16 +1,93 @@
+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 locales from '../locales';
+import BusinessesAPI from '../api/businesses';
+
+/**
+ * @typedef {Object} BusinessCountry
+ * @property {String} [code] - ISO country code configured for the business.
+ * @property {String} [prefix] - Phone country prefix configured for the business.
+ */
+
+/**
+ * @typedef {Object} BusinessWebchat
+ * @property {String} [id] - Dashboard webchat id configured for the business.
+ * @property {Object} [appearance] - Dashboard appearance defaults for the webchat.
+ * @property {Object} [whatsapp] - Dashboard WhatsApp handoff defaults for the webchat.
+ */
+
+/**
+ * Public business metadata returned by `public/businesses/:id`.
+ *
+ * @typedef {Object} BusinessData
+ * @property {String} [id] - Public business id.
+ * @property {BusinessCountry|String} [country] - Business country metadata.
+ * @property {Object} [features] - Feature flags enabled for the business.
+ * @property {String} [locale] - Default dashboard locale for the business.
+ * @property {String} [style_url] - Stylesheet URL to inject for dashboard-managed surfaces.
+ * @property {BusinessWebchat|null} [webchat] - Dashboard webchat defaults.
+ * @property {String|Array<String>} [whitelist] - Domain whitelist configuration.
+ * @property {String} [subscription] - Current business subscription tier.
+ */
+
+/**
+ * Public business context used by the SDK for tracking, forms, and webchat defaults.
+ */
 var Business = /*#__PURE__*/function () {
+  /**
+   * @param {String} id - Public business id.
+   */
   function Business(id) {
     _classCallCheck(this, Business);
     this.id = id;
     this.data = null;
   }
+
+  /**
+   * Hydrates business metadata from the public business endpoint.
+   *
+   * Fetch failures return `null` so tracking initialization can continue even
+   * when dashboard-driven webchat defaults are unavailable.
+   *
+   * @returns {Promise<BusinessData|null>}
+   */
   _createClass(Business, [{
+    key: "hydrate",
+    value: function () {
+      var _hydrate = _asyncToGenerator(function* () {
+        try {
+          var response = yield BusinessesAPI.get(this.id);
+          if (response.ok === false) {
+            return null;
+          }
+          var business = yield response.json();
+          if (!business) {
+            return null;
+          }
+          this.setData(business);
+          if (business.locale) {
+            this.setLocale(business.locale);
+          }
+          return business;
+        } catch (_error) {
+          return null;
+        }
+      });
+      function hydrate() {
+        return _hydrate.apply(this, arguments);
+      }
+      return hydrate;
+    }()
+    /**
+     * @param {BusinessData} data
+     * @returns {void}
+     */
+  }, {
     key: "setData",
     value: function setData(data) {
       this.data = data;
@@ -36,6 +113,11 @@ var Business = /*#__PURE__*/function () {
     get: function get() {
       return this.data.whitelist !== 'disabled';
     }
+
+    /**
+     * @param {String} locale
+     * @returns {void}
+     */
   }, {
     key: "setLocale",
     value: function setLocale(locale) {

package/lib/models/webchat.cjs

@@ -21,8 +21,33 @@ let Webchat = /*#__PURE__*/function () {
   _createClass(Webchat, [{
     key: "render",
     value: function render() {
+      this.applyBehaviourOverride();
       this.containerToAppendTo.appendChild(this.data.html);
     }
+  }, {
+    key: "applyBehaviourOverride",
+    value: function applyBehaviourOverride() {
+      if (!_core.Configuration.webchat.hasBehaviourOverride || !_core.Configuration.webchat.behaviour) return;
+      this.data.html.setAttribute('data-hellotext--webchat-behaviour-value', JSON.stringify(this.serializedBehaviour));
+    }
+  }, {
+    key: "serializedBehaviour",
+    get: function () {
+      const behaviour = _core.Configuration.webchat.behaviour;
+      return {
+        trigger: this.serializeTrigger(behaviour.trigger),
+        delay_seconds: behaviour.delaySeconds,
+        first_visit_only: behaviour.firstVisitOnly,
+        once_per_session: behaviour.oncePerSession
+      };
+    }
+  }, {
+    key: "serializeTrigger",
+    value: function serializeTrigger(trigger) {
+      if (trigger === 'onLoad') return 'on_load';
+      if (trigger === 'onClick') return 'on_click';
+      return trigger;
+    }
   }, {
     key: "containerToAppendTo",
     get: function () {

package/lib/models/webchat.js

@@ -16,8 +16,33 @@ var Webchat = /*#__PURE__*/function () {
   _createClass(Webchat, [{
     key: "render",
     value: function render() {
+      this.applyBehaviourOverride();
       this.containerToAppendTo.appendChild(this.data.html);
     }
+  }, {
+    key: "applyBehaviourOverride",
+    value: function applyBehaviourOverride() {
+      if (!Configuration.webchat.hasBehaviourOverride || !Configuration.webchat.behaviour) return;
+      this.data.html.setAttribute('data-hellotext--webchat-behaviour-value', JSON.stringify(this.serializedBehaviour));
+    }
+  }, {
+    key: "serializedBehaviour",
+    get: function get() {
+      var behaviour = Configuration.webchat.behaviour;
+      return {
+        trigger: this.serializeTrigger(behaviour.trigger),
+        delay_seconds: behaviour.delaySeconds,
+        first_visit_only: behaviour.firstVisitOnly,
+        once_per_session: behaviour.oncePerSession
+      };
+    }
+  }, {
+    key: "serializeTrigger",
+    value: function serializeTrigger(trigger) {
+      if (trigger === 'onLoad') return 'on_load';
+      if (trigger === 'onClick') return 'on_click';
+      return trigger;
+    }
   }, {
     key: "containerToAppendTo",
     get: function get() {

package/package.json

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

package/src/api/webchats.js

@@ -16,6 +16,8 @@ class WebchatsAPI {
       url.searchParams.append(`style[${key}]`, value)
     })
 
+    this.appendWebchatOverrides(url)
+
     url.searchParams.append('placement', Configuration.webchat.placement)
 
     const response = await fetch(url, {
@@ -32,6 +34,21 @@ class WebchatsAPI {
 
     return new DOMParser().parseFromString(data.html, 'text/html').querySelector('article')
   }
+
+  static appendWebchatOverrides(url) {
+    const { appearance, whatsapp } = Configuration.webchat
+
+    this.appendIfSupplied(url, 'webchat[appearance][header][name]', appearance.header?.name)
+    this.appendIfSupplied(url, 'webchat[appearance][launcher][icon_url]', appearance.launcher?.iconUrl)
+    this.appendIfSupplied(url, 'webchat[handoff][identifier]', whatsapp.number)
+    this.appendIfSupplied(url, 'webchat[handoff][restrict_to_channel]', whatsapp.restrictToChannel)
+  }
+
+  static appendIfSupplied(url, key, value) {
+    if (value === undefined || value === null) return
+
+    url.searchParams.append(key, String(value))
+  }
 }
 
 export default WebchatsAPI