// 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
// .... 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: "attendeeInPerson",
// It can be any string that defines an address where the meeting would occur
optionValue: "New York"
})
}}
></Cal>
// 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
optionValue: "New York"
})
}
});
// 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
optionValue: "+919999999999"
})
}}
></Cal>
// Prefill Name, Email and Attendee Phone - Vanilla JS
// You can use 'inline' instruction to do the prefill
Cal("inline", {
config: {
name: "Name",
email: "booker@example.org",
location: JSON.stringify({
value: "phone",
// Any valid phonenumber in here
optionValue: "+919999999999"
})
}
});
// 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.
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
optionValue: "+919999999999"
})
}
});