INSTALLING GYMCATCH ON YOUR WEBSITE

GENERAL

Overview

The Gymcatch Embedded App (the app) is a web application based on the Angular framework that 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 above and below the app.

Recommendations

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

WORDPRESS INTEGRATION

Embedding the App

To embed the app within a page on your website you will need to do four things –

  1. Obtain you API key from the PROMTE, WEB EMBED page in the Gymcatch portal
  2. Add your domain name(s) you will be using to host the embedded app on the PROMOTE, WEBEMBED page in the Gymcatch portal
  3. Add a <gymcatch-embedded> tag to your html page
  4. Source the bootstrap.js JavaScript file
API Key

The app requires a unique key to function. Your unique key is specific to your business and domain name. As such, when requesting a key you will need to add the domain name(s) that you will be using to host the embedded app.

HTML Tag

The <gymcatch-embedded> tag expands to the app when bootstrapped. Place this within your html where you would like the app to be included and specify your unique api key in the key attribute of the <gymcatch-embedded> tag. Please make sure that there is no extraneous white space inside the quotes of the key value. We recommend that the <gymcatch-embedded> tag is not placed within a column or grid structure but allowed to utilise the full width of the web browser window. You can place content between the opening and closing <gymcatch-embedded> tags. This content will be displayed while the app is loading.

JavaScript

The embedded.js JavaScript file 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 actual app JavaScript and css. We use the bootstrap.js script so that you will not need to change your html when we update the app in the future.

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://app.gymcatch.com/js/bootstrap.js"></script>
<!‐‐ 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://app.gymcatch.com/js/bootstrap.js"></script>

WIX INTEGRATION

Wix iFrame
Step One

1.1 Enter ‘Developer Mode’
1.2 Add a new page or edit an existing page
1.3 Add iframe to the page

Step Two

Place the iframe on the page like that (it should take all space between header and footer).

Renamed Wix iFrame
Step Three

Rename the iframe id

a. Right click on the iframe

Changed Current iFrame Wix
Step Four

b. Tap on View Properties

c. In the Properties window change the current iframe id to gymcatch (with a lower case ‘g’)

Provided Gymcatch url Wix
Step Five

Provide the iframe with Gymcatch app url https://wix.app.gymcatch.com/?apiKey=<your API key> (to open the website address window just click on Enter Website Address button). Replace <your API key> text with your unique API key – check you have removed the brackets < > and not added an extra space _ between ? and the API key text).).

API Error on Wix
Step Six

After you click Update you can see the error but, dont worry, it is shown in edit mode only and won’t appear in your live site. 

Insert code

Insert the following to the Page Code section (just click Page Code header on the bottom).

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

Step Seven

Save and publish changes.

SQUARESPACE INTEGRATION

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

Embedding the App

To embed the app within a page on your website you will need to do four things –

  1. Obtain you API key from the PROMTE, WEB EMBED page in the Gymcatch portal
  2. Add your domain name(s) you will be using to host the embedded app on the PROMOTE, WEBEMBED page in the Gymcatch portal
  3. Add a <gymcatch-embedded> tag to your html code block
  4. Source the bootstrap.js JavaScript file
API Key

The app requires a unique key to function. Your unique key is specific to your business and domain name. As such, when requesting a key you will need to add the domain name(s) that you will be using to host the embedded app.

HTML Tag

The <gymcatch-embedded> tag expands to the app when bootstrapped. Place this within your html where you would like the app to be included and specify your unique api key in the key attribute of the <gymcatch-embedded> tag. Please make sure that there is no extraneous white space inside the quotes of the key value. We recommend that the <gymcatch-embedded> tag is not placed within a column or grid structure but allowed to utilise the full width of the web browser window. You can place content between the opening and closing <gymcatch-embedded> tags. This content will be displayed while the app is loading.

JavaScript

The embedded.js JavaScript file 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 actual app JavaScript and css. We use the bootstrap.js script so that you will not need to change your html when we update the app in the future.

Example code block

<!‐‐ 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://app.gymcatch.com/js/bootstrap.js"></script>

<!‐‐ 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://app.gymcatch.com/js/bootstrap.js"></script>

THEMING

The embedded app support a basic customisation to allow the appearance to be tailored to match the website they are embedded in. This theming is achieved by loading a simple css file after the javascript bootstrap script.

Simply save your settings as a .css file, upload to your Media section and then load the theme file with the below text after the bootstrap script, replacing “gymcatch-theme.css” with the link to the file.

<link rel="stylesheet" href="gymcatch-theme.css">
</body>
</html>

Example theme file

/*
* Copyright © 2019 Gymcatch Ltd.
*/

:root {
/*
* Colors
*/
--gc-highlight-color: #19296c;
--gc-ok-color: #f9c172;
--gc-error-color: #8f044c;
--gc-warning-color: #8f5102;
--gc-foreground-color: #21252b;
--gc-foreground-secondary-color: #616165;
--gc-disabled-color: #767676;
--gc-background-color: white;
--gc-background-highlight-color: #FFBAD4;

/*
* Fonts
*/
--gc-font-family: Arial, sans-serif;
--gc-header-font-family: var(--gc-font-family);
--gc-font-size: 13px;
--gc-font-size-small: 0.85em;
--gc-font-size-h1: 1.4em;
--gc-font-size-h2: 1.3em;
--gc-font-size-h3: 1.05em;
--gc-font-size-h4: 1em;

/*
* Border
*/
--gc-border-radius: 5px;
--gc-border-color: var(--gc-foreground-secondary-color);

/**
* Buttons
*/
--gc-button-border-radius: var(--gc-border-radius);
--gc-button-disabled-background-color: gray;
--gc-button-disabled-border-color: transparent;

/**
* Forms
*/
--gc-control-border-radius: var(--gc-border-radius);

/**
* Alerts
*/
--gc-alert-color: white;
--gc-alert-code-color: var(--gc-foreground-secondary-color);
--gc-alert-code-font-size: var(--gc-font-size);
--gc-alert-background-color: var(--gc-warning-color);
--gc-alert-border-radius: var(--gc-border-radius);

/**
* Confirmation
*/
--gc-confirmation-border-radius: var(--gc-border-radius);
--gc-confirmation-color: white;
--gc-confirmation-background-color: var(--gc-highlight-color);

/**
* Modal
*/
--gc-modal-border-radius: var(--gc-border-radius);
--gc-modal-border-color: var(--gc-foreground-secondary-color);
--gc-modal-background-color: var(--gc-background-color);
--gc-modal-overlay-background-color: rgba(10, 10, 10, 0.45);

/*
* Messages
*/
--gc-conversation-card-unread-color: #aaffee;
--gc-conversation-card-time-color: gray;
--gc-message-card-border-color: lightgray;

/*
* Notifications
*/
--gc-notification-card-unread-color: #aaffee;
--gc-notification-card-time-color: lightgray;

/*
* Table
*/
--gc-table-header-background-color: var(--gc-background-highlight-color);
--gc-table-header-color: #222222;

/**
* Tooltip
*/
--gc-tooltip-icon-color: #8696A8;
--gc-tooltip-font-size: 10px;
--gc-tooltip-content-font-size: 11px;
--gc-tooltip-border-color: #DFDFDF;

/**
* Calendar control
*/
--gc-calendar-control-range-background-color: #Ff1de9;

/*
* Activity indicator
*/
--gc-activity-indicator-background-color: rgba(1, 1, 1, 0.65);
}

 

/*
* Copyright © 2019 Gymcatch Ltd.
*/

:root {
/*
* Colors
*/
--gc-highlight-color: #19296c;
--gc-ok-color: #f9c172;
--gc-error-color: #8f044c;
--gc-warning-color: #8f5102;
--gc-foreground-color: #21252b;
--gc-foreground-secondary-color: #616165;
--gc-disabled-color: #767676;
--gc-background-color: white;
--gc-background-highlight-color: #FFBAD4;

/*
* Fonts
*/
--gc-font-family: Arial, sans-serif;
--gc-header-font-family: var(--gc-font-family);
--gc-font-size: 13px;
--gc-font-size-small: 0.85em;
--gc-font-size-h1: 1.4em;
--gc-font-size-h2: 1.3em;
--gc-font-size-h3: 1.05em;
--gc-font-size-h4: 1em;

/*
* Border
*/
--gc-border-radius: 5px;
--gc-border-color: var(--gc-foreground-secondary-color);

/**
* Buttons
*/
--gc-button-border-radius: var(--gc-border-radius);
--gc-button-disabled-background-color: gray;
--gc-button-disabled-border-color: transparent;

/**
* Forms
*/
--gc-control-border-radius: var(--gc-border-radius);

/**
* Alerts
*/
--gc-alert-color: white;
--gc-alert-code-color: var(--gc-foreground-secondary-color);
--gc-alert-code-font-size: var(--gc-font-size);
--gc-alert-background-color: var(--gc-warning-color);
--gc-alert-border-radius: var(--gc-border-radius);

/**
* Confirmation
*/
--gc-confirmation-border-radius: var(--gc-border-radius);
--gc-confirmation-color: white;
--gc-confirmation-background-color: var(--gc-highlight-color);

/**
* Modal
*/
--gc-modal-border-radius: var(--gc-border-radius);
--gc-modal-border-color: var(--gc-foreground-secondary-color);
--gc-modal-background-color: var(--gc-background-color);
--gc-modal-overlay-background-color: rgba(10, 10, 10, 0.45);

/*
* Messages
*/
--gc-conversation-card-unread-color: #aaffee;
--gc-conversation-card-time-color: gray;
--gc-message-card-border-color: lightgray;

/*
* Notifications
*/
--gc-notification-card-unread-color: #aaffee;
--gc-notification-card-time-color: lightgray;

/*
* Table
*/
--gc-table-header-background-color: var(--gc-background-highlight-color);
--gc-table-header-color: #222222;

/**
* Tooltip
*/
--gc-tooltip-icon-color: #8696A8;
--gc-tooltip-font-size: 10px;
--gc-tooltip-content-font-size: 11px;
--gc-tooltip-border-color: #DFDFDF;

/**
* Calendar control
*/
--gc-calendar-control-range-background-color: #Ff1de9;

/*
* Activity indicator
*/
--gc-activity-indicator-background-color: rgba(1, 1, 1, 0.65);
}