diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx index be3953160d..4c3839eed0 100644 --- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx +++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx @@ -318,6 +318,7 @@ function EventTypeSingleLayout({ StartIcon={Code} color="secondary" variant="icon" + namespace={eventType.slug} tooltip={t("embed")} eventId={eventType.id} /> diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx index ba7c9a11b3..c3dba7ee00 100644 --- a/apps/web/pages/event-types/index.tsx +++ b/apps/web/pages/event-types/index.tsx @@ -512,6 +512,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL {!isManagedEventType && ( ; const Cal = function Cal(props: CalProps) { - const { calLink, calOrigin, config, initConfig = {}, embedJsUrl, ...restProps } = props; + const { calLink, calOrigin, namespace = "", config, initConfig = {}, embedJsUrl, ...restProps } = props; if (!calLink) { throw new Error("calLink is required"); } @@ -31,16 +32,28 @@ const Cal = function Cal(props: CalProps) { } initializedRef.current = true; const element = ref.current; - Cal("init", { - ...initConfig, - origin: calOrigin, - }); - Cal("inline", { - elementOrSelector: element, - calLink, - config, - }); - }, [Cal, calLink, config, calOrigin, initConfig]); + if (namespace) { + Cal("init", namespace, { + ...initConfig, + origin: calOrigin, + }); + Cal.ns[namespace]("inline", { + elementOrSelector: element, + calLink, + config, + }); + } else { + Cal("init", { + ...initConfig, + origin: calOrigin, + }); + Cal("inline", { + elementOrSelector: element, + calLink, + config, + }); + } + }, [Cal, calLink, config, namespace, calOrigin, initConfig]); if (!Cal) { return null; diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx index be757d4255..8f3be6d2d7 100644 --- a/packages/features/embed/Embed.tsx +++ b/packages/features/embed/Embed.tsx @@ -503,12 +503,14 @@ const EmbedTypeCodeAndPreviewDialogContent = ({ embedType, embedUrl, tabs, + namespace, eventTypeHideOptionDisabled, types, }: { embedType: EmbedType; embedUrl: string; tabs: EmbedTabs; + namespace: string; eventTypeHideOptionDisabled: boolean; types: EmbedTypes; }) => { @@ -1013,6 +1015,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
{tab.type === "code" ? ( ) : ( { const searchParams = useSearchParams(); - const embedUrl = searchParams?.get("embedUrl") as string; + const embedUrl = (searchParams?.get("embedUrl") || "") as string; + const namespace = (searchParams?.get("namespace") || "") as string; + return ( {!searchParams?.get("embedType") ? ( @@ -1110,6 +1116,7 @@ export const EmbedDialog = ({ = { embedUrl: string; + namespace: string; children?: React.ReactNode; className?: string; as?: T; @@ -1133,6 +1141,7 @@ export const EmbedButton = ({ className = "", as, eventId, + namespace, ...props }: EmbedButtonProps & React.ComponentPropsWithoutRef) => { const { goto } = useRouterHelpers(); @@ -1141,6 +1150,7 @@ export const EmbedButton = ({ goto({ dialog: "embed", eventId: eventId ? eventId.toString() : "", + namespace, embedUrl, }); }; diff --git a/packages/features/embed/lib/EmbedCodes.tsx b/packages/features/embed/lib/EmbedCodes.tsx index 464b122abb..05971ebdca 100644 --- a/packages/features/embed/lib/EmbedCodes.tsx +++ b/packages/features/embed/lib/EmbedCodes.tsx @@ -12,11 +12,13 @@ export const Codes = { uiInstructionCode, previewState, embedCalOrigin, + namespace, }: { calLink: string; uiInstructionCode: string; previewState: PreviewState; embedCalOrigin: string; + namespace: string; }) => { const width = getDimension(previewState.inline.width); const height = getDimension(previewState.inline.height); @@ -31,6 +33,7 @@ export const Codes = { })(); }, []) return { return code` import { getCalApi } from "@calcom/embed-react"; @@ -57,7 +62,7 @@ export const Codes = { useEffect(()=>{ (async function () { const cal = await getCalApi(${IS_SELF_HOSTED ? `"${embedLibUrl}"` : ""}); - cal("floatingButton", ${floatingButtonArg}); + cal.ns.${namespace}("floatingButton", ${floatingButtonArg}); ${uiInstructionCode} })(); }, []) @@ -68,11 +73,13 @@ export const Codes = { uiInstructionCode, previewState, embedCalOrigin, + namespace, }: { calLink: string; uiInstructionCode: string; previewState: PreviewState; embedCalOrigin: string; + namespace: string; }) => { return code` import { getCalApi } from "@calcom/embed-react"; @@ -85,6 +92,7 @@ export const Codes = { })(); }, []) return