Integrate Calendly with your one page site - to collect appointments & bookings

JR.Anand

—

—

Posted in tutorials

If you’re running events, online sessions or consulting - adding appointment booking & scheduling is the biggest challenge. With Calendly, you can manage that without any hassle.

What is Calendly?

Calendly

Calendly is a simple solution for automating bookings on your website. Calendly puts your entire meeting workflow on autopilot, sending everything from reminder emails to thank you notes, so you can focus on the work only you can do.

With Embed, you can let customers and prospects schedule an appointment from any page on your site, without the need to develop a scheduling solution.

Getting Started

  1. Create an account with Calendly
  2. Connect your Google account
  3. Grant permission for Calendly to access your calendar
  4. Create your Calendly URL. We recommend using your business name
  5. Choose the days and times that you are available for bookings
  6. Select your role from Calendly’s list

Setting up Calendly Events

If you’re setting up calendly for the first time, you will see that there is a default event for a 15-minute meeting / 30-minute already in your dashboard. If this format works for you, it can be edited to your preferences by clicking the cog icon in the top right of the event and selecting Edit from the drop-down list. Also, you can create your own event type, by clicking on + New Event Type button

There are four type of events you can create

  1. One - to - One - Let an invitee pick a time to meet with you
  2. Group - Let multiple invitees meet with you at one time.
  3. Collective - Host an event with another person and let invitees pick a time when you’re all available.
  4. Round Robin - Create an event that cycles between multiple hosts.

You can create any of one these event types to get started.

Charging Bookings through Calendly

Also you can even charge for your bookings through Calendly, you can integrate either Stripe or PayPal as Payment Gateways for your calendar. To do this, click the Collect Payments menu once you edit the event and select your preferred payment gateway from their list. You will then be guided through the setup process. Please note that this is a premium feature available on the Calendly Professional plan.

How to Embed Calendly on Your Gridbox One Page Website?

Once you have created your calendar and customized it to your preferences, you’ll need to then display it on your one page website so your clients can start booking through it. This is done through an embed that you can add to your page.

There are three different ways to embed a Calendly to your website

  1. Simple link
  2. Inline
  3. Popup Text
  4. Popup Widget

To simply link a Calendly Page

  1. Login to your Gridbox Account
  2. Start with blank site or use an existing one page website template
  3. Click on Add Block
  4. Under Basic -> Drag and Drop link button
  5. Click on the Setting Icon
  6. This will open the panel on the left
  7. Click on Properties
  8. Under Link Type -> Choose URL
  9. Now copy the Calendly link and paste it here
  10. You’re done

To Embed Calendly your Gridbox site - do the following steps

  1. Login to your Gridbox Account
  2. Start with blank site or use an existing one page website template
  3. Click on Add Block
  4. Under Embed Code
  5. Drag and Drop the Embed block to anywhere on the canvas

Now go to your Calendly Dashboard

calendly-embed.jpg

  1. From the Event you created
  2. Click on the Share button
  3. Under Add to Site Tab
  4. You can pick any three of these options (Inline Embed / Popup Widget / Popup Text)
  5. Click on continue
  6. Copy the Embed Code
  7. And paste it on the Embed Code in your Gridbox Builder
  8. Click on Save
  9. Now you can click on the Preview tab to see the changes.
  10. You’re done.

  1. Getting Started with Calendly
  2. Embed options overview

Hope you find this tutorial useful. If you’ve any questions please feel free to use the contact us page.