fbpx

How to add a free ‘book online’ calendar to your WordPress website (part 2)

by | business, online tools & resources, web design

I recently shared a post about Calendly, one of my favourite time-saving business tools.

I use it on my own website and if you’re a service-based business-owner, I guarantee it will save you endless rounds of email ping pong with your clients. Note: I don’t have an affiliate link to share, this is just a quick and simple system that makes my life so much easier!

If you’d like to consider alternative options before taking the plunge, there are a few out there but Calendly and Acuity Scheduling are the ones I generally recommend to my clients.

Right, let’s dive back into Calendly.

HOw to add a free. book online calendar to your WordPress Website video tutorial
If you followed the step-by-step guide in my last post, you will now have set up your Calendly account and created an event that people can book on to. I briefly touched on sharing your Calendly link via social media or email but in today’s blog post I am going to walk you through three straightforward ways to embed Calendly on your website so that your existing or prospective clients can book an appointment directly through your own site (hint – there are no additional plugins involved).

How to add your booking calendar to your website

Click to watch the video (14 mins) for my step-by-step guide or if you prefer to read through them, I have outlined the three options for you below 👇 :

Option 1: Create a scheduling page with an inline calendar

  1. Login to your Calendly account and click on the event you created.
  2. Click ‘Share’ and then ‘Add to website’.
  3. Create a new page on your website.
  4. Return to Calendly, select ‘Embed inline’ from the sharing options and hit ‘Continue’. You’ll be presented with some customisation options (although these are limited if you’re on the free plan) as well as some code on the right-hand side.
  5. If you already have a pop-up cookie policy on your site (and if you haven’t then you should!) then select ‘Hide GDPR banner’ and amend your site’s existing GDPR policy to include that your client’s data may be stored and processed via Calendly.
  6. Colour customisation – this option is only available to you if you have a Pro account and enables you to select your calendar colours from a spectrum or by entering your brand hex codes (tip: if you don’t know these check your brand style guide or ask your logo/brand designer).
  7. Once you have finished reviewing the options and customising your form, click ‘Copy code’ – this will copy the code of your customised form to your clipboard.
  8. Head over to your new website page. Using the Gutenberg block editor to add a custom HTML block (or code module if you’re using the Divi or Elementor site builders) and paste the code copied from Calendly directly into the block and click ‘Update’. Your customised inline widget should now appear within your site page. 

    Option 2: Create a floating widget button that opens a popup to your site

    1. Login to your Calendly account and click on the event you created.

    2. Click ‘Share’ and then ‘Add to website’

    3. Create a new page on your website.

    4. Return to Calendly, select ‘Widget popup’ from the ‘Add to website’ menu and then click ‘Continue’.

    5. Follow the same steps as above to customise your page settings (e.g. GDPR policy and personalised colours etc.).

    6. Enter the call-to-action you want to display on the button that links to the Calendly popup on your website (e.g. ‘Book a free consultation’) and customise its colour.

    7. Once you have finished reviewing the options and customising your form, click ‘Copy code’ – this will copy the code of your customised widget popup to your clipboard.

    8. Using the Gutenberg block editor add a custom HTML block (or code module if you’re using the Divi or Elementor site builders) and paste the code copied from Calendly directly into the block and click ‘Update’.

    9. Click on the new button and check that it brings up your customised widget popup.

    Option 3: Add a text link that opens a popup to your site

    1. Login to your Calendly account and click on the event you created.
    2. Click ‘Share’ and then ‘Add to website’.
    3. Create a new page on your website.
    4. Return to Calendly, select ‘Text popup’ from the ‘Add to website’ menu and then click ‘Continue’.
    5. Follow the same steps as above to customise your page settings (e.g. GDPR policy and personalised colours etc.).
    6. Enter the inline text you want to link to the Calendly popup on your website (e.g. ‘Schedule a call’)
    7. Once you have finished reviewing the options and customising your form, click ‘Copy code’ – this will copy the code of your customised widget popup to your clipboard.
    8. Using the Gutenberg block editor add a custom HTML block (or code module if you’re using the Divi or Elementor site builders) and paste the code copied from Calendly directly into the block and click ‘Update’.
    9. Click on the inline text link you have created and check that it brings up your customised widget popup.

    And there you have it. A slick but simple booking system for your WordPress website that enables your clients to book appointments with you even when you’re not at your desk. I couldn’t imagine running my business without it now.

    Have a Squarespace or Wix website instead? Head over to the Calendly website for handy guides on integrating the application with various other platform providers.

    If you have any questions or need help implementing this on your own site, send me an email to hello@sm-webdesigns.co.uk or if you have a list of things you have been meaning to update on your site, why not book a Website Intensive with me so I can do it all for you and embed Calendly at the same time 😊 > Find out more about a Website Intensive.

    Sarah x