Feature: Customise the position of messenger (#767)

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>

app/javascript/packs/sdk.js

@@ -8,7 +8,7 @@ const runSDK = ({ baseUrl, websiteToken }) => {
     hasLoaded: false,
     hideMessageBubble: chatwootSettings.hideMessageBubble || false,
     isOpen: false,
-    position: chatwootSettings.position || 'right',
+    position: chatwootSettings.position === 'left' ? 'left' : 'right',
     websiteToken,
 
     toggle() {

app/javascript/sdk/IFrameHelper.js

@@ -31,7 +31,7 @@ export const IFrameHelper = {
 
     iframe.id = 'chatwoot_live_chat_widget';
     iframe.style.visibility = 'hidden';
-    widgetHolder.className = 'woot-widget-holder woot--hide';
+    widgetHolder.className = `woot-widget-holder woot--hide woot-elements--${window.$chatwoot.position}`;
     widgetHolder.appendChild(iframe);
     body.appendChild(widgetHolder);
     IFrameHelper.initPostMessageCommunication();
@@ -111,7 +111,7 @@ export const IFrameHelper = {
       });
 
       const closeIcon = closeBubble;
-      closeIcon.className = 'woot-widget-bubble woot--close woot--hide';
+      closeIcon.className = `woot-elements--${window.$chatwoot.position} woot-widget-bubble woot--close woot--hide`;
 
       chatIcon.style.background = widgetColor;
       closeIcon.style.background = widgetColor;

app/javascript/sdk/bubbleHelpers.js

@@ -15,7 +15,7 @@ export const notificationBubble = document.createElement('span');
 const bodyOverFlowStyle = document.body.style.overflow;
 
 export const createBubbleIcon = ({ className, src, target }) => {
-  target.className = className;
+  target.className = `${className} woot-elements--${window.$chatwoot.position}`;
   const bubbleIcon = document.createElement('img');
   bubbleIcon.src = src;
   target.appendChild(bubbleIcon);

app/javascript/widget/assets/scss/sdk.js

@@ -30,12 +30,29 @@ export const SDK_CSS = ` .woot-widget-holder {
   background: #1f93ff;
   position: fixed;
   cursor: pointer;
-  right: 20px;
   bottom: 20px;
   width: 64px !important;
   height: 64px !important;
 }
 
+.woot-widget-bubble.woot-elements--left {
+  left: 20px;
+}
+
+.woot-widget-bubble.woot-elements--right {
+  right: 20px;
+}
+
+@media only screen and (min-width: 667px) {
+  .woot-widget-holder.woot-elements--left {
+    left: 20px;
+  }
+
+  .woot-widget-holder.woot-elements--right {
+    right: 20px;
+  }
+}
+
 .woot-widget-bubble:hover {
   background: #1f93ff;
   -moz-box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
@@ -53,6 +70,7 @@ export const SDK_CSS = ` .woot-widget-holder {
 .woot--close:hover {
   opacity: 1;
 }
+
 .woot--close:before, .woot--close:after {
   position: absolute;
   left: 32px;
@@ -62,9 +80,11 @@ export const SDK_CSS = ` .woot-widget-holder {
   width: 2px;
   background-color: white;
 }
+
 .woot--close:before {
   transform: rotate(45deg);
 }
+
 .woot--close:after {
   transform: rotate(-45deg);
 }
@@ -96,7 +116,6 @@ export const SDK_CSS = ` .woot-widget-holder {
 @media only screen and (min-width: 667px) {
   .woot-widget-holder {
     bottom: 104px;
-    right: 20px;
     height: calc(85% - 64px - 20px);
     width: 400px !important;
     min-height: 250px !important;
@@ -107,5 +126,4 @@ export const SDK_CSS = ` .woot-widget-holder {
     border-radius: 16px !important;
   }
 }
-
 `;