diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index a03e2b1cc2..c3e0a91ff2 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -20,7 +20,7 @@ import { BookerSection } from "./components/Section";
import { Away, NotFound } from "./components/Unavailable";
import { extraDaysConfig, fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "./config";
import { useBookerStore, useInitializeBookerStore } from "./store";
-import type { BookerProps } from "./types";
+import type { BookerLayout, BookerProps } from "./types";
import { useEvent } from "./utils/event";
import { validateLayout } from "./utils/layout";
import { getQueryParam } from "./utils/query-param";
@@ -114,6 +114,21 @@ const BookerComponent = ({
return ;
}
+ // In Embed, a Dialog doesn't look good, we disable it intentionally for the layouts that support showing Form without Dialog(i.e. no-dialog Form)
+ const shouldShowFormInDialogMap: Record = {
+ // mobile supports showing the Form without Dialog
+ mobile: !isEmbed,
+ // We don't show Dialog in month_view currently. Can be easily toggled though as it supports no-dialog Form
+ month_view: false,
+ // week_view doesn't support no-dialog Form
+ // When it's supported, disable it for embed
+ week_view: true,
+ // column_view doesn't support no-dialog Form
+ // When it's supported, disable it for embed
+ column_view: true,
+ };
+
+ const shouldShowFormInDialog = shouldShowFormInDialogMap[layout];
return (
<>
{event.data ? : null}
@@ -174,7 +189,7 @@ const BookerComponent = ({
area="main"
className="border-subtle sticky top-0 ml-[-1px] h-full p-6 md:w-[var(--booker-main-width)] md:border-l"
{...fadeInLeft}
- visible={bookerState === "booking" && layout === BookerLayouts.MONTH_VIEW}>
+ visible={bookerState === "booking" && !shouldShowFormInDialog}>
setSelectedTimeslot(null)} />
@@ -232,7 +247,7 @@ const BookerComponent = ({
setSelectedTimeslot(null)}
/>
>