Documentation
- Welcome
- Quick Start
- Enterprise
- Billing and Usage
- Event Types
- Availabilities
- Bookings
- Workflows
- Embedding
- Auth and Provisioning
- Routing
- Apps and Integrations
- Privacy and Compliance
- Developers
Embedding
Prefill booking form in Embed
Booking form inside an embed can be prefilled as well.
Inline Embed
// 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: "[email protected]",
// 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: "[email protected]",
// 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: "[email protected]",
// 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: "[email protected]",
location: JSON.stringify({
value: "phone",
// Any valid phonenumber in here
optionValue: "+919999999999"
})
}
});
Floating button popup
// 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: "[email protected]",
// 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"
})
}
});
Other location types and other fields can be prefilled in the similar way. You can find the correct value to give from here
On this page
Assistant
Responses are generated using AI and may contain mistakes.