Support
Documentation

Add CSS or JavaScript to your schedule

This page explains how to customize your on-screen messages using HTML, enabling you to incorporate CSS and JavaScript scripts. CSS allows you to style pages while JavaScript scripts can add (visual) features to your website that can change the content, register information and more.

Add HTML inside text fields

In SuperSaaS HTML, CSS and JavaScript can only be inserted in text fields that allow HTML content. There are four places where you can add HTML to your text field:
  • In the message box under Layout Settings
  • In the message boxes located in each schedule on the Configure > Layout page
  • In the HTML comment box which can be found in custom forms by going to Configure > Design
  • In the email message boxes on the Configure > Layout page if HTML is enabled for email messages
Not all accounts are allowed JavaScript. If you have a free account you may need to contact support to ask them to allow you to add JavaScript to the page. It is not possible to add JavaScript to email messages.

Change how your schedule looks with CSS

If you want to add specific styles to certain schedule pages to match your website, for example, you can use CSS. Just like scripts, CSS can be added to each message box that allows HTML. Click the < > button in the toolbar of the message box to open the source code text field to add your CSS. You will need some basic technical knowledge to apply this to your schedule. There are two ways to use CSS in SuperSaaS: you can use inline CSS, or you can link an external stylesheet.

Inline CSS

Inline CSS is a method that allows you to apply styles directly to individual HTML elements within your schedule. This is done by using the style attribute within the opening tag of an HTML element. For example, if you want to change the color of the text in a paragraph to green and set the font size to 16 pixels, you would use inline CSS as follows:

<p style="color: green; font-size: 16px;"> This is a paragraph with green text and a font size of 16 pixels.</p>

This is a paragraph with green text and a font size of 16 pixels.

Inline CSS is great for quickly changing the style of a specific element without affecting the rest of the page. However, it becomes less practical when you need to apply the same style to many elements, as you have to repeat the same code each time.

Inline CSS in email

SuperSaaS offers two types of email formats: plain text and HTML. By default, emails are sent in plain text, which only allows for basic text. If you want to include images, HTML or apply styling like CSS, enable the HTML formatting for email messages on the Layout Settings page. In email, you have to use inline CSS because emails don’t support CSS style sheets the way web pages do. After you enable HTML formatting for email, you can apply inline CSS as explained above.

Using an external stylesheet

While inline CSS is useful for small changes, it gets unwieldy if you have a lot of CSS and then using an external CSS style sheet becomes preferable. To link to an external stylesheet, it’s important that the stylesheet is accessible via another server, as it is not possible to store CSS files directly in SuperSaaS. The basic structure to link to a separate CSS stylesheet looks as follows:

<link rel="stylesheet" href="https://{www.insertyoururl}/css/style.css">

After applying CSS in source code of the message boxes that allow HTML content, press ‘Save’ and visit the page to ensure that the CSS has been applied correctly.

Adding CSS to your widget

You can also add CSS to a schedule widget that can be embedded into your website. If you’d like to customize the styling of the widget, you can either add your own CSS, which will be placed between style tags in each frame, or link to an external style sheet. However, keep in mind that the widget structure and identifiers might change as we make updates, so don’t rely on them staying the same.

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

For more information on customizing your SuperSaaS widget, refer to our developer documentation.

Using scripts in SuperSaaS

JavaScript scripts can be convenient to integrate dynamic features in your schedule pages or forms to enhance the booking process. You can integrate various services or functions, such as live chat, buttons, countdowns, or tracking scripts for analytics services like Google Analytics or Bing.

For example, the following snippet adds a pop-up button like this which can be used to show additional information when customers book via your booking page.

<input onclick="window.open('//static.supersaas.net/img/demo_room.jpg', 'Popup', 'width=400,height=300')" type="button" value="Pop-up">

How to insert a script

  1. Find your message box: Navigate to the message box where you want to add your JavaScript script. This message box can be in any of the locations mentioned above
  2. Open the source code text field: Click the < > button in the toolbar of the message box to open the source code text field
  3. Copy your script: Retrieve the code snippet of the service or function you wish to integrate, such as a live chat button for live support or an analytics service like Google Analytics
  4. Add it to the source code text field and save: Paste the code snippet into the source code text field in SuperSaaS and click save. Then, scroll to the bottom of the layout page and click the save changes button
  5. Testing: After saving the code, visit the page where you applied the code snippet to ensure the script is applied correctly. If you need the snippet on multiple pages, repeat the insertion process for each custom message box
Each text field can contain up to 3000 characters. If you need to include more code, use a src tag in your script to link to an external HTML file and place this tag in the source code. This allows you to add a large amount JavaScript without exceeding the character limit. To ensure quick page loading, it’s a good idea to add a defer attribute to the src tag.

Extra options within SuperSaaS

Using auto-text with scripts

Auto-text strings are a set of ‘magic words’ that are automatically replaced by something else when the message is generated. Auto-text statements are handy for emails and on-screen messages. However, they can also be used in HTML in combination with a script. On the customizing on-screen messages page you can find all the auto-text statements that can be used with HTML.

Auto-text can also be used to conditionally add scripts. For example, to add a script only if a payment is successful. To add a code snippet to your conditional auto-text statement, simply add it inside the curly brackets.

$if paid {Thanks for your business, $name <script>…</script>}

Thanks to the conditional $if statement, the code snippet will in this case only run on the page if someone has paid. If the payment failed or if an administrator or superuser made an appointment without paying the script will not be executed. You could also use auto-text to only show a chatbot button when a user is logged in, but skip it when a superuser is logged in.

Other ways to track bookings

Another way to track successful bookings is by adding a URL to a page on your site under Configure > Process Where do we send the user after successfully creating a reservation?. On that “Thank you” page you would add your own script with analytics code. that customers see only after completing the reservation process. You can use the ‘magic words’ $name, $id, $price, $slot_id, $email, $lang or $full_name in the URL, which will be replaced by the appointment’s login name, ID, price, slot ID, email or full name respectively. The script on that page can then collect the information from the page when the user arrives there.