You would like to offer Click and Meet to your visitors? Or do you offer services that require a fixed time slot per customer? You can schedule such appointments by integrating an external booking tool into your website.
Skip to:
- Set up the booking tool
- Embed the booking tool in your website
- Integrate the booking tool via a button element
Set up the booking tool
It's up to you to decide which booking tool you would like to use. If you would like to embed the booking tool directly in your website, be sure that the booking tool provides an HTML code that can be used to embed the tool. If that's not the case or if you would prefer not to handle code snippets, you can integrate the tool via a button element but it will then be opened in a new tab and won't be embedded directly in your website.
Info
We recommend to use the booking tool Calendly. It supports both of the above options and provides basic functionalities within a free plan.Once you've made your choice, you'll need to set up the booking tool according to your needs. The following aspects might be relevant when doing so:
- Create an account (if required)
- Connect your private calendar with the booking tool (if desired)
- Set up your business hours
- Set up the different events you are offering: come up with a short description, determine the data your visitors need to provide when booking a time slot, and define the duration of the event.
- Customize the tool (if possible)
Info
If you have the chance to determine your booking tool URL or customize the layout of the tool, be sure to reflect your business, for example by including your business name in the URL or by using your brand colors. Especially if the booking tool will be opened in a new tab, this will help your visitors to build trust.
Most likely your selected booking tool provides help articles to support you with these steps. If you are using Calendly, you'll find several articles in their Help Center.
Note
After you have decided for a booking tool and determined the data your customers need to provide in order to schedule an appointment, you might want to update your privacy policy accordingly.Embed the booking tool in your website
If you would like to display the booking tool as part of your website, you can embed its HTML code with the content element Custom HTML. This is how:
- In the sidebar of your cockpit, select Editor.
- You will see a list of your pages in the sidebar of your Editor under Pages > Content pages. Select the page on which you would like to embed the booking tool or add a new one. A preview of the page will now be shown on the right-hand side.
- In the sidebar of the Editor, select Content elements.
- Select HTML.
- Drag and drop the content element Custom HTML into the preview of the page. You can only drop content elements into the blue areas of a page.
- Select Add HTML.
- Enter the HTML code provided by your booking tool of choice.
Info
The required steps to get the HTML code depend on your selected tool. If you are using Calendly, you'll find more information in their Embed options overview article. - Select Save.
The booking tool is now embedded in your website and visitors can schedule an appointment without leaving your website.
Note
For some booking tools, for example Calendly, after having embedded the tool you might only see a blank space in your Editor instead of the booking tool user interface. This is due to the fact that scripts in Custom HTML are not loaded in the Editor for security reasons. This doesn't necessarily mean that the HTML code is not working properly or that your visitors will also see a blank space on your website. If you would like to check if the booking tool is correctly displayed on your website, select View your website (if your website is live) or Preview your website (if your website is not live yet) in the top bar of your cockpit. You will then see the respective page on your website and can verify that the booking tool is properly embedded and displayed. Please be aware, that the booking tool can only be displayed if you accept all cookies in the cookie notice (see the note below for more information).Note
The booking tool user interface will only be visible to visitors on your website if they accept all cookies in the cookie notice. Otherwise, the scripts included in the HTML code of the booking tool cannot be loaded and your customers will only see a blank space. Optionally, you could make your visitors aware of that by adding a short text above the booking tool. This text could also include a link to your cookie policy page which your visitors can access at any time in order to change the cookie settings they have determined via the cookie notice.Integrate the booking tool via a button element
If you would like to offer the possibility to schedule appointments but do not want to directly embed the booking tool in your website, you can integrate it via a button element. This element can be easily added, without the need to handle HTML code. If visitors select the button element, the booking tool page will be opened in a new tab and visitors can book their desired time slot.
There are two ways to implement such a button element on your website - on an image or within text.
On an image
You can add the link to your booking tool as a Call-To-Action (CTA) on an image. To do so, follow the steps of the Links and buttons section in our article Place Call-To-Actions on images. When doing so, be sure to add the link to your booking tool in the input field Link. That way, the booking tool page will be opened in a new tab when visitors select the button.
Info
If you are unsure which link you should add, the Help Center of your booking tool of choice will most likely provide you with an article on that. If you are using Calendly, the section To share your link from the Calendly website will help you out.Within text
You can add the link to your booking tool within a Text content element. Here's how:
- In the sidebar of your cockpit, select Editor.
- You will see a list of your pages in the sidebar of your Editor under Pages > Content pages. Select the page to which you would like to add the button element or add a new one. A preview of the page will now be shown on the right-hand side.
- In the sidebar of the Editor, select Content elements.
- Select Text.
- Drag and drop your desired Text content element into the preview of the page. You can only drop content elements into the blue areas of a page.
- Select Type here... and enter the text that should be displayed on the button, for example Schedule appointment.
- Mark the text and select .
- Enter the link to your booking tool in the field Paste or type a link.
Info
If you are unsure which link you should add, the Help Center of your booking tool of choice will most likely provide you with an article on that. If you are using Calendly, the section To share your link from the Calendly website will help you out. - Select .
The text is now automatically moved to its own line and styled as a button. If your visitors select that button, the booking tool page will be opened in a new tab and visitors can schedule an appointment.