[Enhancement] Use JS-Cookie to set Cookies (#193)

* Update js-cookie * Add sdk css * Remove conversation padding
2025-11-01 03:27:52 +00:00 · 2019-10-30 10:43:11 +05:30
parent e32b6bf6d4
commit 3d3aefb197
14 changed files with 170 additions and 68 deletions
--- a/app/javascript/packs/sdk.js
+++ b/app/javascript/packs/sdk.js
@@ -1,4 +1,6 @@
-import sdkStyles from '../widget/assets/scss/sdk.css';
+import Cookies from 'js-cookie';
+
+import { SDK_CSS } from '../widget/assets/scss/sdk';
 /* eslint-disable no-param-reassign */
 const bubbleImg =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAAwgJEBk0TVheY2R5eo+ut8jb5OXs8fX2+cjRDTIAAADsSURBVHgBldZbkoMgFIThRgQv8SKKgGf/C51UnJqaRI30/9zfe+NQUQ3TvG7bOk9DVeCmshmj/CuOTYnrdBfkUOg0zlOtl9OWVuEk4+QyZ3DIevmSt/ioTvK1VH/s5bY3YdM9SBZ/mUUyWgx+U06ycgp7D8msxSvtc4HXL9BLdj2elSEfhBJAI0QNgJEBI1BEBsQClVBVGDgwYOLAhJkDM1YOrNg4sLFAsLJgZsHEgoEFFQt0JAFGFjQsKAMJ0LFAexKgZYFyJIDxJIBNJEDNAtSJBLCeBDCOBFAPzwFA94ED+zmhwDO9358r8ANtIsMXi7qVAwAAAABJRU5ErkJggg==';
@@ -6,7 +8,6 @@ const closeImg =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAP1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////9Du/pqAAAAFHRSTlMACBstLi8wMVB+mcbT2err7O3w8n+sjtQAAAEuSURBVHgBtNLdcoMgGITh1SCGH9DId//X2mnTg7hYxj0oh8w8r+MqgDnmlsIE6UwhtRxnAHge9n2KV7wvP+h4AvPbm73W+359/aJjRjQTCuTNIrJJBfKW0UwqkLeGZJ8Ff2O/T28JwZQCewuYilJgX6buavdDv188br1RIE+jc2H5yy+9VwrXXij0nsflwth7YFRw7N3Y88BcYL+z7wubO/lt6AcFwQMLF9irP8r2eF8/ei8VLrxUkDzguMDejX03WK3dsGJB9lxgrxd0T8PTRxUL5OUCealQz76KXg/or/CvI36VXgcEAAAgCMP6t16IZVDg3zPuI+0rb5g2zlsoW2lbqlvrOyw7bTuuO+8LGIs4C1mLeQuai7oL2437LRytPC1drX0tnq2+Ld+r/wDPIIIJkfdlbQAAAABJRU5ErkJggg==';

 const body = document.getElementsByTagName('body')[0];
-const iframe = document.createElement('iframe');
 const holder = document.createElement('div');

 const bubbleHolder = document.createElement('div');
@@ -16,16 +17,10 @@ const closeBubble = document.createElement('div');
 const notification_bubble = document.createElement('span');
 const bodyOverFlowStyle = document.body.style.overflow;

-function addClass(elm, classes) {
-  if (classes) {
-    elm.className += ` ${classes}`;
-  }
-}
-
 function loadCSS() {
  const css = document.createElement('style');
  css.type = 'text/css';
-  css.innerHTML = sdkStyles;
+  css.innerHTML = `${SDK_CSS}`;
  document.body.appendChild(css);
 }

@@ -45,14 +40,13 @@ function wootOn(elm, event, fn) {
 }

 function classHelper(classes, action, elm) {
-  let classarray;
  let search;
  let replace;
  let i;
  let has = false;
  if (classes) {
    // Trim any whitespace
-    classarray = classes.split(/\s+/);
+    const classarray = classes.split(/\s+/);
    for (i = 0; i < classarray.length; i += 1) {
      search = new RegExp(`\\b${classarray[i]}\\b`, 'g');
      replace = new RegExp(` *${classarray[i]}\\b`, 'g');
@@ -75,6 +69,12 @@ function classHelper(classes, action, elm) {
  return has;
 }

+function addClass(elm, classes) {
+  if (classes) {
+    elm.className += ` ${classes}`;
+  }
+}
+
 // Toggle class
 function toggleClass(elm, classes) {
  classHelper(classes, 'toggle', elm);
@@ -117,42 +117,81 @@ function enableScroll() {
  document.body.style.overflow = bodyOverFlowStyle;
 }

-function loadCallback() {
-  iframe.style.visibility = '';
-  iframe.setAttribute('id', `chatwoot_live_chat_widget`);
-  iframe.onmouseenter = disableScroll;
-  iframe.onmouseleave = enableScroll;
+const IFrameHelper = {
+  createFrame: ({ baseUrl, websiteToken }) => {
+    const iframe = document.createElement('iframe');
+    const cwCookie = Cookies.get('cw_conversation');
+    let widgetUrl = `${baseUrl}/widgets?website_token=${websiteToken}`;
+    if (cwCookie) {
+      widgetUrl = `${widgetUrl}&cw_conversation=${cwCookie}`;
+    }
+    iframe.src = widgetUrl;

-  loadCSS();
-  createBubbleHolder();
+    iframe.id = 'chatwoot_web_widget';
+    iframe.style.visibility = 'hidden';
+    holder.className = 'woot-widget-holder woot--hide';
+    holder.appendChild(iframe);
+    body.appendChild(holder);
+    IFrameHelper.initPostMessageCommunication();
+  },
+  getAppFrame: () => document.getElementById('chatwoot_web_widget'),
+  sendMessage: (key, value) => {
+    const element = IFrameHelper.getAppFrame();
+    element.contentWindow.postMessage(
+      `chatwoot-widget:${JSON.stringify({ event: key, ...value })}`,
+      '*'
+    );
+  },
+  initPostMessageCommunication: () => {
+    window.onmessage = e => {
+      if (
+        typeof e.data !== 'string' ||
+        e.data.indexOf('chatwoot-widget:') !== 0
+      ) {
+        return;
+      }
+      const message = JSON.parse(e.data.replace('chatwoot-widget:', ''));
+      if (message.event === 'loaded') {
+        Cookies.set('cw_conversation', message.config.authToken);
+        IFrameHelper.sendMessage('config-set', {});
+        IFrameHelper.onLoad();
+      }
+    };
+  },
+  onLoad: () => {
+    const iframe = IFrameHelper.getAppFrame();
+    iframe.style.visibility = '';
+    iframe.setAttribute('id', `chatwoot_live_chat_widget`);
+    iframe.onmouseenter = disableScroll;
+    iframe.onmouseleave = enableScroll;

-  bubbleHolder.appendChild(
-    createBubbleIcon({
-      className: 'woot-widget-bubble',
-      src: bubbleImg,
-      target: chatBubble,
-    })
-  );
-  bubbleHolder.appendChild(
-    createBubbleIcon({
-      className: 'woot-widget-bubble woot--close woot--hide',
-      src: closeImg,
-      target: closeBubble,
-    })
-  );
-  bubbleHolder.appendChild(createNotificationBubble());
-  onClickChatBubble();
-}
+    loadCSS();
+    createBubbleHolder();

-function loadIframe({ websiteToken, baseUrl }) {
-  iframe.style.visibility = 'hidden';
-  iframe.src = `${baseUrl}/widgets?website_token=${websiteToken}`;
-  iframe.onload = loadCallback;
+    bubbleHolder.appendChild(
+      createBubbleIcon({
+        className: 'woot-widget-bubble',
+        src: bubbleImg,
+        target: chatBubble,
+      })
+    );
+    bubbleHolder.appendChild(
+      createBubbleIcon({
+        className: 'woot-widget-bubble woot--close woot--hide',
+        src: closeImg,
+        target: closeBubble,
+      })
+    );
+    bubbleHolder.appendChild(createNotificationBubble());
+    onClickChatBubble();
+  },
+};

-  holder.className = 'woot-widget-holder woot--hide';
-  holder.appendChild(iframe);
-
-  body.appendChild(holder);
+function loadIframe({ baseUrl, websiteToken }) {
+  IFrameHelper.createFrame({
+    baseUrl,
+    websiteToken,
+  });
 }

 window.chatwootSDK = {
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -6,6 +6,17 @@

 <script>
 import { mapActions } from 'vuex';
+import { setHeader } from './helpers/axios';
+
+export const IFrameHelper = {
+  isIFrame: () => window.self !== window.top,
+  sendMessage: msg => {
+    window.parent.postMessage(
+      `chatwoot-widget:${JSON.stringify({ ...msg })}`,
+      '*'
+    );
+  },
+};

 export default {
  name: 'App',
@@ -15,7 +26,28 @@ export default {
  },

  mounted() {
-    this.fetchOldConversations();
+    if (IFrameHelper.isIFrame()) {
+      IFrameHelper.sendMessage({
+        event: 'loaded',
+        config: {
+          authToken: window.authToken,
+        },
+      });
+      setHeader('X-Auth-Token', window.authToken);
+    }
+
+    window.addEventListener('message', e => {
+      if (
+        typeof e.data !== 'string' ||
+        e.data.indexOf('chatwoot-widget:') !== 0
+      ) {
+        return;
+      }
+      const message = JSON.parse(e.data.replace('chatwoot-widget:', ''));
+      if (message.event === 'config-set') {
+        this.fetchOldConversations();
+      }
+    });
  },
 };
 </script>
--- a/app/javascript/widget/assets/scss/sdk.css
+++ b/app/javascript/widget/assets/scss/sdk.css
@@ -1,3 +1,4 @@
+export const SDK_CSS = `
 .woot-widget-holder {
  z-index: 2147483000!important;
  position: fixed!important;
@@ -63,3 +64,4 @@
 .woot--hide {
  display: none !important;
 }
+`;
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/app/javascript/widget/components/ConversationWrap.vue
@@ -28,6 +28,5 @@ export default {

 .conversation {
  height: 100%;
-  padding: $space-large $space-small $space-large $space-normal;
 }
 </style>
--- a/app/javascript/widget/helpers/actionCable.js
+++ b/app/javascript/widget/helpers/actionCable.js
@@ -6,6 +6,7 @@ class ActionCableConnector extends BaseActionCableConnector {
    this.events = {
      'message.created': this.onMessageCreated,
    };
+    console.log('joined', app, pubsubToken);
  }

  onMessageCreated = data => {
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -69,6 +69,7 @@ export default {
  .conversation-wrap {
    flex: 1;
    overflow-y: auto;
+    padding: $space-large $space-small $space-large $space-normal;
  }

  .footer-wrap {