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.

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

Embedding Gymcatch into your Wix site is very simple. Just follow the steps below. There is also a video guide here you can follow to take you through each step:

Step 1

  • Enter 'Developer Mode'

  • Add a new page or edit an existing page. Do not call it 'Gymcatch'

  • Add an iframe to the page from the Embeds menu

Step 2

  • Place the iframe on the page full width and with a generous height

Step 3

  • You now need to rename the iframe Properties field. You will do this either by right clicking on the iframe and selecting 'View Properties', or on some newer themes this is now found in the page edit section at the bottom right of the editor.

  • Rename the iframe gymcatch with a lower case 'g'

Step 4

After you click Update you can see the error below but, do not worry, it is shown in edit mode only as this is displayed on a different domain, and won’t appear in your live site.

Step 5

  • Click on the Page header at the bottom of the page and insert one of the following code blocks in the Page Code section, replacing all text and spaces that are in there by default.

  • If you are installing the embed at the very top of a page on your website use this code:

import wixLocation from 'wix-location';
$w.onReady(function() {
$w("#gymcatch").onMessage(function(event) {
if (!event.data || !event.data.gymcatch) {return;}
if (event.data.ready) {
$w("#gymcatch").postMessage({wix:true, url:wixLocation.url, path: wixLocation.query.path});
}
if (event.data.path) {
wixLocation.to(`/${wixLocation.path.join('/')}?path=${event.data.path}`);
}
});
});
  • Or if you embedding Gymcatch further down on a page use this code block (the difference with this block is that it removes the ability to deep link to pages which would otherwise take the user to the top of your website page when navigating):

import wixLocation from 'wix-location';
$w.onReady(function() {
$w("#gymcatch").onMessage(function(event) {
if (!event.data || !event.data.gymcatch) {return;}
if (event.data.ready) {
$w("#gymcatch").postMessage({wix:true, url:wixLocation.url, path: wixLocation.query.path});
}
});
});

Step 6

  • Save and publish changes

Did this answer your question?