Tutorial: Integrate a schedule into your site

Once you are happy with how your appointment schedule looks and you have tested it to ensure that it also works from your users’ point of view, you should decide how your users will find your schedule.

You have three options:

  1. Put a link on your own site to your SuperSaaS appointment schedule. This is the easiest option, and the one most people choose.
  2. Embed the SuperSaaS pages inside a frame on your own site. This option is only needed if you need more customization options than are available with the first option.
  3. E-mail the link to your users, or put it in a flyer. If you don’t have a web site you need another way for people to find your appointment book.

Link to SuperSaaS from your own site

If you own a web site then you, or the person that has built it for you, should have no problem placing a link to your SuperSaaS schedule on your site. You can find out the correct URL to your schedule by clicking the 'Configure' button, at the top of the page.

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

<a href="http://www.supersaas.com/schedule/demo/Therapist">Book Now!</a>

Or you can use a picture button like this one:   Book now!

<a href="http://www.supersaas.com/schedule/demo/Therapist">
<img src="http://cdn.supersaas.net/en/but/book_but.jpg" alt="Book now!"/></a>

If you want you can copy one of these example picture buttons for use on your own site:

Book now!   Make a reservation   Book now   more…

Each appointment calendar has its own URL, so if you create multiple schedules then you can give your users a choice by listing several URLs on your site.

If your site has a registration and login 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. One way to do this is to create 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 ready-made 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.

Pre-selecting a Date or View

By default the calendar is displayed at today's date, and your default view. But if you want users to sign up for a specific date you can also change the link to show the calendar for that day by simply navigating there with your browser and copying the URL from your browser window. For example, to let guests reserve for a Christmas party you could put something like the following on your site:

<a href="http://supersaas.com/schedule/demo/Christmas?day=24&month=12&year=2012">Make an appointment</a>

You can also put links in the white space above the calendar. This is useful if you have more than one schedule so users can easily 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". In general you can simply copy the link in your browser bar to ensure the schedule looks the way you want it when your users land on it, for example:

Click here to jump to the "Meeting Rooms" demo, zoomed into "Room 1" with the month view pre-selected [http://supersaas.com/schedule/demo/Meeting_Rooms/Meeting_Room_1?view=month]

You can also a create custom URL to point to your schedule so users don't need to realize they are not on your site. This requires some technical proficiency, details can be found in the custom URL tutorial. A custom domain has the added advantage that if a user enters it without the full URL the system will still be able to find and redirect to your schedule. The web address will also be used in outgoing e-mails. You can also mask the URL by putting it inside a frame as explained next.

Putting SuperSaaS inside a frame

If you need more control over the layout of the page then is currently provided then could run your schedule inside a frame. For example, you may want to add a menu bar above the schedule. Some web designers frown upon the use of frames because it presents some usability challenges. For example, it is not always evident to the user where he will go when he hits the 'Back' button on the browser. The "Layout Settings" page has an option to switch off the header and footer so you can replace them with your own. This ‘Layout Settings’ page can be found in the right hand menu on the dashboard. If you want to keep things more compact you could also display the handheld version of the site inside a frame. You access the handheld version of the site by using "m.supersaas.com" as the domain.

You can include code similar to this on your own site to get a small frame with a month calendar:
<iframe width="300px" src="http://m.supersaas.com/schedule/demo/Therapist"></iframe>

Other ways for users to find your schedule

As explained here we do not give your schedule to search engines, so people will only find your schedule if they know the link. If you don't have a web site you can also use SuperSaaS as a stand-alone system. If you use the system with a small user group, for example to plan car pool dates, then you can simply e-mail the link to them. If your company has other off-line marketing materials such as brochures then that could be a good place to put the link as well.

Pre-filling values for new bookings

This is advanced material that can safely be skipped

When you send the user to the SuperSaaS site you can send along values that will be pre-filled in the dialog for new bookings. One use is to create a list of links on your site that provides sensible default values for the user. This is easiest explained by examining the example links below:

Click here to jump to the "Therapist" demo with "Long treatment" pre-selected
[http://supersaas.com/schedule/demo/Therapist?res[field_2_r]=long]
Click here to jump to the "Therapist" demo with "Intro session" pre-selected and the description pre-filled
[http://supersaas.com/schedule/demo/Therapist?res[field_2_r]=intro&res[description]=Hello+there]

Another use is of pre-filling is sending information that the user has already filled out on your own site. By pre-filling an address, for example, you save the user from typing it in twice. However, this requires that you create the link dynamically on your site, a subject beyond the scope of this tutorial.

The pre-fill parameters take the form res[xxx]=yyy, where xxx is the field label and yyy the value. Note that these parameters need to be URI encoded to become valid HTML links, so inside a link that would be res%5Bxxx%5D=yyy. Field labels should not be capitalized or translated. There are too many possible field labels to list them all here and the allowable values depend on how your schedule is configured. To find out which field labels are valid in your schedule you can look at what the browser is doing with a program such as Firebug, or by looking at the page source.


Next chapter: Add payment options | Back to Tutorial index