wip

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}
                 />

apps/web/pages/event-types/index.tsx

@@ -512,6 +512,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               {!isManagedEventType && (
                                 <DropdownMenuItem className="outline-none">
                                   <EventTypeEmbedButton
+                                    namespace={type.slug}
                                     as={DropdownItem}
                                     type="button"
                                     StartIcon={Code}

packages/embeds/embed-react/src/Cal.tsx

@@ -13,12 +13,13 @@ type CalProps = {
     debug?: boolean;
     uiDebug?: boolean;
   };
+  namespace?: string;
   config?: PrefillAndIframeAttrsConfig;
   embedJsUrl?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 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", {
+    if (namespace) {
-      ...initConfig,
+      Cal("init", namespace, {
-      origin: calOrigin,
+        ...initConfig,
-    });
+        origin: calOrigin,
-    Cal("inline", {
+      });
-      elementOrSelector: element,
+      Cal.ns[namespace]("inline", {
-      calLink,
+        elementOrSelector: element,
-      config,
+        calLink,
-    });
+        config,
-  }, [Cal, calLink, config, calOrigin, initConfig]);
+      });
+    } else {
+      Cal("init", {
+        ...initConfig,
+        origin: calOrigin,
+      });
+      Cal("inline", {
+        elementOrSelector: element,
+        calLink,
+        config,
+      });
+    }
+  }, [Cal, calLink, config, namespace, calOrigin, initConfig]);
 
   if (!Cal) {
     return null;

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 = ({
                   <div className="flex h-[55vh] flex-grow flex-col">
                     {tab.type === "code" ? (
                       <tab.Component
+                        namespace={namespace}
                         embedType={embedType}
                         calLink={calLink}
                         previewState={previewState}
@@ -1020,6 +1023,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       />
                     ) : (
                       <tab.Component
+                        namespace={namespace}
                         embedType={embedType}
                         calLink={calLink}
                         previewState={previewState}
@@ -1101,7 +1105,9 @@ export const EmbedDialog = ({
   eventTypeHideOptionDisabled: boolean;
 }) => {
   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 (
     <Dialog name="embed" clearQueryParamsOnClose={queryParamsForDialog}>
       {!searchParams?.get("embedType") ? (
@@ -1110,6 +1116,7 @@ export const EmbedDialog = ({
         <EmbedTypeCodeAndPreviewDialogContent
           embedType={searchParams?.get("embedType") as EmbedType}
           embedUrl={embedUrl}
+          namespace={namespace}
           tabs={tabs}
           types={types}
           eventTypeHideOptionDisabled={eventTypeHideOptionDisabled}
@@ -1121,6 +1128,7 @@ export const EmbedDialog = ({
 
 type EmbedButtonProps<T> = {
   embedUrl: string;
+  namespace: string;
   children?: React.ReactNode;
   className?: string;
   as?: T;
@@ -1133,6 +1141,7 @@ export const EmbedButton = <T extends React.ElementType>({
   className = "",
   as,
   eventId,
+  namespace,
   ...props
 }: EmbedButtonProps<T> & React.ComponentPropsWithoutRef<T>) => {
   const { goto } = useRouterHelpers();
@@ -1141,6 +1150,7 @@ export const EmbedButton = <T extends React.ElementType>({
     goto({
       dialog: "embed",
       eventId: eventId ? eventId.toString() : "",
+      namespace,
       embedUrl,
     });
   };

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 <Cal
+    ${namespace ? `namespace="${namespace}"` : ""}
 	  calLink="${calLink}"
 	  style={{width:"${width}",height:"${height}",overflow:"scroll"}}
 	  ${previewState.layout ? "config={{layout: '" + previewState.layout + "'}}" : ""}${
@@ -46,9 +49,11 @@ export const Codes = {
     "floating-popup": ({
       floatingButtonArg,
       uiInstructionCode,
+      namespace,
     }: {
       floatingButtonArg: string;
       uiInstructionCode: string;
+      namespace: string;
     }) => {
       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 <button
+    data-cal-namespace="${namespace}"
 	  data-cal-link="${calLink}"${IS_SELF_HOSTED ? `\ndata-cal-origin="${embedCalOrigin}"` : ""}
 	  ${`data-cal-config='${JSON.stringify({
       layout: previewState.layout,
@@ -98,12 +106,14 @@ export const Codes = {
       calLink,
       uiInstructionCode,
       previewState,
+      namespace,
     }: {
       calLink: string;
       uiInstructionCode: string;
       previewState: PreviewState;
+      namespace: string;
     }) => {
-      return code`Cal("inline", {
+      return code`Cal.ns.${namespace}("inline", {
 	elementOrSelector:"#my-cal-inline",
 	calLink: "${calLink}",
 	layout: "${previewState.layout}"
@@ -115,23 +125,28 @@ export const Codes = {
     "floating-popup": ({
       floatingButtonArg,
       uiInstructionCode,
+      namespace,
     }: {
       floatingButtonArg: string;
       uiInstructionCode: string;
+      namespace: string;
     }) => {
-      return code`Cal("floatingButton", ${floatingButtonArg});
+      return code`Cal.ns.${namespace}("floatingButton", ${floatingButtonArg});
   ${uiInstructionCode}`;
     },
     "element-click": ({
       calLink,
       uiInstructionCode,
       previewState,
+      namespace,
     }: {
       calLink: string;
       uiInstructionCode: string;
       previewState: PreviewState;
+      namespace: string;
     }) => {
       return code`
+      data-cal-namespace="${namespace}"
   // Important: Please add following attributes to the element you want to open Cal on click
   // \`data-cal-link="${calLink}"\`
   // \`data-cal-config='${JSON.stringify({

packages/features/embed/lib/EmbedTabs.tsx

@@ -22,8 +22,8 @@ export const tabs = [
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
-      { embedType: EmbedType; calLink: string; previewState: PreviewState }
+      { embedType: EmbedType; calLink: string; previewState: PreviewState; namespace: string }
-    >(function EmbedHtml({ embedType, calLink, previewState }, ref) {
+    >(function EmbedHtml({ embedType, calLink, previewState, namespace }, ref) {
       const { t } = useLocale();
       const embedSnippetString = useGetEmbedSnippetString();
       const embedCalOrigin = useEmbedCalOrigin();
@@ -56,7 +56,14 @@ export const tabs = [
                 : "") +
               `<script type="text/javascript">
   ${embedSnippetString}
-  ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previewState, embedCalOrigin })}
+  ${getEmbedTypeSpecificString({
+    embedFramework: "HTML",
+    embedType,
+    calLink,
+    previewState,
+    embedCalOrigin,
+    namespace,
+  })}
   </script>
   <!-- Cal ${embedType} embed code ends -->`
             }
@@ -73,8 +80,8 @@ export const tabs = [
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
-      { embedType: EmbedType; calLink: string; previewState: PreviewState }
+      { embedType: EmbedType; calLink: string; previewState: PreviewState; namespace: string }
-    >(function EmbedReact({ embedType, calLink, previewState }, ref) {
+    >(function EmbedReact({ embedType, calLink, previewState, namespace }, ref) {
       const { t } = useLocale();
       const embedCalOrigin = useEmbedCalOrigin();
 
@@ -101,7 +108,14 @@ export const tabs = [
   
   /* If you are using npm */
   // npm install @calcom/embed-react
-  ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, previewState, embedCalOrigin })}
+  ${getEmbedTypeSpecificString({
+    embedFramework: "react",
+    embedType,
+    calLink,
+    previewState,
+    embedCalOrigin,
+    namespace,
+  })}
   `}
           />
         </>
@@ -115,7 +129,7 @@ export const tabs = [
     type: "iframe",
     Component: forwardRef<
       HTMLIFrameElement | HTMLTextAreaElement | null,
-      { calLink: string; embedType: EmbedType; previewState: PreviewState }
+      { calLink: string; embedType: EmbedType; previewState: PreviewState; namespace: string }
     >(function Preview({ calLink, embedType }, ref) {
       const bookerUrl = useBookerUrl();
       if (ref instanceof Function || !ref) {
@@ -144,12 +158,14 @@ const getEmbedTypeSpecificString = ({
   calLink,
   embedCalOrigin,
   previewState,
+  namespace,
 }: {
   embedFramework: EmbedFramework;
   embedType: EmbedType;
   calLink: string;
   previewState: PreviewState;
   embedCalOrigin: string;
+  namespace: string;
 }) => {
   const frameworkCodes = Codes[embedFramework];
   if (!frameworkCodes) {
@@ -189,6 +205,7 @@ const getEmbedTypeSpecificString = ({
       uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
       previewState,
       embedCalOrigin,
+      namespace,
     });
   } else if (embedType === "floating-popup") {
     const floatingButtonArg = {
@@ -197,11 +214,13 @@ const getEmbedTypeSpecificString = ({
       ...previewState.floatingPopup,
     };
     return frameworkCodes[embedType]({
+      namespace,
       floatingButtonArg: JSON.stringify(floatingButtonArg),
       uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
     });
   } else if (embedType === "element-click") {
     return frameworkCodes[embedType]({
+      namespace,
       calLink,
       uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
       previewState,