From 24a080b98808e8288ba950b0b258f03b448ec976 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Fri, 7 Feb 2025 14:40:22 +0530
Subject: [PATCH] Add documentation to pass metadata (#19124)

Co-authored-by: Hariom Balhara <hariombalhara@gmgmail.com>
---
 help/embedding/prefill-booking-form-embed.mdx | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/help/embedding/prefill-booking-form-embed.mdx b/help/embedding/prefill-booking-form-embed.mdx
index 6c7b9b43ec..89c7aeda69 100644
--- a/help/embedding/prefill-booking-form-embed.mdx
+++ b/help/embedding/prefill-booking-form-embed.mdx
@@ -7,7 +7,7 @@ Booking form inside an embed can be prefilled as well.
 ## Inline Embed
 
 ```js
-// Prefill Name, Email and Attendee Address - React.
+// Prefill Name, Email, Attendee Address and passing metadata - React.
 // You can specify config property to do prefilling
 // React Demo Link - https://codesandbox.io/s/react-prefill-attendee-address-email-sqhf7r
 <Cal
@@ -15,6 +15,10 @@ Booking form inside an embed can be prefilled as well.
   config={{
     name: "Name",
     email: "booker@example.org",
+    // You will receive the value in payload.metadata["myKey"] in webhook.
+    // Also, it would be stored in booking table under metadata column
+    // It won't be shown on the booking details page.
+    "metadata[myKey]": "myValue",
     location: JSON.stringify({
       value: "attendeeInPerson",
       // It can be any string that defines an address where the meeting would occur
@@ -25,13 +29,17 @@ Booking form inside an embed can be prefilled as well.
 ```
 
 ```js
-// Prefill Name, Email and Attendee Address - Vanilla JS
+// Prefill Name, Email, Attendee Address and passing metadata - Vanilla JS
 // You can use 'inline' instruction to do the prefill
 // VanillaJS Demo link - https://codesandbox.io/s/prefill-embed-fields-vanilla-js-zft44w?file=/index.html
 Cal("inline", {
   config: {
     name: "Name",
     email: "booker@example.org",
+    // You will receive the value in payload.metadata["myKey"] in webhook.
+    // Also, it would be stored in booking table under metadata column
+    // It won't be shown on the booking details page.
+    "metadata[myKey]": "myValue",
     location: JSON.stringify({
       value: "attendeeInPerson",
       // It can be any string that defines an address where the meeting would occur
@@ -42,12 +50,16 @@ Cal("inline", {
 ```
 
 ```js
-// Prefill Name, Email and Attendee Phonenumber - React
+// Prefill Name, Email, Attendee Phonenumber and passing metadata - React
 <Cal
   // .... other props in here
   config={{
     name: "Name",
     email: "booker@example.org",
+    // You will receive the value in payload.metadata["myKey"] in webhook.
+    // Also, it would be stored in booking table under metadata column
+    // It won't be shown on the booking details page.
+    "metadata[myKey]": "myValue",
     location: JSON.stringify({
       value: "phone",
       // Any valid phonenumber in here
@@ -76,7 +88,7 @@ Cal("inline", {
 
 ## Floating button popup
 ```js
-// Prefill Name, Email and Attendee Phone - Vanilla JS
+// Prefill Name, Email, Attendee Phone and passing metadata - Vanilla JS
 // You can use 'floatingButton' instruction to do the prefill
 // This is common for React and VanillaJS embeds.
 // Note that for React, Cal is not Cal component here it is Cal API.
@@ -84,6 +96,10 @@ Cal("floatingButton", {
   config: {
     name: "Name",
     email: "booker@example.org",
+    // You will receive the value in payload.metadata["myKey"] in webhook.
+    // Also, it would be stored in booking table under metadata column
+    // It won't be shown on the booking details page.
+    "metadata[myKey]": "myValue",
     location: JSON.stringify({
       value: "phone",
       // Any valid phonenumber in here