https://www.app.xmati.ai/assets/modules/channel-web/inject.js

1// full backward compatibility
2const DEFAULT_CHAT_ID = 'bp-web-widget'
3const DEFAULT_IFRAME_ID = 'bp-widget'
4const DEFAULT_IFRAME_CLASS = 'bp-widget-web'
5
6function _getContainerId(chatId) {
7  return chatId ? chatId + '-container' : DEFAULT_CHAT_ID
8}
9
10function _getIframeId(chatId) {
11  return chatId || DEFAULT_IFRAME_ID
12}
13
14function _injectDOMElement(tagName, selector, options) {
15  const element = document.createElement(tagName)
16  if (options) {
17    Object.keys(options).forEach(function (key) {
18      element[key] = options[key]
19    })
20  }
21  document.querySelector(selector).appendChild(element)
22  return element
23}
24
25function _generateIFrameHTML(host, config) {
26  const botId = config.botId || ''
27  const options = encodeURIComponent(JSON.stringify({ config: config }))
28  const viewMode = config.viewMode || 'Embedded'
29  let iframeSrc = host + '/lite/' + botId + '/?m=channel-web&v=' + viewMode + '&options=' + options
30  if (config.ref) {
31    iframeSrc += '&ref=' + encodeURIComponent(config.ref)
32  }
33  const title = config.botConvoDescription || config.botName || config.botId
34
35  const iframeId = _getIframeId(config.chatId)
36  return (
37    '<iframe id="' +
38    iframeId +
39    '" title="' +
40    encodeURIComponent(title) +
41    '" frameborder="0" src="' +
42    iframeSrc +
43    '" class="' +
44    DEFAULT_IFRAME_CLASS +
45    '" allow="fullscreen" allowfullscreen="true"/>'
46  )
47}
48
49const chatRefs = {}
50
51// provides proper chat reference
52function _getChatRef(chatId) {
53  chatId = chatId || DEFAULT_CHAT_ID
54  const fakeChatRef = {
55    postMessage: function () {
56      console.warn(
57        'No webchat with id ' + chatId + ' has not been initialized, \n please use window.xMatiWebChat.init first.'
58      )
59    }
60  }
61
62  return chatRefs[chatId] || fakeChatRef
63}
64
65function configure(payload, chatId) {
66  const chatWindow = _getChatRef(chatId)
67  chatWindow.postMessage({ action: 'configure', payload: payload }, '*')
68}
69function sendEvent(payload, chatId) {
70  const chatWindow = _getChatRef(chatId)
71  chatWindow.postMessage({ action: 'event', payload: payload }, '*')
72}
73function sendPayload(payload, chatId) {
74  const chatWindow = _getChatRef(chatId)
75  chatWindow.postMessage({ action: 'sendPayload', payload: payload }, '*')
76}
77function mergeConfig(payload, chatId) {
78  const chatWindow = _getChatRef(chatId)
79  chatWindow.postMessage({ action: 'mergeConfig', payload: payload }, '*')
80}
81
82/**
83 *
84 * @param {object} config Configuration object you want to apply to your webchat instance
85 * @param {string} targetSelector css selector under which you want your webchat to be rendered
86 */
87function init(config, targetSelector) {
88  targetSelector = targetSelector || 'body'
89  const chatId = config.chatId || DEFAULT_CHAT_ID
90  const host = (config.host || window.ROOT_PATH || '').replace(/\/+$/, '')
91
92  const cssHref = host + '/assets/modules/channel-web/inject.css'
93  _injectDOMElement('link', 'head', { rel: 'stylesheet', href: cssHref })
94
95  const iframeHTML = _generateIFrameHTML(host, config)
96
97  const containerId = _getContainerId(config.chatId)
98  const iframeId = _getIframeId(config.chatId)
99  _injectDOMElement('div', targetSelector, { id: containerId, innerHTML: iframeHTML })
100
101  const iframeRef = document.querySelector('#' + containerId + ' #' + iframeId).contentWindow
102  chatRefs[chatId] = iframeRef
103}
104
105window.xMatiWebChat = {
106  init: init,
107  configure: configure,
108  sendEvent: sendEvent,
109  mergeConfig: mergeConfig,
110  sendPayload: sendPayload
111}
112
113// Keep backward compatibility
114window.botpressWebChat = window.xMatiWebChat
115
116window.addEventListener('message', function (payload) {
117  const data = payload.data
118  if (!data || !data.type) {
119    return
120  }
121
122  const iframeSelector = '#' + _getIframeId(data.chatId)
123  if (data.type === 'setClass') {
124    document.querySelector(iframeSelector).setAttribute('class', data.value)
125  } else if (data.type === 'setWidth') {
126    const width = typeof data.value === 'number' ? data.value + 'px' : data.value
127
128    document.querySelector(iframeSelector).style.width = width
129  }
130})