Add config support in floatingButton api (#8986)

Co-authored-by: alannnc <alannnc@gmail.com>
calcom · May 19, 2023 · 933cc73 · 933cc73
1 parent c7c75ff
commit 933cc73
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/packages/embeds/embed-core/playground.ts b/packages/embeds/embed-core/playground.ts
@@ -333,6 +333,16 @@ Cal("init", "routingFormDark", {
 
 if (only === "all" || only == "ns:floatingButton") {
   Cal.ns.floatingButton("floatingButton", {
-    calLink: "pro",
+    calLink: "pro/30min",
+    config: {
+      iframeAttrs: {
+        id: "floatingtest",
+      },
+      name: "John",
+      email: "johndoe@gmail.com",
+      notes: "Test Meeting",
+      guests: ["janedoe@example.com", "test@example.com"],
+      theme: "dark",
+    },
   });
 }
diff --git a/packages/embeds/embed-core/src/FloatingButton/FloatingButton.ts b/packages/embeds/embed-core/src/FloatingButton/FloatingButton.ts
@@ -4,6 +4,7 @@ type ModalTargetDatasetProps = {
   calLink: string;
   calNamespace: string;
   calOrigin: string;
+  calConfig: string;
 };
 
 type CamelCase<T extends string> = T extends `${infer U}${infer V}` ? `${Uppercase<U>}${V}` : T;

diff --git a/packages/embeds/embed-core/src/embed.ts b/packages/embeds/embed-core/src/embed.ts
@@ -435,6 +435,7 @@ class CalApi {
     buttonColor = "rgb(0, 0, 0)",
     buttonTextColor = "rgb(255, 255, 255)",
     calOrigin,
+    config,
   }: {
     calLink: string;
     buttonText?: string;
@@ -444,6 +445,7 @@ class CalApi {
     buttonColor?: string;
     buttonTextColor?: string;
     calOrigin?: string;
+    config?: PrefillAndIframeAttrsConfig;
   }) {
     // validate(arguments[0], {
     //   required: true,
@@ -466,6 +468,10 @@ class CalApi {
       el.dataset.calLink = calLink;
       el.dataset.calNamespace = this.cal.namespace;
       el.dataset.calOrigin = calOrigin ?? "";
+      if (config) {
+        el.dataset.calConfig = JSON.stringify(config);
+      }
+
       if (attributes?.id) {
         el.id = attributes.id;
       }