vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.0k Packages Projects Releases Wiki Activity

Add documentation to pass metadata (#19124)

Browse Source 
Co-authored-by: Hariom Balhara <hariombalhara@gmgmail.com>
This commit is contained in:
Hariom Balhara
2025-02-07 14:40:22 +05:30
committed by GitHub
co-authored by Hariom Balhara
parent 8612f77c07
commit 24a080b988
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
help/embedding/prefill-booking-form-embed.mdx
+20 -4
View File
@@ -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