This tutorial comes in two parts: the first briefly covers signing up to Calendly, and the second will show you how to add Calendly to your website. If you already have a Calendly account you can skip down to part 2.
It’s important to note that this tutorial won’t cover the general Calendly setup such as managing your schedule. Calendly has many great tutorials that will help you get started the right way.
Part 1: Creating a Calendly account
Before we can add booking functionality to your website we must first sign up for Calendly.
Step 1: Sign up at calendly.com
In a browser window head to https://calendly.com/
Then click on ‘Sign Up’ button in the top-right corner of the screen.
Step 2: Register for Calendly
Pop your details into the signup form and proceed with the registration.
If your email address is a GMail account then it will ask you if you’d like to login with your Google account. This is entirely up to you and makes no difference to the setup process.
Once you’ve provided your email and chosen your password you’ll be asked to confirm your email address by clicking a link they will send to your inbox. Give it a minute and check your inbox, then confirm your email address.
Step 3: Choose a Caledly URL
As we will be embedding Calendly into your website this part isn’t as important as it may appear. That said, there may be times where you want to send someone to your Calendly page so try to create an address that is simple and makes sense. Try either your business name or your personal name.
Continue through the setup and add your calendar and availabilty. If you’d prefer you can also skip these steps and do them later.
Step 4: Select an event
When you sign up to Calendly you will have 3 default ‘events’. Generally we will only want to add one of these to your website. Decide which one is the best fit for you, either the 15 minute meeting, 30 minute meeting or the 60 minute meeting. Don’t worry if none of them are suitable – for example, if you want a 10 minute or 90 minute event – you can change the exact timing in a moment.
Once you’ve chosen one event to edit you can go ahead and change any options you like. Click into the event and begin working your way through the various options.
You may want to change the event name to ‘Discovery Call’ or ‘Introductory Session’, set a location, or customise the reminder email your prospects will recieve.
If you will conducting your calls via Zoom you have the option to link your Zoom account to Calendly to streamline the process, however this may be a premum feature. Another way to provide Zoom details is to set the location as ‘Custom’ and then in the description field provide further details and your Zoom room ID.
Work your way through the options until you are happy with how the event is set up. Be sure that the event is active by checking that the event type toggle switch is ‘on’ in the top-right of the screen.
Part 2: Adding Calendly to your website
Now that you’ve got your Calendly account and event set up we can proceed to add it to your website.
If our team are building your website for you then you may only need to go through step 1. You can then email us your embed code and we’ll do the rest for you.
Step 1: Copy Calendly event embed code
In your Calendly dashboard click on the gear icon for the event you have set up.
Next click on ‘Add to Website’…
then ‘Inline Embed’ to get your embed code.
Now click on the ‘Copy Code’ button.
Keep this page open just in case you copy some other text before you paste the code into your site. If you do, simply come back to this page and copy the code again.
Step 2: Log in to your website site
Go to your website and log in to the admin area.
Step 3: Create your ‘book a call’ page
If you don’t already have a ‘book a call’ page you should create one now. If your website already has a contact page you may wish to duplicate this, otherwise just create a new one.
For this tutorial we’ll be replacing the contact form on our contact page.
Step 3: Paste your Calendly embed code into the page
We’re using the Divi theme for this tutorial so we will remove the contact form and replace it with a code module.
We will then paste our Calendly embed code into this module.
Note: When you paste the text into the code module it will appear as though nothing has happened. Divi doesn’t rended your Calendly code whilst editing the page and it will only be visible once you exit the Visual Builder.
Step 4: Save your changes
Once you are done save your changes and stop editing. Now, when you view the page, you should see your Calendly calendar ready to be put to use.