How To Set Up an Appointment System On The Website Step By Step

I meet many retailers who would like to encourage consumers to shop more by appointment. And I think that’s a good idea. Nowadays, customers first look online for inspiration before coming to the physical store. So by making an appointment, the customer makes a small commitment to come by for a purchase or a service.

Therefore, in this article we look at the possibilities to make appointments online. How do you install the system on the website and what is the best method?

• Create a free account
• Choose the right option to make appointments
• Standard button (with a pop-up)
• Floating button
• Directly on the website (with an Iframe)
• Place code on your website
• Tips: Where to show it on your website



It is important for a retail store to have an appointment system available for your customers. An appointment system can help increase the number of visitors and lead generation for the store.

A retail store should use a scheduling software to set up an appointment system. Both platforms allow you to book appointments online and confirm them without leaving your computer. They also allow you to provide information about the services or products in your store.

The first step is to create a free account at one of the best systems available (you can check the recommendations in the blogpost through the link). For this you only need an email address and a password. In the next steps we will use our recommendation as an example to make appointments through your website.

For this research we looked at all the features a physical store or service provider needs to make appointments a success. For example, unlimited number of appointments and types. It should also be user-friendly on mobile and you should be able to customize colors and fonts.

Furthermore, you have to set opening hours and availability. In addition, the customer should be able to reschedule or cancel the appointment. Last but not least, the schedule has to be automatically synchronised with your calendar and the customer should get a confirmation by email or text message.

So after you have created your account at the scheduling software, there are a few options to let people make a reservation. Normally, you should have your own domain to make appointments on the website. However, there is also an option just share a direct link from you account. In that way you don’t need to have a website or technical skills to edit it. Just click in your dashboard on the ‘Link icon’ . A new tab will open which you can share directly with your customers.

A standard button is great if you like to add the reservation tool on a product page or prominent on the homepage or in the footer. For this the easiest option is to add the link from your account to the button (see above).

However, in this way the customer leaves the website to make the appointment. Therefore, it is also possible to add pop-up to the button which will open on your website. This is a great feature that is also available with the free account.

I would like to show you how to get this code. You can share this with your web designer or place it on the website yourself.

Step 1: Go into your account

Step 2: Click above right on the gear icon and click on ‘Settings’

Step 3: Click in the menu at the left side on ‘Integrations’

Step 4: On this page you can change the colours and maybe some settings. Than scroll down to the bottom of the page.

Step 5: Copy the script in the white box below the page. This script you can send to your web developer.

A floating button is a button that is always visible on the screen. It floats when you scroll. Especially for landing pages this is a good way to generate more reservations. For example, if the main function of the website is to make appointments, this is probably a better option than the ‘standard button’.

The system has a great option for a floating button. Take the same steps as the ‘Standard button’ above. When you get on the Integrations page. Just select the option ‘Add Hovering ‘Book Now’ button on side of your website’ at step 1.

When you select the pop-up function (at step 2 above) the user can make appointments on the website directly. This creates a better shopping by appointment experience, because the customer is not leaving your world and is able to view other products or services.

However, if you don’t like pop-ups, there is also an option to show the calendar online. You can do this with a so called Iframe.

Step 1: click on ‘Integrations’ (after you click on the ‘gear icon’ -> ‘Settings’ as mentioned in previous steps).

Step 2: Click at the top on Iframe.

Step 3: Copy the code in the white box and share it with your web developer or place it on the website yourself.

Now that you know which code you would like to use, I will demonstrate below how you can display it on your website. I assume that you are using the WordPress system. Do you use another website builder that you can edit without coding? Then look for a widget called ‘HTML’ to paste the code into. Are you stuck? Then contact your web developer.

Step 1: Login on your website.

Step 2: Click in the menu at the left side on ‘Pages’ and click on ‘Edit’ at the page where you like to add the code.

Step 3: Scroll to the place where you like to place the code and click on the + icon to add another widget.

Step 4: Search for HTML

Step 5: Click on the widget ‘Custom HTML’. The widget will appear. Place in this box the ‘appointment code’.

Step 6: Publish the website to see the result.

The best way to show the appointments on your website is via a user-friendly, simple and easy-to-use interface. Some of these factors that we should consider before we finalize our appointments system on the website are: