feat: Add chatwoot:ready event listener on window (#1091)

* feat: Add `chatwoot:ready` event listener on window

* Add specs

* Rename customEventHelper.js -> CustomEventHelper.js

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: () => {

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);
+};

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();
+  });
+});

app/views/widget_tests/index.html.erb

@@ -20,4 +20,8 @@ window.chatwootSettings = {
     })
   }
 })(document,"script");
+
+window.addEventListener('chatwoot:ready', function() {
+  console.log(window.$chatwoot)
+})
 </script>

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