Help Centre

Support > Designing and Building Your Website > Adding Your Content

How To Add Calendly To Your Website

Calendly Booking Automation Calendar Plugin

If you are running events or sessions that people have to book in for, it can take a lot of back-and-forth with your customers to organise a time that is convenient and book it in for them. This can be avoided by adding a plugin called
Calendly to your website. 

What is Calendly?

Calendly is a simple solution for automating bookings on your website. Their plugin allows your users to browse through a calendar of selected dates and see your availability across them so that they can book in at a time that is ideal for both them and you.

The plugin cleverly works with your own online schedule. If you are using an app like Google Calendar already, Calendly will assess what you have booked in on any given day and make sure that no appointments made through their system collide with anything else. 

Setting up the calendar is easy through Create and Calendly even has a free option available for this integration. This guide will show you how to add their plugin to your website:

How to set up a Calendly account

You will need to have set up an online calendar for scheduling your events. We recommend using Google Calendar

  1. Create an account with Calendly.

  2. Create your Calendly URL. We recommend using your business name.

  3. Select your online calendar from the list of options available. We recommend using Google Calendar.

  4. Grant permission for Calendly to access your calendar.

  5. Choose the days and times that you are available for bookings.

  6. Select your role from Calendly’s list.

How to set up Calendly Events

Calendly Dashboard

When you access your account for the first time, you will see that there are three default events already in your dashboard. One for 15-minute bookings, one for 30-minute bookings and one for 60-minute bookings. If any of these formats work for you, they can be edited to your preferences by clicking the cog icon in the top right of each event and selecting “Edit” from the drop-down list. 

You can also create your own format by clicking “New Event Type” above your default events on the right-hand side. Simply follow the steps they provide to create your own event. 

If you would like to charge for your bookings through Calendly, you can integrate either Stripe or PayPal as Payment Gateways for your calendar. To do this, click the “Integrations” tab from the top menu 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 Pro package. 

Most importantly, in your event settings, you are provided the options to add a Cancellation Policy, Reminders and a Confirmation Page. It is worthwhile personalising these sections before activating the calendar on your site so the whole process is consistent with your branding and ensures your cancellation process is clear to your customer.

How to get a Calendly embed code

  1. Click the cog icon in the top-right of your preferred event format from your Calendly dashboard.

  2. Select “Add to Website”.

  3. Choose the “Inline Embed” option and click “Continue”.

  4. Customise your colour settings to match your website’s colours.

  5. Click “Copy Code”.

Get the Calendly Embed Code

How to add the Calendly code to your Create site

  1. Log in to your Create Account.

  2. Select "Content" on the Top Menu.

  3. Click "HTML fragments" from the left-hand menu.

  4. Click on the "New HTML Fragment" button at the top of the screen.

  5. Give the HTML Fragment a description for reference (e.g. Knitting Tutorial).

  6. Paste your HTML code into the large "HTML Code" box.

  7. In the “Type” section, select the “manual” option.

  8. Click “Add HTML Fragment”.

How to add your calendar to a page.

Adding an HTML Fragment to your page

  1. Select “Content” on the Top Menu.

  2. Find the page you’d like to add your calendar to and click “Edit This Page” (pencil icon).

  3. Select “Add Block” in the bottom-left of the page (+ icon).

  4. Select “Custom” from the drop-down box and select the “Custom Single Element”. Choose the largest Custom Single Element from the bottom of the list.

  5. Move your cursor over the Custom Element Placeholder and click “Add Custom Element”.

  6. Select “HTML Fragment” from the drop-down box and click “Done”.

  7. Move your cursor over the HTML Fragment and click “Settings”.

  8. Choose the HTML Fragment you made from the drop-down box and click “Done”.

  9. Save your changes and publish your site

More Questions?

If you have any further questions, please get in touch and we will be happy to help.

Get in Touch