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 { addClasses, removeClasses } from '../sdk/DOMHelpers'; import { SDK_SET_BUBBLE_VISIBILITY } from 'shared/constants/sharedFrameEvents'; const runSDK = ({ baseUrl, websiteToken }) => { if (window.$chatwoot) { return; } const chatwootSettings = window.chatwootSettings || {}; let locale = chatwootSettings.locale || 'en'; if (chatwootSettings.useBrowserLanguage) { locale = window.navigator.language.replace('-', '_'); } window.$chatwoot = { baseUrl, hasLoaded: false, hideMessageBubble: chatwootSettings.hideMessageBubble || false, isOpen: false, position: chatwootSettings.position === 'left' ? 'left' : 'right', websiteToken, locale, useBrowserLanguage: chatwootSettings.useBrowserLanguage || false, 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') { addClasses(widgetHolder, 'woot-widget--without-bubble'); addClasses(widgetElm, 'woot-hidden'); window.$chatwoot.hideMessageBubble = true; } else if (visibility === 'show') { removeClasses(widgetElm, 'woot-hidden'); removeClasses(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, }); }, 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, };