BlockSurvey makes it easy to embed your meeting calendar from platforms like Calendly, Cal.com, and Bookeo, allowing respondents to schedule meetings directly within the survey.
Here is how you can do it:
Go to the Design screen and click on Add Question.
Select Schedule a Meeting.
Select your preferred platform from the dropdown:
Calendly
Cal.com
Bookeo
Get your scheduling link from your chosen platform (steps provided below) and paste the link into the Scheduling Link field to embed your calendar into your survey.
How to get the Scheduling link?
Calendly
Log in to your Calendly account.
Go to the Event Types tab.
Select the event you want to share.
Click the Share button.
In the pop-up, click Copy Link to copy the event URL.
Example: https://calendly.com/your-username/your-event
Cal.com
Log in to your Cal.com account.
Navigate to the event or booking page you want to share.
Click the Share button (chain icon) on your event page to copy the link.
Example: https://cal.com/your-username/event-name
Bookeo
Log in to your Bookeo account.
Go to Settings -> Theme and Layout -> Website Integration.
Choose Embed a widget in my website under Page Location.
In Step 2, paste https://blocksurvey.io/ as the address of the webpage where you are embedding the widget and click Save.
Copy the provided HTML script from Step 1 under the Widget section:
Example: <script type="text/javascript" src="https://bookeo.com/widget.js?a=3252WUYK691936D771606"></script>
6. Paste the script into the Widget Script field in BlockSurvey. This script will render the booking interface within your survey.
7. To track booking responses in the BlockSurvey responses screen, navigate to Marketing -> Conversion Tracking and Analytics in your Bookeo account.
8. Copy the provided tracking script and paste it into Bookeo (as shown in the screenshot).
<script>
// Prepare booking details using Bookeo placeholders
const bookingDetails = {
firstName: "{FIRSTNAME}",
lastName: "{LASTNAME}",
email: "{EMAIL}",
itemDesc: "{ITEMDESC}",
productCode: "{PRODUCTCODE}",
totalGross: "{TOTALGROSS}",
totalNet: "{TOTALNET}",
totalTax: "{TOTALTAX}",
totalPaid: "{TOTALPAID}",
paidNow: "{PAIDNOW}",
bookingNumber: "{BOOKINGNUMBER}",
languageCode: "{LANGUAGECODE}",
};
// Send booking details to the parent window
if (window.top !== window.self) {
window.top.postMessage(bookingDetails, "*");
} else {
console.warn("Not in an iframe, cannot send booking details to parent window.");
}
</script>
Once you've designed your survey, publish and test it to ensure everything works as expected.
How works for the respondents?
After a user books a meeting, you’ll be able to view the booking details directly on your scheduling platform.
By following these steps, you can seamlessly embed your calendar from the scheduling platform into BlockSurvey, enabling easy and smooth booking through your survey.