Add custom JavaScript to your schedule

It is possible to customize your on-screen messages with HTML, which also allows you to use JavaScript scripts. These scripts are snippets of code that tell a web page how to behave and interact with the user. JavaScript scripts can add (visual) features to your website that can change the content, register information and more.

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="'//', 'Popup', 'width=400,height=300')" type="button" value="Pop-up">
In SuperSaaS JavaScript can only be inserted in text fields that allow HTML content. There are three 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
Not all accounts are configured to allow 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.

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 chat bot 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 underConfigure > 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.