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;
   }
 }
-
 `;

app/views/widget_tests/index.html.erb

@@ -4,6 +4,7 @@
 
 window.chatwootSettings = {
   hideMessageBubble: false,
+  position: 'left',
 };
 
 (function(d,t) {

docs/channels/facebook-channel.md

@@ -37,4 +37,4 @@ If you are using self-hosted Chatwoot installation, please configure the Faceboo
 
 **Step 7**. If you want to update the agents who have access to the inbox, you can go to Settings > Inboxes.
 
-![inbox_settings](./images/inbox_settings.png)
+![inbox_settings](./images/facebook/inbox_settings.png)

docs/channels/website-sdk.md

@@ -0,0 +1,54 @@
+---
+path: "/docs/website-sdk"
+title: "Sending Information into Chatwoot"
+---
+
+
+Additional information about a contact is always useful, Chatwoot website SDK ensures that you can send the additional info you have about the user.
+
+If you have installed our code on your website, SDK would expose `window.$chatwoot` object.
+
+To hide the bubble, you can use the following setting. Please not if you use this, then you have to trigger the widget by yourself.
+
+```js
+window.chatwootSettings = {
+  hideMessageBubble: false,
+  position: 'left', // This can be left or right
+}
+```
+
+### To trigger widget without displaying bubble
+
+```js
+window.$chatwoot.toggle()
+```
+
+### To set the user in the widget
+
+```js
+window.$chatwoot.setUser('identifier_key', {
+  email: 'email@example.com',
+  name: 'name',
+  avatar_url: '',
+})
+```
+
+`setUser` accepts an identifier which can be a `user_id` in your database or any unique parameter which represents a user. You can pass email, name, avatar_url as params, support for additional parameters are in progress.
+
+Make sure that you reset the session when the user logouts of your app.
+
+### To set labels on the conversation
+
+Please note that the labels will be set on a conversation, if the user has not started a conversation, then the following items will not have any effect.
+
+```js
+window.$chatwoot.addLabel('support-ticket')
+
+window.$chatwoot.removeLabel('support-ticket')
+```
+
+### To refresh the session (use this while you logout user from your app)
+
+```js
+window.$chatwoot.reset()
+```