Integrating a seamless appointment booking feature into your website has never been easier with CodeDesign. By embedding Calendly, a popular scheduling tool, you can allow visitors to book meetings in just a few clicks. This feature not only enhances user convenience but also streamlines your scheduling process.
We've put together this video that will help you setup meeting/appointment scheduling functionality on your CodeDesign website or landing page. If you prefer a detailed article, let's dive in!
Step-by-step Guide : Adding Appointment Booking Feature on CodeDesign with Calendly
Integrating a seamless appointment booking feature into your website has never been easier with CodeDesign. By embedding Calendly, a popular scheduling tool, you can allow visitors to book meetings in just a few clicks. This feature not only enhances user convenience but also streamlines your scheduling process. Let’s dive into how you can set it up.
What is Calendly?
Calendly is an intuitive online scheduling tool that eliminates the need for back-and-forth emails. Simply set your availability, share a link, and let others pick a time that works for everyone. With features like calendar syncing (Google, Microsoft, and more), automatic reminders, and safeguards against double bookings, Calendly is a reliable choice for managing appointments efficiently.
Step 1: Get Started with Calendly
If you don’t already have a Calendly account, you’ll need to create one and set up your availability. There are many resources online to help you get started—check out the tutorial linked in the description of this guide for quick setup instructions.
Once your account is ready, copy your unique Calendly profile link.
It will look something like this: https://calendly.com/codedesign-support/30min
This link is crucial as it allows visitors to schedule appointments directly with you. Keep it handy for the next steps.
Step 2: Add Calendly to Your Website
Open the CodeDesign Builder
Begin by loading the webpage where you want to add the appointment booking feature. Decide on the section where it should appear; for this example, we’ll place it below a testimonial section.
Add the Calendly Integration
Select the section where you’d like to add the Calendly booking option. Hover near the bottom of the section until you see the Add button.
Click on Add Element from the pop-up options. This opens the Elements panel.
Scroll down to the Embed section, where you’ll find the Calendly icon.
Click on the Calendly icon, and the integration element will appear on your webpage.
Insert Your Calendly Link
Double-click on the Calendly element. A pop-up will appear prompting you to enter your unique Calendly link.
Paste the link you copied earlier.
Save the changes, and your Calendly scheduling feature is now live on your website.
Step 3: Preview and Test
To ensure everything is functioning correctly, deploy or preview your website/landing page and do a mock booking process.
Once the process is done, confirm it displays your availability and allows visitors to book appointments seamlessly.
If you have any questions or run into issues, feel free to reach out through the CodeDesign support chat, forum, or leave us a comment. We’re here to help you every step of the way. Start building smarter with Calendly and CodeDesign today!