Webmaster Guide to RGP Web Widgets

 

Integration Methods

There are three methods to use the booking or online gift card widgets on your facility’s website

NOTE:  Please do not actually complete test bookings at the sites below as they are live databases.  You can browse and enter information, just please don’t complete the bookings!

1. Direct Links (simple)
   

• This method involves placing simple links on your website that launch the booking widgets directly on RGP’s website (branded with your name and logo).  All you need to do is place links to the specific widgets.   
  
• Example of Catalog Widget served from RGP’s servers using the direct link method
  
• Example of Calendar Widget served from RGP’s servers using the direct link method
  
• Single Embedded Widget (medium complexity)
  

• This method involves creating a single catalog widget and embedding it within your website.  You can then optionally place links throughout your website to “link into” this embedded widget.   
  
• Example of Embedded Catalog Widget
  
• Example of Embedded Calendar Widget
  
• Multiple Embedded Widgets (advanced)
  

• This method involves creating and embedding multiple catalog widgets throughout your site Examples (multiple widgets throughout site):  Multiple Classes w/ links to embedded widgets
  

 

Widget Types 

• Offering Widget
  
  • Linking directly to an offering from a blog or Facebook post
    
  • Sharing a private url to a school group for booking
    
  • .. or any time you just want to allow people to ONLY book a single type of offering
    
• This widget type displays a single offering and does not allow navigation away from that offering.
  
• Examples of use:
  
• Catalog Widget
  
• This is the main “marketing” widget you would use to show off your catalog of offerings and events
  
• You can have any number of categories
  
• You can assign any number of offerings to each category
  
• Example of Embedded Catalog Widget
  
• Calendar Widget
  
• This is similar to a catalog widget, but displays the information in calendar format.
  
• Example of Embedded Calendar Widget
  

 

Multigym Considerations

• Each location has independent widgets and schedules and no “multigym” navigation is provided by RGP
  
• This is by-design because some multi-location facilities have shared websites and others have unified websites
  
• You are responsible for integrating each specific location’s widgets into your website(s) as you deem appropriate
  
• In the future, RGP may provide built-in multigym navigation but currently this is not available
  
• The simplest method (besides just direct links) would be to have a single, embedded catalog widget for each gym and have these catalog widgets each reside on their own page “representing” each specific gym.    You could then create a master page which links into each of the gym’s specific booking page which contain the widgets.
  
• Each gym operates as a silo with regard to schedule, but you can book participants from any gym into any event.
  

 

Payment Gateway - Stripe 

• RGP’s online booking requires a Stripe account to process credit cards
  
• RGP has a custom integration with Stripe that allows for lower rates and faster payout schedules. Reach out to support@rockgympro.com if you need an account set up and connected to your RGP database. 

Mobile / Responsive Websites

• If the RGP widgets are embedded in a responsive web page, then the widget will also be responsive.
  
• Specifically, instead of rendering as an iframe within a responsive page on a phone browser… the widget will redirect to a full width, responsive display of the booking system.
  

Mobile Browsers

*Both Mobile Redirect and Responsive Mode code is now provided in RGP*

When you link to widgets directly (i.e. not embedding them), the widgets are responsive and will automatically detect a mobile browser and adjust accordingly.  See screenshot below for example.

When you embed a widget, if the containing page is responsive (meaning it reduces its width on a mobile device) then the widget will also become responsive and adjust to the width.   IMPORTANT - if the widget detects a mobile browser while embedded on a responsive page it will pull itself out and be displayed in a new tab.  This is by design to offer the best “form” experience for the user.  

If you desire to have the widget remain within your responsive page, you can override this behavior by adding the following identifier to the embedding link.  This will tell the widget to NOT make a new tab.

<script id="rgp_never_redirect_script_id" ... </script>

Here is an example of a full-page mobile widget on an iPhone:

 

Test Mode For Browsers

RGP supports a test mode (by individual browser) that allows you to make bookings without supplying a credit card.   

When in test mode, there will always be a button that allows you to complete a booking without payment.

You can also make a test transaction using a live credit card.  NOTE - these transactions are still delivered to RGP and will be recorded as a payment, thus you’ll want to cancel the booking (and refund the payment) to not mess up your accounting. 

 

IMPORTANT - Keep the following links private!

To enable test mode for a browser:   https://app.rockgympro.com/b/testmode.php?on

To disable test mode for a browser:  https://app.rockgympro.com/b/testmode.php?off

 

Online Settings  - IMPORTANT

Before publishing anything online, be sure to customize your specific settings in Calendar -> Manage Schedule -> Settings.

At a minimum, be sure to configure the following settings:

• Business name, address, phone, website address, and email address
  
• Regional date, time, and currency settings
  
• Your timezone (this is really important!).   Calendar -> Manage Schedule -> Settings -> Your Time Zone
  
• Your Logo
  

 

Where to put your description/content?

When modifying an offerings online presentation (Online Presentation tab in Edit Offering) these are the options available

• Thumbnail Image - this will be displayed on the catalog AND offering pages.  NOTE - if the header/footer is blank on an offering, the thumbnail will not be displayed on the offering page.  This is how you can achieve the effect shown in the link above
  
• Custom Online Title - if set, this title will be used online instead of your offering’s title
  
• Short Summary Description - this is displayed on the catalog widgets AND the calendar widgets
  
• Header Text/Tabbed Sections/Footer Text - these elements are displayed on the offering page, and can be left blank if you want all your marketing to be at the catalog level
  

 

Online Widgets

• Launch Rock Gym Pro’s Calendar -> Manage Schedule -> Online Widgets
  
• You can add/remove Catalog or Calendar widgets in the top, left
  
• All your offering widgets are displayed in the bottom, left
  
• When you select any widget, a preview is shown to the right
  
• Click Widget Website Code to see the code for any specific widget
  

 

 

Direct Link Method

This is the easiest method and the only requirement is to place links on your website.

• Open the Online Widgets Window
• Select a widget
• Click the Website Widget Code tab for the specific widget
• For catalog widgets, you can either link to the catalog widget’s “top level” or link to an offering within the catalog widget.  If you link to the offering within a catalog widget, the customers will have the ability to navigate back to the top level.
• For offering widgets, there is only one link provided and the customers will not be able to navigate away from that specific offering

 

Single Embedded Widget Method

To use this method, you will have a single catalog widget that contains all your desired offerings.  You can link into this widget from various places in your site should you desire.   This single widget will be placed on a page within your website.

IMPORTANT:  Only one embedded booking widget is allowed per page on your website.  You can place multiple widgets in multiple pages, but only one widget per page.

Example:  Catalog Widget, Calendar Widget

 

• Open the Online Widgets Window
• Create a single catalog widget
• Click on the Settings tab.  These settings are shared for *all* widgets.
• Select Redirect To your website’s callback URL
• Enter the URL of the page on your website where you will place the single, embedded booking widget  (see first screen shot below)
• Click the Website Widget Code tab for the widget
• Copy the indicated code and paste that code into your website (see second screen shot below)
• IMPORTANT - once configured for the Single Embedded Widget method, if you use any of the links shown on the Website Widget Code tab for the widget, the customer will automatically be redirected to your booking page (on your website) and shown the specific widget or offering

 

 

You can place multiple widgets throughout your site.

The method is similar to the single embedded widget, with the only difference being you create/use additional widgets.

Only one embedded booking widget is allowed per page on your website.  You can place multiple widgets in multiple pages, but only one widget per page.

 

There is one IMPORTANT caveat:   if you want to link into these additional widgets, you’ll need to supply the URL of the page containing the widget at the end of the link.  Why? Because the callback URL specified in the Online Widgets Settings is shared among all widgets.

To provide a custom callback URL for a link… add the bit in red to the end of the inbound links to the widget.  Specifically, you want to add “&callbackurl=YOURURL” where YOURURL is the fully qualified URL of the page containing the widget.

https://yourdomain.com/b/?&bw=fe999b23e5fb4e4ca617966a34f4380c&bo=29d2aefcb87647d69d5f0ea3c2a34338&callbackurl=http://www.test.com

NOTE:  If the URL contains special characters, you may need to url-encode the parameter.  You can do that here: http://www.url-encode-decode.com/

 

Here is an example URL encoded
https://yourdomain.com/b/?&bw=fe999b23e5fb4e4ca617966a34f4380c&bo=29d2aefcb87647d69d5f0ea3c2a34338&callbackurl=http%3A%2F%2Fwww.test.com