Chatwoot/app/javascript/packs/sdk.js
Fayaz Ahmed ef850eda0f
feat: Add the SDK method to programatically toggle live chat bubble (#4223)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2022-05-06 19:30:48 +05:30

148 lines
4.4 KiB
JavaScript
Executable file

import Cookies from 'js-cookie';
import { IFrameHelper } from '../sdk/IFrameHelper';
import {
getBubbleView,
getDarkMode,
getWidgetStyle,
} from '../sdk/settingsHelper';
import {
computeHashForUserData,
getUserCookieName,
hasUserKeys,
} from '../sdk/cookieHelpers';
import { addClass, removeClass } from '../sdk/DOMHelpers';
import { SDK_SET_BUBBLE_VISIBILITY } from 'shared/constants/sharedFrameEvents';
const runSDK = ({ baseUrl, websiteToken }) => {
if (window.$chatwoot) {
return;
}
const chatwootSettings = window.chatwootSettings || {};
window.$chatwoot = {
baseUrl,
hasLoaded: false,
hideMessageBubble: chatwootSettings.hideMessageBubble || false,
isOpen: false,
position: chatwootSettings.position === 'left' ? 'left' : 'right',
websiteToken,
locale: chatwootSettings.locale,
type: getBubbleView(chatwootSettings.type),
launcherTitle: chatwootSettings.launcherTitle || '',
showPopoutButton: chatwootSettings.showPopoutButton || false,
widgetStyle: getWidgetStyle(chatwootSettings.widgetStyle) || 'standard',
resetTriggered: false,
darkMode: getDarkMode(chatwootSettings.darkMode),
toggle(state) {
IFrameHelper.events.toggleBubble(state);
},
toggleBubbleVisibility(visibility) {
let widgetElm = document.querySelector('.woot--bubble-holder');
let widgetHolder = document.querySelector('.woot-widget-holder');
if (visibility === 'hide') {
addClass(widgetHolder, 'woot-widget--without-bubble');
addClass(widgetElm, 'woot-hidden');
window.$chatwoot.hideMessageBubble = true;
} else if (visibility === 'show') {
removeClass(widgetElm, 'woot-hidden');
removeClass(widgetHolder, 'woot-widget--without-bubble');
window.$chatwoot.hideMessageBubble = false;
}
IFrameHelper.sendMessage(SDK_SET_BUBBLE_VISIBILITY, {
hideMessageBubble: window.$chatwoot.hideMessageBubble,
});
},
popoutChatWindow() {
IFrameHelper.events.popoutChatWindow({
baseUrl: window.$chatwoot.baseUrl,
websiteToken: window.$chatwoot.websiteToken,
locale: window.$chatwoot.locale,
});
},
setUser(identifier, user) {
if (typeof identifier !== 'string' && typeof identifier !== 'number') {
throw new Error('Identifier should be a string or a number');
}
if (!hasUserKeys(user)) {
throw new Error(
'User object should have one of the keys [avatar_url, email, name]'
);
}
const userCookieName = getUserCookieName();
const existingCookieValue = Cookies.get(userCookieName);
const hashToBeStored = computeHashForUserData({ identifier, user });
if (hashToBeStored === existingCookieValue) {
return;
}
window.$chatwoot.identifier = identifier;
window.$chatwoot.user = user;
IFrameHelper.sendMessage('set-user', { identifier, user });
Cookies.set(userCookieName, hashToBeStored, {
expires: 365,
sameSite: 'Lax',
});
},
setCustomAttributes(customAttributes = {}) {
if (!customAttributes || !Object.keys(customAttributes).length) {
throw new Error('Custom attributes should have atleast one key');
} else {
IFrameHelper.sendMessage('set-custom-attributes', { customAttributes });
}
},
deleteCustomAttribute(customAttribute = '') {
if (!customAttribute) {
throw new Error('Custom attribute is required');
} else {
IFrameHelper.sendMessage('delete-custom-attribute', {
customAttribute,
});
}
},
setLabel(label = '') {
IFrameHelper.sendMessage('set-label', { label });
},
removeLabel(label = '') {
IFrameHelper.sendMessage('remove-label', { label });
},
setLocale(localeToBeUsed = 'en') {
IFrameHelper.sendMessage('set-locale', { locale: localeToBeUsed });
},
reset() {
if (window.$chatwoot.isOpen) {
IFrameHelper.events.toggleBubble();
}
Cookies.remove('cw_conversation');
Cookies.remove(getUserCookieName());
const iframe = IFrameHelper.getAppFrame();
iframe.src = IFrameHelper.getUrl({
baseUrl: window.$chatwoot.baseUrl,
websiteToken: window.$chatwoot.websiteToken,
});
window.$chatwoot.resetTriggered = true;
},
};
IFrameHelper.createFrame({
baseUrl,
websiteToken,
});
};
window.chatwootSDK = {
run: runSDK,
};