All Collections
Gymcatch Portal features and pages
Web Embed: GoDaddy, Shopify, Weebly, Wordpress
Web Embed: GoDaddy, Shopify, Weebly, Wordpress

How to install Gymcatch on your Wordpress website

Ollie avatar
Written by Ollie
Updated over a week ago


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.


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.


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.


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.


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” (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=""></script>


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">

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?