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>; 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;