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.

To embed the app on a Wordpress site you must have a minimum of a Wordpress Business plan.

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. This should be embedded as a code block, not an iFrame.

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 four things:

  1. Ensure you are on a minimum of the Wordpress Business plan.

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

  3. 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.

  4. Add the code shown in the ‘Example Page’ below, replacing the “GYMCATCH_EMBEDDED_API_KEY” with your unique key from 1. This is either done with a code block or a Custom HTML insert depending on your Wordpress version (if you see a Custom HTML selector use that option).

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>

Theming

The web embedded app supports 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); }

Did this answer your question?