Maxime Maxime Jul 12, 2022 4 min read

Integrate appointment scheduling in your site using a widget

Scheduling an appointment directly on your website is now even more streamlined

Integrate appointment scheduling in your site using a widget

We now offer a new way to integrate appointment scheduling into your site with something we call the “SuperSaaS widget”. This widget minimizes the steps that your users have to take to book an appointment with you, so you can effortlessly convert online visitors to actual customers. In fact, to your users, the widget appears as part of your site, and in most cases they can complete the entire booking process without leaving your site. In order to make any changes to or cancel the appointment, users can click the link in their email confirmation or visit your schedule via the schedule link.

Continue reading this blog to learn more about our new widget, why we encourage you to try if it fits your needs, and what putting a booking widget on your website could mean for your business.

Why do we offer a widget?

It has always been possible to integrate SuperSaaS into your site using a so-called “iframe”. However, that approach is becoming more and more outdated and no longer works very well: modern browsers block cookies inside iframes and show popups that ask for permission. This leads to a suboptimal user experience, which may deter your customers from booking an appointment with you.

On top of that, it’s tricky to make iframes “responsive”, i.e. look right on mobile, tablet and desktop. Once you have perfected your schedule for desktop view, you may find that it cannot be rendered in a workable way on a mobile phone, and when your schedule finally looks great on mobile, something does not line up on desktop. As online booking becomes the norm and the demand for simple and effective booking processes high, an optimized booking software integration could be exactly how you turn an entire group of users into valued customers.

While it is still possible to simply redirect users to your SuperSaaS schedule using a “Book now” button, you may like to keep them on your site. For the purpose of speeding up the booking process, it may simply be preferable to just let someone pick a spot instead of sending them over to SuperSaaS.

To start using our widget now, instructions on how to set it up and customize have now been added into our Widget Integration documentation.

Widget Builder

While customizing, you can see a preview of the widget with the settings you selected

What are the benefits of using a widget?

As we already mentioned, our new widget steers clear of the growing list of limitations imposed on iframes. But there are more benefits to using a widget (some of which we have already briefly touched upon):

It looks like it is part of your site

When you explore the features of our widget, you will notice that there is an example of the widget on the right side of the screen, that displays what your widget would look like with the options that you selected. At this point, you have already set up your schedule and have likely adjusted the layout to match your aesthetic. You may notice that the widget adopts some of those layout features that you have selected for your schedule, matching its color scheme, font size, etc. Once you integrate the widget into your website, it will look like part of your website.

Users can stay on your site for the entire process, unless they need to be redirected to a payment provider

With the widget, customers can now stay on your website during the entire booking process – unless they need to be redirected to a payment provider to complete their payment. This removes the need to send them over to your SuperSaaS schedule, so you can keep them on your own website, keeping the look and feel consistent.

It looks and works identical on desktop / mobile / tablet

While its tricky to get an iframe to look right on all devices, the widget should look and work almost identical on desktop, mobile and laptop. If a customer wants to book an appointment with you on desktop one day, but on mobile the week after, the interface will feel familiar and they should have no problem quickly booking their next appointment.

It does not use cookies, so those cannot get blocked or get lost, and no need to ask for permission

With increased restrictions on cookies in recent years, iframes are more likely to malfunction or stop working altogether. When you rely on an online booking software to take care of your appointment scheduling needs, you could quickly lose customers if they cannot make a reservation. The widget does not use cookies that might get blocked or lost, so you can rest easy knowing that your customers can book an appointment whenever they want to.

Customizing the widget

The widget features some of the same customization options from your schedule, but also offers several new ways of customizing and representing your schedule. For example, at present you can choose between three widget types. These three available options will be optimized to your schedule type.

If you are using a capacity schedule you can select the “Cards” widget, which can show a list of classes (with pictures):

Widget Cards

Select the “Cards” option to change the preview and update the JavaScript snippet for your widget.

The “Calendar” view for resource schedules now highlights any remaining availability for each day of the month.

We aim to expand these options even further over the next year.

It’s for creating a booking only, not for modifying existing appointments

We’ve built the widget to streamline the booking process to its essence: allow customers to book their appointment with you. That is to say, there is no option to change or delete appointments. It does offer the option to create a user account, buy credit or fill out forms, if any of those things are part of your booking process. But to make changes or delete an appointment the user needs to use your “full” SuperSaaS schedule. A link to your schedule is automatically included in the confirmation mail. You can refine that by adding a direct link to cancel or modify a booking, which contains a special code that means they do not need to log in.

How to try out the widget

If you do not have an account yet or you would simply like to try our widget, you can play around with a few different widget types on the demo page.

The widget is fully compatible with all existing schedules and once you are logged in, you can experiment with it on the widget integration page. The page also shows a small piece of JavaScript code that updates as you select your preferred widget options. You can copy that to your site once you are happy with how it looks.