Merge pull request #2528 from ably/web-4261-hubspot-meta-tag

[WEB-4261] Open Hubspot chat when conversation Meta tag is present

Author: matt423

src/external-scripts/hubspot.test.ts

@@ -92,4 +92,65 @@ describe('Hubspot', () => {
       expect(spy).toHaveBeenCalledTimes(2);
     });
   });
+
+  describe('openFromMetaTag', () => {
+    beforeEach(() => {
+      document.head.innerHTML = '';
+      jest.spyOn(window.history, 'pushState').mockImplementation();
+      global.window.HubSpotConversations = {
+        widget: {
+          load: jest.fn(),
+          open: jest.fn(),
+        },
+      };
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it('opens chat widget when conversation meta tag exists', () => {
+      // Add a meta tag to the document
+      const metaTag = document.createElement('meta');
+      metaTag.name = 'conversation';
+      metaTag.content = 'sales';
+      document.head.appendChild(metaTag);
+
+      hubspot('12345');
+
+      // Simulate the HubSpot script loading by calling the registered callback
+      global.hsConversationsOnReady[0]();
+
+      expect(window.history.pushState).toHaveBeenCalledWith({}, '', '?chat-type=sales');
+      expect(global.window.HubSpotConversations.widget.load).toHaveBeenCalled();
+      expect(global.window.HubSpotConversations.widget.open).toHaveBeenCalled();
+    });
+
+    it('does not open chat widget when no conversation meta tag exists', () => {
+      document.head.innerHTML = '<meta name="other-tag" content="something">';
+
+      hubspot('12345');
+
+      // Simulate the HubSpot script loading
+      global.hsConversationsOnReady[0]();
+
+      expect(window.history.pushState).not.toHaveBeenCalled();
+      expect(global.window.HubSpotConversations.widget.load).not.toHaveBeenCalled();
+      expect(global.window.HubSpotConversations.widget.open).not.toHaveBeenCalled();
+    });
+
+    it('correctly sets URL query parameter from meta tag content', () => {
+      const metaTag = document.createElement('meta');
+      metaTag.name = 'conversation';
+      metaTag.content = 'support';
+      document.head.appendChild(metaTag);
+
+      hubspot('12345');
+
+      // Simulate the HubSpot script loading
+      global.hsConversationsOnReady[0]();
+
+      expect(window.history.pushState).toHaveBeenCalledWith({}, '', '?chat-type=support');
+    });
+  });
 });

src/external-scripts/hubspot.ts

@@ -6,6 +6,10 @@ declare global {
   type HubspotItem = string | Record<string, string>;
   interface Window {
     _hsq: Array<string | Record<string, string>>[];
+    hsConversationsSettings?: {
+      loadImmediately: boolean;
+    };
+    hsConversationsOnReady?: Array<() => void>;
   }
 }
 
@@ -22,12 +26,25 @@ export type HubspotUser = {
   adminUrl: string;
 };
 
-const hubspot = (hubspotTrackingId, loadImmediately = true) => {
+const hubspot = (hubspotTrackingId: string, loadImmediately = true) => {
+  const openFromMetaTag = () => {
+    const metaConversation = document.querySelector('meta[name="conversation"]') as HTMLMetaElement;
+
+    if (metaConversation) {
+      window.history.pushState({}, '', `?chat-type=${metaConversation.content}`);
+
+      window.HubSpotConversations?.widget.load();
+      window.HubSpotConversations?.widget.open();
+    }
+  };
+
   scriptLoader(document, `//js.hs-scripts.com/${hubspotTrackingId}.js`, { id: 'hs-script-loader' });
   window._hsq = window._hsq || [];
   window.hsConversationsSettings = {
     loadImmediately: loadImmediately,
   };
+
+  window.hsConversationsOnReady = [...(window.hsConversationsOnReady || []), openFromMetaTag];
 };
 
 export const hubspotIdentifyUser = ({