There is an updated version available of this page

Tutorial: Integrate a schedule into your site

Once you are happy with the way your appointment schedule looks and you have tried it out to ensure that it behaves as expected for someone visiting your schedule, you are ready to reveal it to the wider world.

There are several options to get people to your schedule:

  1. Put a link or button on your own site to your SuperSaaS appointment schedule. This is the easiest option, and the one most people choose.
  2. Embed the SuperSaaS page inside a frame on your own site. This option can be used if you want to add your own header and footer on the page.
  3. Send the link to your users in an email, put it on Facebook, Twitter, or in a printed handout. You don’t even need to have a website for people to find your appointment book.

This tutorial can display code snippets relevant to your account if you log in as administrator.

Link to SuperSaaS from your own site

You can find out the correct link to your schedule under the overview tab when you click the ‘Configure’ button. If you own a website then you are probably familiar with placing a link on your site. If someone else built your site then they should be able to tell you how to do this.

You can use a simple HTML link like this: Book Now!

<a href="">Book Now!</a>

You can also use a “Book Now” button like this one:  Book now!

<a href="">
<img src="//" alt="Book now!"/></a>

Feel free to copy one of these example buttons for use on your own site:

Book now Book now! Make a booking now Make an appointment Make an appointment! Reserve now! Make a reservation   more…

Each appointment calendar has its own web address (“URL”), so if you create multiple schedules then you can give your users a choice by listing several links on your site.

If your site has a registration system for your users then you can set it up so they are automatically logged into your schedule without the need to create a separate account on SuperSaaS. This requires an interface between SuperSaaS and your server. The easiest way to do this is to pass the user’s information along when he clicks on the book now button, creating or updating the user’s information on SuperSaaS as needed. We provide free plugins to create such a button automatically for several content management systems:

If you use another system and are up to the task of programming such an interface yourself you can find details in the programmer’s reference.

If you don’t want people to see “supersaas” in the address bar of their browser then you can mask it by putting it inside a frame as explained next. Alternatively, you can create a custom domain name to point to your schedule. Configuring your own domain requires a little bit of technical proficiency, details can be found in the custom URL tutorial. A custom domain has the added advantage that if a visitor enters it without the full URL the system will still be able to find it and redirect to your schedule. The custom domain name will also be used in outgoing emails.

Integration with iframe

Putting SuperSaaS inside a frame

If you need more control over the layout of the page then the customization options allow, then you could put your schedule inside a frame on your own site. For example, you may want to add a menu bar alongside the schedule with buttons to other parts of your site. The ‘Layout Settings’ page has an option to switch off the header and footer so you can replace them with your own. This code would display a schedule inside a frame on your site:

<iframe width="600" src=""></iframe>

If you want to display a more compact version of your schedule to make it fit better fit inside a frame you could consider using the handheld version of the site. You can access the mobile version of the site by replacing the domain name with in the web address of your schedule, like this:

<iframe width="300" src=""></iframe>

If you’re using an iframe and you’ve configured your schedule to redirect people back to your site after booking then you may need to add a way to “escape” from the iframe. The landing page on your site will appear inside the frame on your site upon return, which looks broken unless you’ve specially designed that landing page to fit in the frame. One way to escape from an iframe is by adding a piece of JavaScript inside the <body> tag of the page that your users will land on when they return, such as the following:

<script>if (window != top) top.location.href = location.href</script>

Other ways for people to find your schedule

We do not submit your schedule to search engines (as explained here), so people will only find your schedule if they know the link. If you don’t have a website you can use the schedule by itself. For example, you can email the link to a group of people, perhaps to plan car pool dates. Twitter, Facebook or blogging sites are all popular places to share links. See the instructions on how to add a schedule to Facebook to add it in such a way that it remains on your Facebook page permanently. If your company has off-line marketing materials such as brochures then that could be a good place to put the link as well.

Preselecting a date or view

By default the calendar opens on today’s date and your default view. If you set a start date on the “Opening Hours” page then the system will open on that date if it’s not already passed. You can also make a link jump to a specific date by adding the date to the web address. For example, to let guests reserve for a Christmas party you could put something like the following on your site:

<a href="">Make an appointment</a>

The white space above the calendar can also hold links. This is useful if you have more than one schedule and want to let people jump between them. On the configuration page, “Layout” tab, you can paste the links in the box labeled “Message to show in the white space above the schedule”. The default view that your users see, for example “day” view or “week” view, can also be altered with a URL parameter:

Click here to jump to the “Meeting Rooms” demo, zoomed into “Room 1” with the month view preselected

To make pages with a list, such as the “available times” page, more compact (or longer) there is a "per_page" parameter that will work on pages with lists: