KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Add an extended bubble design for the widget (#1123)

Browse source 
* feat: Add a new design for chat bubble

Signed-off-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

* Add i18n

* Fix stye issues

* Set fixed font-size

* Update docs for bubble
This commit is contained in:
Pranav Raj S 2020-08-09 16:07:32 +05:30 • committed by GitHub
parent a04ca24def
commit 0adbc346df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 164 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app/javascript/sdk/IFrameHelper.js
View file

@ -1,5 +1,5 @@
import Cookies from 'js-cookie';
import { wootOn, loadCSS, addClass, removeClass } from './DOMHelpers';
import { wootOn, addClass, loadCSS, removeClass } from './DOMHelpers';
import {
body,
widgetHolder,
@ -12,6 +12,7 @@ import {
createNotificationBubble,
onClickChatBubble,
onBubbleClick,
setBubbleText,
} from './bubbleHelpers';
import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
@ -32,8 +33,9 @@ export const IFrameHelper = {
iframe.id = 'chatwoot_live_chat_widget';
iframe.style.visibility = 'hidden';
const HolderclassName = `woot-widget-holder woot--hide woot-elements--${window.$chatwoot.position}`;
addClass(widgetHolder, HolderclassName);
const holderClassName = `woot-widget-holder woot--hide woot-elements--${window.$chatwoot.position}`;
addClass(widgetHolder, holderClassName);
widgetHolder.appendChild(iframe);
body.appendChild(widgetHolder);
IFrameHelper.initPostMessageCommunication();
@ -69,9 +71,7 @@ export const IFrameHelper = {
};
},
initWindowSizeListener: () => {
wootOn(window, 'resize', () => {
IFrameHelper.toggleCloseButton();
});
wootOn(window, 'resize', () => IFrameHelper.toggleCloseButton());
},
preventDefaultScroll: () => {
widgetHolder.addEventListener('wheel', event => {
@ -100,7 +100,9 @@ export const IFrameHelper = {
position: window.$chatwoot.position,
hideMessageBubble: window.$chatwoot.hideMessageBubble,
});
IFrameHelper.onLoad(message.config.channelConfig);
IFrameHelper.onLoad({
widgetColor: message.config.channelConfig.widgetColor,
});
IFrameHelper.setCurrentUrl();
IFrameHelper.toggleCloseButton();
@ -110,6 +112,10 @@ export const IFrameHelper = {
dispatchWindowEvent(EVENT_NAME);
},
setBubbleLabel(message) {
setBubbleText(message.label);
},
toggleBubble: () => {
onBubbleClick();
},