From 6770126de0ea5dde28ee8bea8ab30dfbf9874a7b Mon Sep 17 00:00:00 2001 From: Pranav Raj S Date: Sat, 25 Apr 2020 23:18:00 +0530 Subject: [PATCH] Feature: Customise the position of messenger (#767) Co-authored-by: Nithin David Thomas --- app/javascript/packs/sdk.js | 2 +- app/javascript/sdk/IFrameHelper.js | 4 +- app/javascript/sdk/bubbleHelpers.js | 2 +- app/javascript/widget/assets/scss/sdk.js | 24 +++++++-- app/views/widget_tests/index.html.erb | 1 + docs/channels/facebook-channel.md | 2 +- docs/channels/website-sdk.md | 54 +++++++++++++++++++ .../project-setup/environment-variables.md | 8 +-- 8 files changed, 85 insertions(+), 12 deletions(-) create mode 100644 docs/channels/website-sdk.md diff --git a/app/javascript/packs/sdk.js b/app/javascript/packs/sdk.js index 5a9826a7c..a32b9dca4 100755 --- a/app/javascript/packs/sdk.js +++ b/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() { diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js index 17caa9841..eb7a32d25 100644 --- a/app/javascript/sdk/IFrameHelper.js +++ b/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; diff --git a/app/javascript/sdk/bubbleHelpers.js b/app/javascript/sdk/bubbleHelpers.js index 0225ab706..664bac5ec 100644 --- a/app/javascript/sdk/bubbleHelpers.js +++ b/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); diff --git a/app/javascript/widget/assets/scss/sdk.js b/app/javascript/widget/assets/scss/sdk.js index c4cb42fc3..bee0ca26e 100644 --- a/app/javascript/widget/assets/scss/sdk.js +++ b/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; } } - `; diff --git a/app/views/widget_tests/index.html.erb b/app/views/widget_tests/index.html.erb index 6a9803273..8af7dd5a0 100644 --- a/app/views/widget_tests/index.html.erb +++ b/app/views/widget_tests/index.html.erb @@ -4,6 +4,7 @@ window.chatwootSettings = { hideMessageBubble: false, + position: 'left', }; (function(d,t) { diff --git a/docs/channels/facebook-channel.md b/docs/channels/facebook-channel.md index 9e6865c84..48991997e 100644 --- a/docs/channels/facebook-channel.md +++ b/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) diff --git a/docs/channels/website-sdk.md b/docs/channels/website-sdk.md new file mode 100644 index 000000000..42c83829c --- /dev/null +++ b/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() +``` diff --git a/docs/development/project-setup/environment-variables.md b/docs/development/project-setup/environment-variables.md index 3fa4a61cd..7582c1f4d 100644 --- a/docs/development/project-setup/environment-variables.md +++ b/docs/development/project-setup/environment-variables.md @@ -51,7 +51,7 @@ FRONTEND_URL='http://localhost:3000' ### Configure storage -Chatwoot uses [active storage](https://edgeguides.rubyonrails.org/active_storage_overview.html) for storing attachments. The default storage option is the local storage on your server. +Chatwoot uses [active storage](https://edgeguides.rubyonrails.org/active_storage_overview.html) for storing attachments. The default storage option is the local storage on your server. But you can change it to use any of the cloud providers like amazon s3, microsoft azure and google gcs etc. Refer [configuring cloud storage](./configuring-cloud-storage) for additional environment variables required. @@ -104,8 +104,8 @@ You can generate `SECRET_KEY_BASE` using `rake secret` command from project root ### Rails Logging Variables -By default chatwoot will capture `info` level logs in production. Ref [rails docs](https://guides.rubyonrails.org/debugging_rails_applications.html#log-levels) for the additional log level options. -We will also retain 1 GB of your recent logs and your last shifted log file. +By default chatwoot will capture `info` level logs in production. Ref [rails docs](https://guides.rubyonrails.org/debugging_rails_applications.html#log-levels) for the additional log level options. +We will also retain 1 GB of your recent logs and your last shifted log file. You can fine tune these settings using the following environment variables ```bash @@ -113,4 +113,4 @@ You can fine tune these settings using the following environment variables LOG_LEVEL= # value in megabytes LOG_SIZE= 1024 -``` \ No newline at end of file +```