Add CSS or JavaScript to your schedule

• Learn more about adding HTML inside text fields
• Change the look of your schedule with CSS
• Change the look of your widget with CSS
• Find out more about JavaScript snippets and how they work
• Learn how to insert JavaScript to integrate dynamic features in your schedule
• Add extra options when you use scripts, such as auto text or an analytics snippet

Add HTML inside text fields

• 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

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:

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:

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.

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

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.