2020-04-03 07:34:58 +00:00
|
|
|
import Cookies from 'js-cookie';
|
2021-05-17 16:08:35 +00:00
|
|
|
import {
|
|
|
|
wootOn,
|
|
|
|
addClass,
|
|
|
|
loadCSS,
|
2021-11-25 14:55:14 +00:00
|
|
|
removeClass,
|
2021-05-17 16:08:35 +00:00
|
|
|
onLocationChangeListener,
|
|
|
|
} from './DOMHelpers';
|
2020-04-03 07:34:58 +00:00
|
|
|
import {
|
|
|
|
body,
|
|
|
|
widgetHolder,
|
|
|
|
createBubbleHolder,
|
|
|
|
createBubbleIcon,
|
|
|
|
bubbleImg,
|
|
|
|
chatBubble,
|
|
|
|
closeBubble,
|
|
|
|
bubbleHolder,
|
|
|
|
createNotificationBubble,
|
|
|
|
onClickChatBubble,
|
|
|
|
onBubbleClick,
|
2020-08-09 10:37:32 +00:00
|
|
|
setBubbleText,
|
2021-11-22 09:35:29 +00:00
|
|
|
addUnreadClass,
|
|
|
|
removeUnreadClass,
|
2020-04-03 07:34:58 +00:00
|
|
|
} from './bubbleHelpers';
|
2020-07-25 16:24:58 +00:00
|
|
|
import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
|
2022-02-21 04:10:11 +00:00
|
|
|
import { CHATWOOT_ERROR, CHATWOOT_READY } from '../widget/constants/sdkEvents';
|
|
|
|
import { SET_USER_ERROR } from '../widget/constants/errorTypes';
|
|
|
|
import { getUserCookieName } from './cookieHelpers';
|
2022-02-28 16:13:24 +00:00
|
|
|
import {
|
|
|
|
getAlertAudio,
|
|
|
|
initOnEvents,
|
|
|
|
} from 'shared/helpers/AudioNotificationHelper';
|
2022-02-25 10:48:18 +00:00
|
|
|
import { isFlatWidgetStyle } from './settingsHelper';
|
2020-04-03 07:34:58 +00:00
|
|
|
|
|
|
|
export const IFrameHelper = {
|
|
|
|
getUrl({ baseUrl, websiteToken }) {
|
|
|
|
return `${baseUrl}/widget?website_token=${websiteToken}`;
|
|
|
|
},
|
|
|
|
createFrame: ({ baseUrl, websiteToken }) => {
|
2021-04-02 09:34:16 +00:00
|
|
|
if (IFrameHelper.getAppFrame()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
loadCSS();
|
2020-04-03 07:34:58 +00:00
|
|
|
const iframe = document.createElement('iframe');
|
|
|
|
const cwCookie = Cookies.get('cw_conversation');
|
|
|
|
let widgetUrl = IFrameHelper.getUrl({ baseUrl, websiteToken });
|
|
|
|
if (cwCookie) {
|
|
|
|
widgetUrl = `${widgetUrl}&cw_conversation=${cwCookie}`;
|
|
|
|
}
|
|
|
|
iframe.src = widgetUrl;
|
|
|
|
|
|
|
|
iframe.id = 'chatwoot_live_chat_widget';
|
|
|
|
iframe.style.visibility = 'hidden';
|
2020-08-09 10:37:32 +00:00
|
|
|
|
2020-11-23 05:19:28 +00:00
|
|
|
let holderClassName = `woot-widget-holder woot--hide woot-elements--${window.$chatwoot.position}`;
|
|
|
|
if (window.$chatwoot.hideMessageBubble) {
|
|
|
|
holderClassName += ` woot-widget--without-bubble`;
|
|
|
|
}
|
2022-02-25 10:48:18 +00:00
|
|
|
if (isFlatWidgetStyle(window.$chatwoot.widgetStyle)) {
|
|
|
|
holderClassName += ` woot-widget-holder--flat`;
|
|
|
|
}
|
|
|
|
|
2020-08-09 10:37:32 +00:00
|
|
|
addClass(widgetHolder, holderClassName);
|
2020-04-03 07:34:58 +00:00
|
|
|
widgetHolder.appendChild(iframe);
|
|
|
|
body.appendChild(widgetHolder);
|
|
|
|
IFrameHelper.initPostMessageCommunication();
|
|
|
|
IFrameHelper.initWindowSizeListener();
|
2020-06-13 15:03:23 +00:00
|
|
|
IFrameHelper.preventDefaultScroll();
|
2020-04-03 07:34:58 +00:00
|
|
|
},
|
|
|
|
getAppFrame: () => document.getElementById('chatwoot_live_chat_widget'),
|
2021-04-02 09:34:16 +00:00
|
|
|
getBubbleHolder: () => document.getElementsByClassName('woot--bubble-holder'),
|
2020-04-03 07:34:58 +00:00
|
|
|
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 (typeof IFrameHelper.events[message.event] === 'function') {
|
|
|
|
IFrameHelper.events[message.event](message);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
initWindowSizeListener: () => {
|
2020-08-09 10:37:32 +00:00
|
|
|
wootOn(window, 'resize', () => IFrameHelper.toggleCloseButton());
|
2020-04-03 07:34:58 +00:00
|
|
|
},
|
2020-06-13 15:03:23 +00:00
|
|
|
preventDefaultScroll: () => {
|
|
|
|
widgetHolder.addEventListener('wheel', event => {
|
|
|
|
const deltaY = event.deltaY;
|
|
|
|
const contentHeight = widgetHolder.scrollHeight;
|
|
|
|
const visibleHeight = widgetHolder.offsetHeight;
|
|
|
|
const scrollTop = widgetHolder.scrollTop;
|
|
|
|
|
|
|
|
if (
|
|
|
|
(scrollTop === 0 && deltaY < 0) ||
|
|
|
|
(visibleHeight + scrollTop === contentHeight && deltaY > 0)
|
|
|
|
) {
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
2021-08-14 03:10:29 +00:00
|
|
|
|
|
|
|
setFrameHeightToFitContent: (extraHeight, isFixedHeight) => {
|
|
|
|
const iframe = IFrameHelper.getAppFrame();
|
|
|
|
const updatedIframeHeight = isFixedHeight ? `${extraHeight}px` : '100%';
|
|
|
|
|
|
|
|
if (iframe)
|
|
|
|
iframe.setAttribute('style', `height: ${updatedIframeHeight} !important`);
|
|
|
|
},
|
|
|
|
|
2022-02-28 16:13:24 +00:00
|
|
|
setupAudioListeners: () => {
|
2022-03-10 15:10:47 +00:00
|
|
|
const { baseUrl = '' } = window.$chatwoot;
|
|
|
|
getAlertAudio(baseUrl).then(() =>
|
2022-02-28 16:13:24 +00:00
|
|
|
initOnEvents.forEach(event => {
|
|
|
|
document.removeEventListener(
|
|
|
|
event,
|
|
|
|
IFrameHelper.setupAudioListeners,
|
|
|
|
false
|
|
|
|
);
|
|
|
|
})
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2020-04-03 07:34:58 +00:00
|
|
|
events: {
|
|
|
|
loaded: message => {
|
|
|
|
Cookies.set('cw_conversation', message.config.authToken, {
|
|
|
|
expires: 365,
|
2020-07-25 16:24:58 +00:00
|
|
|
sameSite: 'Lax',
|
2020-04-03 07:34:58 +00:00
|
|
|
});
|
|
|
|
window.$chatwoot.hasLoaded = true;
|
2020-05-17 10:45:53 +00:00
|
|
|
IFrameHelper.sendMessage('config-set', {
|
|
|
|
locale: window.$chatwoot.locale,
|
2020-07-07 18:34:44 +00:00
|
|
|
position: window.$chatwoot.position,
|
|
|
|
hideMessageBubble: window.$chatwoot.hideMessageBubble,
|
2020-08-28 12:09:46 +00:00
|
|
|
showPopoutButton: window.$chatwoot.showPopoutButton,
|
2022-02-25 10:48:18 +00:00
|
|
|
widgetStyle: window.$chatwoot.widgetStyle,
|
2020-05-17 10:45:53 +00:00
|
|
|
});
|
2020-08-09 10:37:32 +00:00
|
|
|
IFrameHelper.onLoad({
|
|
|
|
widgetColor: message.config.channelConfig.widgetColor,
|
|
|
|
});
|
2020-04-03 07:34:58 +00:00
|
|
|
IFrameHelper.toggleCloseButton();
|
|
|
|
|
|
|
|
if (window.$chatwoot.user) {
|
|
|
|
IFrameHelper.sendMessage('set-user', window.$chatwoot.user);
|
|
|
|
}
|
2022-03-03 07:32:02 +00:00
|
|
|
|
2022-02-28 16:13:24 +00:00
|
|
|
dispatchWindowEvent({ eventName: CHATWOOT_READY });
|
|
|
|
|
|
|
|
window.playAudioAlert = () => {};
|
|
|
|
|
|
|
|
initOnEvents.forEach(e => {
|
|
|
|
document.addEventListener(e, IFrameHelper.setupAudioListeners, false);
|
|
|
|
});
|
|
|
|
|
2022-02-28 09:23:11 +00:00
|
|
|
if (!window.$chatwoot.resetTriggered) {
|
|
|
|
dispatchWindowEvent({ eventName: CHATWOOT_READY });
|
|
|
|
}
|
2022-02-21 04:10:11 +00:00
|
|
|
},
|
|
|
|
error: ({ errorType, data }) => {
|
|
|
|
dispatchWindowEvent({ eventName: CHATWOOT_ERROR, data: data });
|
|
|
|
|
|
|
|
if (errorType === SET_USER_ERROR) {
|
|
|
|
Cookies.remove(getUserCookieName());
|
|
|
|
}
|
2020-04-03 07:34:58 +00:00
|
|
|
},
|
|
|
|
|
2020-08-09 10:37:32 +00:00
|
|
|
setBubbleLabel(message) {
|
2020-11-23 05:19:28 +00:00
|
|
|
if (window.$chatwoot.hideMessageBubble) {
|
|
|
|
return;
|
|
|
|
}
|
2020-08-19 16:54:02 +00:00
|
|
|
setBubbleText(window.$chatwoot.launcherTitle || message.label);
|
2020-08-09 10:37:32 +00:00
|
|
|
},
|
|
|
|
|
2021-09-28 13:55:44 +00:00
|
|
|
toggleBubble: state => {
|
|
|
|
let bubbleState = {};
|
|
|
|
if (state === 'open') {
|
|
|
|
bubbleState.toggleValue = true;
|
|
|
|
} else if (state === 'close') {
|
|
|
|
bubbleState.toggleValue = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
onBubbleClick(bubbleState);
|
2020-04-03 07:34:58 +00:00
|
|
|
},
|
2020-07-07 18:34:44 +00:00
|
|
|
|
2022-01-12 10:55:27 +00:00
|
|
|
closeWindow: () => {
|
|
|
|
onBubbleClick({ toggleValue: false });
|
|
|
|
removeUnreadClass();
|
|
|
|
},
|
|
|
|
|
2020-07-07 18:34:44 +00:00
|
|
|
onBubbleToggle: isOpen => {
|
2021-09-02 06:43:53 +00:00
|
|
|
IFrameHelper.sendMessage('toggle-open', { isOpen });
|
2022-01-12 10:55:27 +00:00
|
|
|
if (isOpen) {
|
2020-07-07 18:34:44 +00:00
|
|
|
IFrameHelper.pushEvent('webwidget.triggered');
|
|
|
|
}
|
|
|
|
},
|
2021-05-17 16:08:35 +00:00
|
|
|
onLocationChange: ({ referrerURL, referrerHost }) => {
|
2021-08-07 06:26:15 +00:00
|
|
|
IFrameHelper.sendMessage('change-url', {
|
|
|
|
referrerURL,
|
|
|
|
referrerHost,
|
|
|
|
});
|
2021-05-17 16:08:35 +00:00
|
|
|
},
|
2021-08-14 03:10:29 +00:00
|
|
|
updateIframeHeight: message => {
|
|
|
|
const { extraHeight = 0, isFixedHeight } = message;
|
|
|
|
|
|
|
|
IFrameHelper.setFrameHeightToFitContent(extraHeight, isFixedHeight);
|
|
|
|
},
|
|
|
|
|
2022-01-12 10:55:27 +00:00
|
|
|
setUnreadMode: () => {
|
|
|
|
addUnreadClass();
|
|
|
|
onBubbleClick({ toggleValue: true });
|
2020-07-07 18:34:44 +00:00
|
|
|
},
|
2021-09-02 06:43:53 +00:00
|
|
|
|
2022-01-12 10:55:27 +00:00
|
|
|
resetUnreadMode: () => removeUnreadClass(),
|
2021-11-25 14:55:14 +00:00
|
|
|
handleNotificationDot: event => {
|
2021-12-09 06:20:28 +00:00
|
|
|
if (window.$chatwoot.hideMessageBubble) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-11-25 14:55:14 +00:00
|
|
|
const bubbleElement = document.querySelector('.woot-widget-bubble');
|
|
|
|
if (
|
|
|
|
event.unreadMessageCount > 0 &&
|
|
|
|
!bubbleElement.classList.contains('unread-notification')
|
|
|
|
) {
|
|
|
|
addClass(bubbleElement, 'unread-notification');
|
|
|
|
} else if (event.unreadMessageCount === 0) {
|
|
|
|
removeClass(bubbleElement, 'unread-notification');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2021-09-02 06:43:53 +00:00
|
|
|
closeChat: () => {
|
|
|
|
onBubbleClick({ toggleValue: false });
|
|
|
|
},
|
2022-02-28 16:13:24 +00:00
|
|
|
|
|
|
|
playAudio: () => {
|
|
|
|
window.playAudioAlert();
|
|
|
|
},
|
2020-04-03 07:34:58 +00:00
|
|
|
},
|
2020-04-22 07:44:09 +00:00
|
|
|
pushEvent: eventName => {
|
|
|
|
IFrameHelper.sendMessage('push-event', { eventName });
|
|
|
|
},
|
2021-05-17 16:08:35 +00:00
|
|
|
|
2020-04-19 18:10:28 +00:00
|
|
|
onLoad: ({ widgetColor }) => {
|
2020-04-03 07:34:58 +00:00
|
|
|
const iframe = IFrameHelper.getAppFrame();
|
|
|
|
iframe.style.visibility = '';
|
|
|
|
iframe.setAttribute('id', `chatwoot_live_chat_widget`);
|
|
|
|
|
2021-04-02 09:34:16 +00:00
|
|
|
if (IFrameHelper.getBubbleHolder().length) {
|
|
|
|
return;
|
|
|
|
}
|
2020-04-03 07:34:58 +00:00
|
|
|
createBubbleHolder();
|
2021-05-17 16:08:35 +00:00
|
|
|
onLocationChangeListener();
|
2020-04-03 07:34:58 +00:00
|
|
|
if (!window.$chatwoot.hideMessageBubble) {
|
2022-02-25 10:48:18 +00:00
|
|
|
let className = 'woot-widget-bubble';
|
|
|
|
let closeBtnClassName = `woot-elements--${window.$chatwoot.position} woot-widget-bubble woot--close woot--hide`;
|
|
|
|
|
|
|
|
if (isFlatWidgetStyle(window.$chatwoot.widgetStyle)) {
|
|
|
|
className += ' woot-widget-bubble--flat';
|
|
|
|
closeBtnClassName += ' woot-widget-bubble--flat';
|
|
|
|
}
|
|
|
|
|
2020-04-03 07:34:58 +00:00
|
|
|
const chatIcon = createBubbleIcon({
|
2022-02-25 10:48:18 +00:00
|
|
|
className,
|
2020-04-03 07:34:58 +00:00
|
|
|
src: bubbleImg,
|
|
|
|
target: chatBubble,
|
|
|
|
});
|
|
|
|
|
2022-02-25 10:48:18 +00:00
|
|
|
addClass(closeBubble, closeBtnClassName);
|
2020-04-03 07:34:58 +00:00
|
|
|
|
|
|
|
chatIcon.style.background = widgetColor;
|
2022-02-25 10:48:18 +00:00
|
|
|
closeBubble.style.background = widgetColor;
|
2020-04-03 07:34:58 +00:00
|
|
|
|
|
|
|
bubbleHolder.appendChild(chatIcon);
|
2022-02-25 10:48:18 +00:00
|
|
|
bubbleHolder.appendChild(closeBubble);
|
2020-04-03 07:34:58 +00:00
|
|
|
bubbleHolder.appendChild(createNotificationBubble());
|
|
|
|
onClickChatBubble();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
toggleCloseButton: () => {
|
2022-01-12 10:55:27 +00:00
|
|
|
let isMobile = false;
|
2020-04-03 07:34:58 +00:00
|
|
|
if (window.matchMedia('(max-width: 668px)').matches) {
|
2022-01-12 10:55:27 +00:00
|
|
|
isMobile = true;
|
2020-04-03 07:34:58 +00:00
|
|
|
}
|
2022-01-12 10:55:27 +00:00
|
|
|
IFrameHelper.sendMessage('toggle-close-button', { isMobile });
|
2020-04-03 07:34:58 +00:00
|
|
|
},
|
|
|
|
};
|