diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js index c1ac73046..f42afcd64 100644 --- a/app/javascript/sdk/IFrameHelper.js +++ b/app/javascript/sdk/IFrameHelper.js @@ -13,6 +13,9 @@ import { onClickChatBubble, onBubbleClick, } from './bubbleHelpers'; +import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper'; + +const EVENT_NAME = 'chatwoot:ready'; export const IFrameHelper = { getUrl({ baseUrl, websiteToken }) { @@ -89,6 +92,7 @@ export const IFrameHelper = { loaded: message => { Cookies.set('cw_conversation', message.config.authToken, { expires: 365, + sameSite: 'Lax', }); window.$chatwoot.hasLoaded = true; IFrameHelper.sendMessage('config-set', { @@ -103,6 +107,7 @@ export const IFrameHelper = { if (window.$chatwoot.user) { IFrameHelper.sendMessage('set-user', window.$chatwoot.user); } + dispatchWindowEvent(EVENT_NAME); }, toggleBubble: () => { diff --git a/app/javascript/shared/helpers/CustomEventHelper.js b/app/javascript/shared/helpers/CustomEventHelper.js new file mode 100644 index 000000000..df5d4bb0c --- /dev/null +++ b/app/javascript/shared/helpers/CustomEventHelper.js @@ -0,0 +1,15 @@ +export const createEvent = eventName => { + let event; + if (typeof window.CustomEvent === 'function') { + event = new CustomEvent(eventName); + } else { + event = document.createEvent('CustomEvent'); + event.initCustomEvent(eventName, false, false, null); + } + return event; +}; + +export const dispatchWindowEvent = eventName => { + const event = createEvent(eventName); + window.dispatchEvent(event); +}; diff --git a/app/javascript/shared/helpers/specs/CustomEventHelper.spec.js b/app/javascript/shared/helpers/specs/CustomEventHelper.spec.js new file mode 100644 index 000000000..f6fe0908f --- /dev/null +++ b/app/javascript/shared/helpers/specs/CustomEventHelper.spec.js @@ -0,0 +1,9 @@ +import { dispatchWindowEvent } from '../CustomEventHelper'; + +describe('dispatchWindowEvent', () => { + it('dispatches correct event', () => { + window.dispatchEvent = jest.fn(); + dispatchWindowEvent('chatwoot:ready'); + expect(dispatchEvent).toHaveBeenCalled(); + }); +}); diff --git a/app/views/widget_tests/index.html.erb b/app/views/widget_tests/index.html.erb index 51ede71bd..241047e16 100644 --- a/app/views/widget_tests/index.html.erb +++ b/app/views/widget_tests/index.html.erb @@ -20,4 +20,8 @@ window.chatwootSettings = { }) } })(document,"script"); + +window.addEventListener('chatwoot:ready', function() { + console.log(window.$chatwoot) +}) diff --git a/docs/channels/website-sdk.md b/docs/channels/website-sdk.md index be59f8f69..b1ecb3d11 100644 --- a/docs/channels/website-sdk.md +++ b/docs/channels/website-sdk.md @@ -8,6 +8,15 @@ Additional information about a contact is always useful, Chatwoot website SDK en If you have installed our code on your website, SDK would expose `window.$chatwoot` object. +Inorder to make sure that the SDK has been loaded completely, please make sure that you listen to `chatwoot:ready` event as follows + +```js +window.addEventListener('chatwoot:ready', function() { + // Use window.$chatwoot here + // ... +}) +``` + 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