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.

Please review and action (where necessary) the following points before conducting the integration/embedding process.

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. For additional help with this please see this video guide.

Wix editor Mode

Whilst in editor mode the Gymcatch embed app will not load as the editor itself is hosted under a different domain name than your live site. You will only be able to view the embedded app on a live page within the domain(s) added on the Gymcatch Business WEB EMBED page.

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

Open the site editor and turn on 'Dev Mode' from the toolbar
Add a new page or edit an existing page. Do not call it 'Gymcatch'
Add an iframe to the page from the Embeds menu, using the 'Embed a site' option

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 by right clicking on the iframe and selecting 'View Properties'. Be aware that on some newer themes there is no 'View Properties' option, instead the iframe ID can be found in the page edit section at the bottom right of the editor.
Rename the iframe gymcatch with a lower case 'g'

For newer themes

Step 4

From the iframe HTML Settings page, provide the iframe with the Gymcatch app url https://wix.app.gymcatch.com/?apiKey=<yourAPI key>. Replace "<your API key>" text (including the "") with your unique API key – check you have removed the brackets < > and not added an extra space _ between ? and the API key text. For example - https://wix.app.gymcatch.com/?apiKey=12345-apikeyexample-67890

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