GymMaster Online Module Setup Tutorial

*Please note that until we’ve been given the information required to configure the backend, nothing will appear on the frontend even if the includes are in place, this is perfectly normal.

GymMaster provides an easy setup to integrate the GymMaster Online Module and GymMaster Online Calendar into your website. Please note, this requires having your own host website.

Follow these few steps to setup the GymMaster Online Module.

1. Access the backend of your host website
2. Select the page you would like the GymMaster Online Module to be displayed in.
3. Highlight ALL the HTML and Javascript code in the box below

   For GymMaster Member Portal/Login Page

    
   <script>
    if (typeof jQuery !== 'undefined') var oldJQuery = jQuery.noConflict(true);
   </script>
   
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" > </script>
   
   <script> jQueryX = jQuery.noConflict(true); jQuery = oldJQuery; </script>
   
   <script type="text/javascript" src="https://USERNAME.gymmasteronline.com/portal/static/js/hostpage.js"> </script>
   
   <figure>
     <iframe class="gmiframe" src="https://USERNAME.gymmasteronline.com/portal/?logo=0" width="100%" scrolling="no" frameborder="0" allow="camera *"> </iframe>
   </figure>
   

   For GymMaster Member Sign Up Page

   
   <script>
    if (typeof jQuery !== 'undefined') var oldJQuery = jQuery.noConflict(true);
   </script>
   
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
   
   <script>
    jQueryX = jQuery.noConflict(true);
    jQuery = oldJQuery;
   </script>
   
   <script type="text/javascript" src="https://USERNAME.gymmasteronline.com/portal/static/js/hostpage.js"> </script>
   
   <figure>
    <iframe class="gmiframe" src="https://USERNAME.gymmasteronline.com/portal/signup?logo=0" width="100%" scrolling="no" frameborder="0" allow="camera *"> </iframe>
   </figure>
   

   For GymMaster Calendar Widget

   
   <script>
   if (typeof jQuery !== 'undefined') var oldJQuery = jQuery.noConflict(true);
   </script>
   
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
   
   <script>
   jQueryX = jQuery.noConflict(true);
   jQuery = oldJQuery;
   </script>
   
   <script type="text/javascript" src="https://USERNAME.gymmasteronline.com/portal/static/js/hostpage.js"></script>
   
   <figure>
    <iframe class="gmiframe" src="https://USERNAME.gymmasteronline.com/portal/classcalendar?logo=0" width="100%" frameborder="0" allow="camera *"></iframe>
   </figure>
   

   NB: https://USERNAME.gymmasteronline.com/portal/classcalendar can be appended with filters using relevant ID numbers. For example to only show classes of category 6 at club 3, you could use:

   https://USERNAME.gymmasteronline.com/classcalendar?companyid=3&classcategoryid=6

   Available filters include companyid, resourceid, classid, classcategoryid (note older versions of GymMaster may use 'classtypeid' instead of 'classcategoryid').

   For GymMaster Member Portal Enquiry

   
   <script>
    if (typeof jQuery !== 'undefined') var oldJQuery = jQuery.noConflict(true);
   </script>
   
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
   
   <script>
    jQueryX = jQuery.noConflict(true);
    jQuery = oldJQuery;
   </script>
   
   <script type="text/javascript" src="https://USERNAME.gymmasteronline.com/portal/static/js/hostpage.js"> </script>
   
   <figure>
    <iframe class="gmiframe" src="https://USERNAME.gymmasteronline.com/portal/enquiry?logo=0" width="100%" scrolling="no" frameborder="0" allow="camera *"> </iframe>
   </figure>
   

   For GymMaster Popular Visit Times

   
   <script>
    if (typeof jQuery !== 'undefined') var oldJQuery = jQuery.noConflict(true);
   </script>
   
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
   
   <script>
    jQueryX = jQuery.noConflict(true);
    jQuery = oldJQuery;
   </script>
   
   <script type="text/javascript" src="https://USERNAME.gymmasteronline.com/portal/static/js/hostpage.js"> </script>
   
   <figure>
    <iframe class="gmiframe" src="https://USERNAME.gymmasteronline.com/portal/visits/graph/embed?logo=0" width="100%" scrolling="no" frameborder="0" allow="camera *"> </iframe>
   </figure>
   

   For GymMaster Member Portal Casual Booking (If available)

   
   <script>
    if (typeof jQuery !== 'undefined') var oldJQuery = jQuery.noConflict(true);
   </script>
   
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
   
   <script>
    jQueryX = jQuery.noConflict(true);
    jQuery = oldJQuery;
   </script>
   
   <script type="text/javascript" src="https://USERNAME.gymmasteronline.com/portal/static/js/hostpage.js"> </script>
   
   <figure>
    <iframe class="gmiframe" src="https://USERNAME.gymmasteronline.com/portal/casual_form?logo=0" width="100%" scrolling="no" frameborder="0" allow="camera *"> </iframe>
   </figure>
   

   For GymMaster Member Portal Casual Booking – Service Bookings Only (If available)

   
   <script>
    if (typeof jQuery !== 'undefined') var oldJQuery = jQuery.noConflict(true);
   </script>
   
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
   
   <script>
    jQueryX = jQuery.noConflict(true);
    jQuery = oldJQuery;
   </script>
   
   <script type="text/javascript" src="https://USERNAME.gymmasteronline.com/portal/static/js/hostpage.js"> </script>
   
   <figure>
    <iframe class="gmiframe" src="https://USERNAME.gymmasteronline.com/portal/book/service?logo=0" width="100%" scrolling="no" frameborder="0" allow="camera *"> </iframe>
   </figure>
   

   NB: https://USERNAME.gymmasteronline.com/portal/book/service can be appended with a specific service type using the service ID number. For example if Gym Tour was booking type 6, you could use

   https://USERNAME.gymmasteronline.com/portal/book/service?serviceid=6

   Squarespace Set up Video Weebly Set up Video New WordPress Set up Video Old WordPress Set up Video

   

   Set Up Tutorial

   

   Set Up Tutorial

   

   Set Up Tutorial

   

   Set Up Tutorial (New WordPress)

   

   Set Up Tutorial (Old WordPress)

4. Copy the selected code
   

   Windows: press Ctrl + C or right click and press Copy
   iOS: press Cmd + C

5. Paste it to the desired page of your host website.
6. Replace all the “USERNAME” text with the gym’s GymMaster username, for example: https://mygym.gymmasteronline.com/portal/
7. Update your host website page
8. Optional: By default, the "Shift to mobile-friendly page design on mobile devices" setting is enabled in your Member Portal Configuration, which will redirect the browser to the member portal when opened in mobile view. You can disable this setting to have it stay on the host website, but keep in mind this may require adjustment to the layout and styling to display correctly.