There is an updated version available of this page

Tutorial: Change the Layout

This section is logically divided in two sections: Settings that are relevant for your entire account, such as the time zone and date format, and settings that determine what an individual schedule looks like, such as the color of an appointment.

Layout Settings

Account-wide layout settings

The page to change account-wide layout settings can be found by going to the dashboard page and clicking “Layout Settings” in the right-hand menu.

In the first section you can choose a term to be used instead of ‘user’. For instance if you select “student” then every dialog box, help page, email or error message will refer to your users as students. If you choose the custom option then enter a term in singular form. It will automatically convert to plural where appropriate. It knows about most English plurals but it is not perfect and will probably fail for foreign words, so you can overwrite the default pluralization by entering the custom term as “singular,plural”.

The ‘Regional options’ section is mostly self-explanatory. The time zone is important to get right because it determines when reminder and follow-up emails get sent. It is also used if you set a configuration option such as “don’t book less than 2 days in advance” in the process workflow. The default setting is based on your country, but this may not be accurate for countries with multiple time zones. The system automatically calculates Daylight Saving Time for your region. If you have a multinational audience you can allow people to pick there own language instead of the default that you select. You can also let people pick their own time zone, in which case your time and their time will both be displayed on the screen and in confirmation emails. To learn more about setting up multiple time zones please follow the link.

In the “Appearance” section you can change the font size and the colors that are used for text, headings, background and several other things. The normal font size on the site is 11 points. SuperSaaS has been optimized for the normal size but the default setting may be too small for the elderly or visually impaired. The system will scale most visual elements with the base font size you choose but in older browsers this will not always be pixel perfect, especially at the higher zoom levels, so several elements are kept at a fixed size to avoid looking messy. By clicking the colored rectangles a color picker pops up where you can select a color or enter a six-digit HTML color code.

In the header and footer section you can upload a logo to replace the standard SuperSaaS logo that appears on every page. It can be in ‘gif’, ‘jpg’ or ‘png’ format and have a maximum size of 70 KB. It will be placed 12 pixels from the top, with the left edge at 15% of the screen width and with transparency preserved. You can also provide a web address where people will go if they click your logo. People will also be sent to this address if they click the log out link while they are logged in on your appointment scheduling calendar. You can also choose to hide the logo and footer altogether by selecting the appropriate option. This is especially useful if you want to run SuperSaaS inside a frame on another website. More information on this is in the chapter on ‘integrating a schedule into your site’.

The ‘From:’ address in outgoing email messages can be changed to your own address. To comply with internet standards, which aim to prevent spam, a ‘Resent-From: SuperSaaS’ header will still be added, but this is not normally visible to the recipient. Any links mentioned in email messages still contain ‘’ unless you set up a custom domain and link it to your account. The advanced section provides a link to a page set up a custom web address and an option to change the little graphic in the browser bar of some browsers, called the favicon. More information is in the custom domain tutorial.

When someone clicks the ‘help’ link in the far top right corner of the screen the page will show help information appropriate to the page he was on. If you enter anything in the ‘Contact Information’ then this will be shown at the top of every help page. You can put HTML formatting in this box, for example to insert a picture with a web accessible link. The text will be parsed to ensure it is valid HTML and incorrect tags will get stripped out.

If you choose to automatically send a message to new users then the bottom text box allows you to customize this email message. This is sent in plain text, so do not use HTML. You can select whether new users should receive a sign-up email on the ‘Access Control’ page as explained here.

Configure Layout

Schedule specific layout settings

By clicking the blue ‘Configure’ button on your schedule and then selecting the ‘Layout’ tab you can change the schedule specific layout. This page will look slightly different depending on whether you have a ‘resource‘, a ‘capacity’ or a ‘service’ type schedule.

First you can set the size of the schedule. Horizontally the calendar will automatically scale to fit the size available. You can try this by dragging on the bottom right corner to resize your browser window, the calendar view will update accordingly. (If you run SuperSaaS inside a frame on another website it will scale to fit that frame.)

The vertical size is not automatically fitted to the browser window; instead it will be as high as you want it to be. A scroll bar will appear in case it doesn’t fit inside the window. For ‘Week view’ or ‘Day view’ two components determine the height: how many hours are visible, and the size of one hour. Increasing the vertical size of the calendar can make it look much less cluttered if you have a lot of small appointments, say 15 minutes each. On the other hand, if you only have one appointment per day a larger scale will look better.

Appointment Outside Visible Hours

Note that the visible beginning and ending hour can be set differently from the opening hours. Typically you will set the visible hours such that all open hours are available, but you don’t have to. For instance, if meeting rooms are typically used 9 to 5, but sometimes they get used very early or very late you don’t want to waste screen space with all those mostly empty hours. Simply show the 9 to 5 schedule and if an appointment does get entered outside those hours the visible hours will automatically change for just that week to be able to show all entered bookings. In ‘Month view’ the vertical size does not scale if appointments are made outside the visible hours, since that would look messy, but it will notify you of appointments that are made outside visible hours by showing ‘1 not visible’.

The ‘Colors’ section provides a link to a page where you can change the color scheme used for the calendar. The color options on the page depend on the schedule type. For a capacity schedule there is a default slot color. You can change it for each individual slot by clicking the colored square in the bottom right while creating or editing a slot. The ‘Full slot’ color is a graphic that gets overlaid on slots that have no more capacity and the ownership indicator is a graphic that appears on slots to indicate to people for which slots they are signed up.

For a resource schedule the color of an appointment shows which resource it belongs to. It also allows you to set the ‘Ownership indicator’, this is a graphic overlaid on appointments to indicate to people which appointments belong to them. If your appointments are fixed length and fixed size, the system can helpfully draw ‘ghosted’ cells on the calendar to make selection easier. You have a choice of what these empty cells should look like. To get an idea of what these ‘ghost’ cells look like see this demo. If you have more than one resource then on the color selection page you can also decide what kind of widget you want to use to zoom in to a specific color, a drop down menu or a color legend.

The third section determines which fields show up in lists, such as the agenda view. Only the fields that can actually be filled out are listed here. You can add additional fields on the ‘Process’ tab.

The next section determines the default view, the view someone sees when first entering your schedule. The available views correspond to the light blue tabs on your schedule. You can click each tab in turn to choose the one you like best. Some of the views may not be appropriate for your schedule. If you use the schedule to rent vacation homes a week at a time then providing a ‘Day view’ may not make much sense, for example. So you can remove it by unchecking the box next to it. There is also a check box to hide the‘month navigator’, that is the small overview on the top right.

Custom Messages

The rest of the Layout page is filled with text boxes that allow you to customize the messages on various pages and emails. You can add HTML in these boxes, including graphics, but note that this only works if the graphics are available through a URL, i.e. not pictures stored locally on your computer. (You can upload a logo to our server, as shown in the previous section, and then use the URL to that picture if you want.) Note that emails are sent in plain text, so do not add HTML code there.

The message boxes also allow you to add JavaScript. You can use this to add advanced functionality to the page. By clicking the “HTML” button a popup appears where you can paste your code:

<form><input onclick="'//','Popup','width=400,height=300')" type="button" value="Pop-up" /></form>

You can also use this to add tracking code for Google Analytics so you can get extensive statistics on where your visitors are coming from. Or embed one the many free JavaScript gadgets that are available on the internet.

By default the email confirmation contains the following information:

Dear Name,

This message is confirmation that your reservation* was created.

Details of the new reservation*:

  …details of the appointment…

You can access the schedule at:

Please do not reply to this message, it was automatically generated and replies will not be read
* The term “reservation” can be changed on the “Resources” tab.

Dynamic messages with “Auto text”

This is advanced material that can safely be skipped

Email messages can be customized with “auto text”. Auto text strings are “magic” words that are automatically replaced by something else when the message is generated. The table below lists the magic words that you can use in email messages. Autotext (in combination with normal text) can be added to booking confirmations via the “Layout” tab (configure) or to registration confirmations via the “Access control” page.

Note that the field to adjust appointment confirmations controls all possible email confirmations, not just new booking confirmations. To customize the text for a specific confirmation you would need to use the $if conditional expression as explained below.

Auto text strings for Email messages
The word……will be replaced with
$nameThe name of the person to whom the mail is addressed, if available
$dearWrites out "Dear $name," unless $name is not known
$loginThe login name of the creator (blank if administrator or not logged in)
$subjectThe rest of this line will be used as the subject line of the email, it may contain other magic words
$urlA web address that will take the recipient to the relevant place in the schedule
$actionDescribes what action triggered this email. E.g.: “Your booking was $action” → “Your booking was created”
$detailsLists the booking details, useful if those had been removed by the $replace command below
$idThe object’s ID, this is useful to quickly look it up in the supervisor interface
$slot_idThe ID of the slot that this object belongs to (capacity schedule only)
$form_idThe ID of the form if this object has a form attached
$replaceRemoves all the system-generated text, only your text will be shown
The start time, finish time and creation date for this booking.
Use $start_time or $finish_time to show only the time
$lengthThe duration of the appointment displayed as H:MM or DD:HH:MM
$icalThe booking will be attached to the notification as an iCalendar file
$formIf a form is connected to this object it will be attached as an HTML file
$pricePrice of the appointment. For repeating appointments it’s the price of the first one
$passwordIn a sign up confirmation mail this displays the user’s password
$resourcesThe names of connected resources (service schedule only)
Displays the value of the first or second custom field respectively, if defined
$if "action"The rest of the sentence is only printed if action matches the current action. To apply the condition to multiple lines enclose them in curly brackets. See below for a list of possible actions
The title, location, description and quantity booked (capacity schedule only). For multi-resource schedules $description contains the resource name

Normally your custom text is appended to the email generated by the system. However, if you use the string $replace anywhere then your text will replace the system message entirely. The commands can also be chained. The next code snippet would only replace the title when a new appointment is created, and otherwise leave the default title:

$if "created" {$subject You have a new appointment on $start}

Allowable values after the $if statement are: “created”, “changed”, “deleted”, “approved”, “refunded”, “placed_on_the_waiting_list”, “changed_on_the_waiting_list”, “removed_from_the_waiting_list” or “placed” (“placed” means it moved from the waiting list to become a regular appointment). You can also use a language identifier like EN or ES to only display a sentence if a person has selected that particular language on the calendar.

Another use of auto text is to provide your clients with a direct link to a screen where they can edit their appointment. You could add this text to email notifications:

To change your appointment online go to:$id

If you are using a “capacity” type schedule you also need to include the slot ID in the URL:$slot_id?view=view&id=$id

Dynamic messages can also be used in display messages, such as the one above the schedule, the help screen and the log in screen.

Auto text strings for display messages
The word…will be replaced with
$loginWrites out the login name of the person currently logged
$nameWrites out the full name of the person currently logged in, if available
$creditWrites out the amount of credit for the person currently logged in
$shopCreates a link to your shop, for example you could write: “Please buy credits in the $shop before booking”
$autoNormally the default text is replaced with your own, but $auto re-inserts it. This is useful for the default text above the schedule that changes depending on whether someone is allowed to book or not
$suWrites out the supervisor field for the current user, if available. You can use this to show a message to a specific person when he logs in
$idWrites out the ID of the current object. Only available on the checkout screen and the “Thank you” screen for submitted forms. You can use this to give customers a unique reference number
$totalWrites the total price including discounts, or the payable deposit. Only available on the checkout screen.
$if condition {message}If the condition is true, the message between the curly brackets will be displayed. See the table at the end for the possible conditions. The message can span multiple lines and can contain other magic words, except another $if

A common use of dynamic display messages is to allow different language text for different people. condition in the $if statement can be a two character language code such as EN, DE or ES. This could be used as follows:

$if EN {Good morning $login}
$if DE {Guten Morgen $login}

Another use of the $if statement is to display a different messages depending on whether the visitor has signed in or not:

$if out {Please sign in first or create an account if you don't have one}
$if user {Welcome back $login!}

It can also be used to add tracking code for an affiliate program. Note that you will need to switch to HTML mode by clicking the ‘HTML’ button before adding JavaScript code, otherwise the code will be displayed as literal text:

$if paid {Thank you for your business $name.
var google_conversion_id = …


The table below lists the possible conditions that can be used with the $if statement:

ConditionApplies if…
$if user {message}The message is displayed if a user is logged in
$if out {message}The message is displayed if a user is not logged in
$if shared {message}The message is displayed if a user is logged in with a shared password
$if admin {message}The message is displayed if a user is logged as administrator or superuser
$if XX {message}The message is displayed if the currently selected language has an ISO language code of XX
$if paid {message}The message is displayed after the customer successfully completes a payment transaction.
It can only be added to the “Checkout screen” message
$if mobile {message}The message is displayed only when presenting the mobile version of the site
$if desktop {message}The message is displayed only when presenting the desktop version of the site
$if calendar {message}The message is displayed only when viewing the day, week, or month calendar
$if view {message}The message is displayed only when displaying this particular view. The view can be one of free, agenda, day, week or month

Back to Tutorial index