From 6b0726bcde6a246d06d1a0fb3542d064a021b104 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Mon, 1 Sep 2025 19:51:30 +0530
Subject: [PATCH] feat: Allow disabling auto-scroll using
 ui.disable-auto-scroll (#23462)

---
 packages/embeds/embed-core/src/embed-iframe.ts |  3 +++
 packages/embeds/embed-core/src/lib/utils.ts    |  1 +
 packages/embeds/embed-core/src/types.ts        |  2 ++
 packages/features/bookings/Booker/Booker.tsx   | 10 ++++++++--
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/embeds/embed-core/src/embed-iframe.ts b/packages/embeds/embed-core/src/embed-iframe.ts
index 64149eb731..9f0a2ff729 100644
--- a/packages/embeds/embed-core/src/embed-iframe.ts
+++ b/packages/embeds/embed-core/src/embed-iframe.ts
@@ -579,10 +579,13 @@ function main() {
   const url = new URL(document.URL);
   embedStore.theme = window?.getEmbedTheme?.();
 
+  const autoScrollFromParam = url.searchParams.get("ui.autoscroll");
+  const shouldDisableAutoScroll = autoScrollFromParam === "false";
   embedStore.uiConfig = {
     // TODO: Add theme as well here
     colorScheme: url.searchParams.get("ui.color-scheme"),
     layout: url.searchParams.get("layout") as BookerLayouts,
+    disableAutoScroll: shouldDisableAutoScroll,
   };
 
   actOnColorScheme(embedStore.uiConfig.colorScheme);
diff --git a/packages/embeds/embed-core/src/lib/utils.ts b/packages/embeds/embed-core/src/lib/utils.ts
index 5405fb2433..637e1015cc 100644
--- a/packages/embeds/embed-core/src/lib/utils.ts
+++ b/packages/embeds/embed-core/src/lib/utils.ts
@@ -79,6 +79,7 @@ function listKnownConfigProps() {
     "ui.color-scheme",
     "theme",
     "cal.embed.pageType",
+    "ui.autoscroll",
   ];
   return knownConfigProps;
 }
diff --git a/packages/embeds/embed-core/src/types.ts b/packages/embeds/embed-core/src/types.ts
index cb336f7114..fc5b42bf9c 100644
--- a/packages/embeds/embed-core/src/types.ts
+++ b/packages/embeds/embed-core/src/types.ts
@@ -32,6 +32,7 @@ export type UiConfig = {
   cssVarsPerTheme?: Record<Theme, Record<string, string>>;
   layout?: BookerLayouts;
   colorScheme?: string | null;
+  disableAutoScroll?: boolean;
 };
 
 declare global {
@@ -63,6 +64,7 @@ export type KnownConfig = {
   layout?: BookerLayouts;
   // TODO: Rename layout and theme as ui.layout and ui.theme as it makes it clear that these two can be configured using `ui` instruction as well any time.
   "ui.color-scheme"?: string;
+  "ui.autoscroll"?: "true" | "false";
   theme?: EmbedThemeConfig;
   // Prefixing with cal.embed because there could be more query params that aren't required by embed and are used for things like prefilling booking form, configuring dry run, and some other params simply to be forwarded to the booking success redirect URL.
   // There are some cal. prefixed query params as well, not meant for embed specifically, but in general for cal.com
diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index c117d7108b..a63f28639a 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -8,6 +8,7 @@ import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import { useIsPlatformBookerEmbed } from "@calcom/atoms/hooks/useIsPlatformBookerEmbed";
 import dayjs from "@calcom/dayjs";
 import PoweredBy from "@calcom/ee/components/PoweredBy";
+import { useEmbedUiConfig } from "@calcom/embed-core/embed-iframe";
 import { updateEmbedBookerState } from "@calcom/embed-core/src/embed-iframe";
 import TurnstileCaptcha from "@calcom/features/auth/Turnstile";
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
@@ -165,9 +166,14 @@ const BookerComponent = ({
   } = calendars;
 
   const scrolledToTimeslotsOnce = useRef(false);
-
+  const embedUiConfig = useEmbedUiConfig();
   const scrollToTimeSlots = () => {
-    if (isMobile && !scrolledToTimeslotsOnce.current && timeslotsRef.current) {
+    if (
+      isMobile &&
+      !scrolledToTimeslotsOnce.current &&
+      timeslotsRef.current &&
+      !embedUiConfig.disableAutoScroll
+    ) {
       // eslint-disable-next-line @calcom/eslint/no-scroll-into-view-embed -- We are allowing it here because scrollToTimeSlots is called on explicit user action where it makes sense to scroll, remember that the goal is to not do auto-scroll on embed load because that ends up scrolling the embedding webpage too
       scrollIntoViewSmooth(timeslotsRef.current, isEmbed);
       scrolledToTimeslotsOnce.current = true;