From 1e31ac089a46f72a96c146d3c9fd3b722fec3ac8 Mon Sep 17 00:00:00 2001
From: Eunjae Lee <hey@eunjae.dev>
Date: Mon, 26 Jan 2026 15:07:29 +0100
Subject: [PATCH] fix: use createPortal for FeatureOptInBanner to avoid
 Intercom widget conflict (#27121)

* fix: use createPortal for FeatureOptInBanner to avoid Intercom widget conflict

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* fix: guard portal rendering against non-browser environments

Add typeof document check before accessing document.body in createPortal
to prevent SSR/test crashes when document is undefined.

Co-Authored-By: unknown <>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../components/FeatureOptInBannerWrapper.tsx   | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/features/feature-opt-in/components/FeatureOptInBannerWrapper.tsx b/packages/features/feature-opt-in/components/FeatureOptInBannerWrapper.tsx
index eac60dc766..91b5aa55d2 100644
--- a/packages/features/feature-opt-in/components/FeatureOptInBannerWrapper.tsx
+++ b/packages/features/feature-opt-in/components/FeatureOptInBannerWrapper.tsx
@@ -2,6 +2,7 @@
 
 import type { OptInFeatureConfig } from "@calcom/features/feature-opt-in/config";
 import type { ReactElement } from "react";
+import { createPortal } from "react-dom";
 
 import { FeatureOptInBanner } from "./FeatureOptInBanner";
 import type { FeatureOptInMutations } from "./FeatureOptInConfirmDialog";
@@ -40,13 +41,16 @@ function FeatureOptInBannerWrapper({ state }: FeatureOptInBannerWrapperProps): R
 
   return (
     <>
-      {state.shouldShow && (
-        <FeatureOptInBanner
-          featureConfig={state.featureConfig}
-          onDismiss={state.dismiss}
-          onOpenDialog={state.openDialog}
-        />
-      )}
+      {state.shouldShow &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <FeatureOptInBanner
+            featureConfig={state.featureConfig}
+            onDismiss={state.dismiss}
+            onOpenDialog={state.openDialog}
+          />,
+          document.body
+        )}
       {state.userRoleContext && (
         <FeatureOptInConfirmDialog
           isOpen={state.isDialogOpen}