JavaScript Widget Configuration Guide

The SuperSaaS JavaScript widget allows you to integrate a schedule into a web page in such a way that it appears to be part of it. With the widget configurator you can generate a snippet that will load the widget. This page explains several additional options not available in the configurator.

https://www.supersaas.com/schedule/demo/Therapist?­view=widget&custom_css=h1{color:red}

Customize colors and styling

The colors used by the widget can be customized on the Configure > Layout page inside your account. If you want to apply your own styling you can pass CSS into the widget that will be added in between style tags in each frame. Alternatively, you can provide a link to an external style sheet. Please be aware the markup used in the widget may change occasionally as we roll out improvements, so you can not rely on identifiers are structure remaining constant.

var supersaas = new SuperSaaS("demo", "Therapist", {"custom_css": "h1 {color:red}"})
var supersaas = new SuperSaaS("demo", "Therapist", {"custom_css": "https://….css"})

Use a custom domain

Because the widget is loaded inside a frame on the host page, the URL from which the widget is loaded will typically not be visible to the user. However, if your booking process involves payment then the widget needs to forward the browser to a page outside the frame and this reveals the domain. Payment providers do not allow the payment process to run inside a third party frame for security reasons, staying inside the frame would fail. By default this domain is supersaas.com, but you can change this to your own domain as explained on the documentation page for setting up a custom domain.

var supersaas = new SuperSaaS("demo", "Therapist", {domain: "www.supersaas.co.uk"})

It’s important to note that this will only work on domains that accept https connections. So a proxy server needs to be used, just setting a DNS record that points to SuperSaaS will not work.

Preselect a specific slot, resource or service

It can be convenient to keep multiple things in one schedule, while only showing a subset to a specific group of users. This works slightly differently depending on the schedule type you use.

Preselecting a slot on a Capacity-type schedule

When you want a user to sign up for a specific event, like a workshop, it would be cumbersome to ask them to select a date if there is only a single slot on the schedule. The option Show simplified if only one slot on the Configure > Layout page makes sure that the slot automatically gets preselected, and this also works with the widget.

If you offer multiple workshops you can keep them all in a single schedule, while still having a widget that shows a specific one. You can achieve that by specifying the slot ID which you can on the Supervise page of the schedule by clicking the spyglass icon on the slot. By adding view: "free" we ensure the widget also opens the slot.

	Link that shows a specific slot supersaas.com/schedule/demo/Cupcake_Workshop/12320083
	Idem for widget new SuperSaaS("demo","Cupcake_Workshop",{view:"free", select:12320083})

Preselecting a resource on a Resource-type schedule

On a resource type schedule you can pass in the resource name to only show the available space for that specific resource. The user can still change the resource when on the final booking screen.

	Link to a specific resource supersaas.com/schedule/demo/Meeting_Rooms/Meeting_Room_1
	Idem for widget new SuperSaaS("demo","Meeting_Rooms",{select:"Meeting Room 1"})

Preselecting a service on a Service-type schedule

On a service type schedule you can preselect the service that will be visible when the user enters the view. The user can still change to a different service.

	Link to a specific service supersaas.com/schedule/demo/Therapist_2/Long_treatment
	Idem for widget new SuperSaaS("demo","Therapist_2",{select:"Long treatment"})

Specify where to place the widget

By default the widget places itself in the page right after the script tag that instantiated it (unless the script is in the head section, in which case it attaches to the body). You can override this behavior by specifying a container parameter. When present, it will insert itself as a child of this element. This can be useful if you want to separate out the JavaScript to a separate file.

<div id="container"></div>
new SuperSaaS("demo","Meeting_Rooms",{container:"#container"})

Only display slots of one color (Capacity schedule type)

On a capacity type schedule, you can create slots with different colors, for example to indicate different lesson types (intermediate, advanced, etc). You may want to show only slots of one color to a specific user, while keeping all slots visible in the same calendar for yourself.

	Link that shows all classes supersaas.com/schedule/demo/Fitness_Club
	Link that shows only blue classes supersaas.com/schedule/demo/Fitness_Club?color=0
	Widget that shows only blue classesnew SuperSaaS("demo","Fitness_Club",{color: 0})

You can set the color while editing a slot, by clicking the colored box in the lower right corner. Colors are numbered 0 to 15, from top left to bottom right.

Set display format for resources (Resource schedule type)

If a resource schedule contains many resources, the default view where each resource occupies a single may be too cluttered. The system automatically shows a different “accordion” view where each column is collapsed into a row if there are more than ten resources. Depending on the space available to the widget you may want to override this behavior to force a particular view. You can do this by passing in the res_layout parameter.

	Regular column view supersaas.com/schedule/demo/Meeting_Rooms?view=widget&res_layout=simple
	Idem via JavaScript new SuperSaaS("demo","Meeting_Rooms",{"res_layout":"simple"})
	Accordion view supersaas.com/schedule/demo/Meeting_Rooms?view=widget&res_layout=accordion
	Idem via JavaScript new SuperSaaS("demo","Meeting_Rooms",{res_layout:"accordion"})

Adjust the size of the frame and the popup

The widget can be given several parameters to determine the size of the frame for the widget, and the size of the “modal” frame, which is popup where the appointment details are filled out.

Determine behavior upon initialization

The widget_type parameter determines the behavior when the widget is instantiated. It can take one of three values:

• closed: (default): The widget remains inactive until its show() method is called.
• frame: The widget creates an iframe and opens inside the frame.
• button: The widget generates a button element with the content passed into btn_label and an optional style applied via the parameter btn_style. It attaches an onclick handler to the button that calls its show() method.

new SuperSaaS("demo","Exams",{"widget_type":"button",btn_label:'Book',btn_style:'color:red'}

Prefill appointment information

Your website may have collected information from the user that you would also like to capture during the booking process. To prevent the user having to fill out this information twice, you can pass it into the widget so it will be prefilled.

	Prefill on a schedule supersaas.com/schedule/demo/Therapist?res[full_name]=UserName
	Prefill on a widget new SuperSaaS("demo","Therapist",{prefill:{full_name:"UserName"}})

The field names available to pass in to the prefill object differ based on the schedule type and depend on which fields are enabled. The easiest way to find them is by using the “Inspect” functionality on the browser when you are creating an appointment. The field name will have the format reservation[email] or booking[address], the field name will be the part between brackets. Note that users will still be able to modify the prefilled information.

Automatically create or log in a user

If users are already logged into your own website then you can automatically log them into your widget as well. This prevents the user from having to sign up and login twice. If you happen to use WordPress, Drupal or Joomla then we provide a plugin to do this automatically. For other cases you can use the User API directly. Note that this does require some technical proficiency.

An example snippet filled in with appropriate values for your account, can be found in this example.