Web embed: Squarespace

How to install Gymcatch on your Squarespace website

Ollie avatar
Written by Ollie
Updated over a week ago

General

The Gymcatch Embedded App (the app) is a web application can be embedded within a page on your own website to provide the Gymcatch functionality to your customers. Embedding the app within your own website allows you to customise the look and feel of the app and include your own content on your website above and below the app.

For Squarespace you need to have a Squarespace Business account to be able to insert JavaScript in a code block.

JavaScript

The embedded.js JavaScript file that you need to embed is a small script that handles the loading of the app. This script will dynamically inject a number of lines into your html to load the app. We use this method so that you will not need to change your html when we update the app in the future.

HTTPS

The page the app is embedded on is required to be served via https. If needed free https certificates for your website can be obtained from LetsEncrypt.

API Key

The app requires a unique key to function which you generate from the Gymcatch Business Portal WEB EMBED page. Your unique key is specific to your business and domain name. As such, when generating a key you will need to add the domain name(s) that you will be using.


Integration

Before you start your integration please check out this installation overview video guide:

To embed Gymcatch within a page on your website you will need to do three things:

  1. Obtain you API key from the WEB EMBED page in the Gymcatch Business Portal

  2. Add your domain name(s) you will be using to host the embedded app on the WEB EMBED page in the Gymcatch Business Portal. Please be sure to include/not include the www on your domain as appropriate

  3. Add the code shown in the ‘Example Page’ below as a code block on your website, replacing the “GYMCATCH_EMBEDDED_API_KEY” (removing the "") with your unique key from 1

  4. Please note: Within the Squarespace back end, do not be perturbed if you see text that reads, Script disabled, this is Squarespace disabling in the builder/preview mode and should not impact the display you see on your website once made live.

Example page

<!‐‐ Insert the gymcatch-embedded tag in your html ‐‐>
<!‐‐ You will need a unique key from Gymcatch ‐‐>
<gymcatch-embedded key="GYMCATCH_EMBEDDED_API_KEY"></gymcatch-embedded>

<!‐‐ Load the Embedded app javascript ‐‐> <script src="https://gymcatch.com/app/js/bootstrap.js"></script>
Did this answer your question?