Send SDK message to HubSpot if usesCallingWindow=false

demos/demo-react-ts/src/components/App.tsx

@@ -163,8 +163,10 @@ function App() {
   cti.broadcastChannel.onmessage = ({
     data,
   }: MessageEvent<{ type: string; payload?: any }>) => {
-    // Send SDK message to HubSpot in the calling window
-    if (cti.isFromWindow) {
+    // Send SDK message to HubSpot in the calling window or if usesCallingWindow is false
+    if (
+      cti.usesCallingWindow ? cti.isFromWindow : cti.isFromRemoteWithoutWindow
+    ) {
       // TODO: Refactor to use eventHandler to invoke the appropriate function
       // const eventHandler = broadcastEventHandlers[data.type];
       // cti.contract[eventHandler](data.payload);

demos/demo-react-ts/src/components/screens/LoginScreen.tsx

@@ -28,6 +28,12 @@ function LoginScreen({ cti, handleNextScreen }: ScreenProps) {
     target: { value },
   }: ChangeEvent<HTMLInputElement>) => setPassword(value);
 
+  const handleOpenWindow = () => {
+    const hostUrl = "https://app.hubspotqa.com/";
+    const url = `${hostUrl}/calling-integration-popup-ui/${cti.portalId}?usesCallingWindow=false`;
+    window.open(url, "_blank");
+  };
+
   return (
     <Wrapper style={{ color: PANTERA }}>
       <form>
@@ -67,6 +73,18 @@ function LoginScreen({ cti, handleNextScreen }: ScreenProps) {
             Sign in with SSO
           </LinkButton>
         </Row>
+        <br />
+        {!cti.usesCallingWindow && (
+          <Row>
+            <LinkButton
+              use="transparent-on-primary"
+              onClick={handleOpenWindow}
+              type="button"
+            >
+              Open calling window
+            </LinkButton>
+          </Row>
+        )}
       </form>
     </Wrapper>
   );

demos/demo-react-ts/src/hooks/useCti.ts

@@ -55,6 +55,8 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
 
   private _usesCallingWindow = true;
 
+  portalId = 0;
+
   broadcastChannel: BroadcastChannel = new BroadcastChannel(
     "calling-extensions-demo-react-ts"
   );
@@ -100,14 +102,18 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
     this._usesCallingWindow = usesCallingWindow;
   }
 
+  get isFromRemoteWithoutWindow() {
+    return !this._usesCallingWindow && this._iframeLocation === "remote";
+  }
+
   /** Do not send messages to HubSpot in the remote */
   get isFromRemote() {
     return this._usesCallingWindow && this._iframeLocation === "remote";
   }
 
   /** Send messages to HubSpot in the calling window */
   get isFromWindow() {
-    return this._usesCallingWindow && this._iframeLocation === "window";
+    return this._iframeLocation === "window";
   }
 
   /** Broadcast message from remote or window */
@@ -135,6 +141,10 @@ class CallingExtensionsWrapper implements CallingExtensionsContract {
       this._usesCallingWindow = userData.usesCallingWindow;
     }
 
+    if (userData.portalId) {
+      this.portalId = userData.portalId;
+    }
+
     return this._cti.initialized(userData);
   }
 
@@ -348,6 +358,7 @@ export const useCti = (setDialNumber: (phoneNumber: string) => void) => {
             },
             iframeLocation: data.iframeLocation,
             usesCallingWindow: data.usesCallingWindow,
+            portalId: data.portalId,
           } as OnInitialized);
         },
         onDialNumber: (data: any, _rawEvent: any) => {