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.
Wordpress Business Plan
To embed the app on a Wordpress site you must have a minimum of a Wordpress Business plan. Wordpress will block any third-party JavaScript functions on a site with any lesser 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 block of code, not in a separate 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. For more help with this please see this video guide.
Integration
Before you start your integration please check our installation overview guide here.
To embed Gymcatch within a page on your website you will need to do four things:
Ensure you are on a minimum of the Wordpress Business plan.
Obtain you API key from the WEB EMBED page in the Gymcatch Business Portal.
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.
Add the code shown in the ‘Example Page’ below, replacing the “GYMCATCH_EMBEDDED_API_KEY” (including the "") 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). Make sure to copy the whole of the below script including the lower lines of JavaScript code.
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>
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” (including the "") 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); }