Using Widgets on Your Website

Gym Insight Website Widgets

Gym Insight offers several applications that you can add directly to your company website.  These applications include a class calendar, membership signups, appointment reservations, etc.  In order to make it as easy as possible to update your website with these applications, we provide them as widgets, which reduce the amount of code required to be added to your website, and allow you to configure them from the Gym Insight application.

How do I add the widget to my website?

Of course, you'll need access to the website code for your website. 

After creating a widget in the Gym Insight application, you will be able to view that widget's snippet.  This provides you with the code fragments that you will need to add to your company website. 

Follow the steps you find there, placing each code fragment into the area of your website that it specifies.

Customizing my widget

At this point, you should see the widget displaying on your website, although it might not look quite how you'd like yet.  From there, each widget provides several style options, so that it may better blend in with the overall theme of your website.  These style options are set in the Gym Insight application, in order to limit the number of changes you must make to your website code. 

Many of these options are very simple, allowing you to change colors, borders, titles, etc.  You can freely adjust these as much as you'd like, and instantly see how those changes look on your website. 

The "Fixed Height" style option

Some widget types provide a Fixed Height style option.  This one is a little more complicated to explain, but it provides some flexibility to how the widget appears on your website.  This is best illustrated with an example:

Here's a simplistic webpage example we'll use to describe the fixed height feature:

Note that the page has a header bar, a footer bar, and a background image, and the rest of the page (in the center) is empty.  This empty area is where we want to put our calendar widget.

But I actually have a very important decision to make.  If I put the calendar into the middle of this page, do I want it to be constrained within a specifically sized container (and thus provide its own scrollbar)?  Or, do I want it to be as tall as it can be, and push any content down below it (using the main page's scrollbar instead)?  Let's see this in action:

Not using Fixed Height

This is the default and allows the widget to freely push any other content below it and grow to its full height.  Here is an example of a calendar widget added to our test page:

What you see here is that the calendar is allowed to be as tall as it needs to be to show all of the classes for this week, and the footer has been pushed below the calendar.  You notice that the scrollbar on the right is the main scrollbar for the webpage.  When we scroll it down, we'll see the whole calendar, and then the footer below that.

Also worth noting, you'll see that the calendar has some padding around it, so that we can see the background image.  This was added to the website code surrounding the widget, so it is something that you will control from your own website code.  So, for instance, if we wanted the calendar to be seamless with the header and footer, we could remove that padding:

Using Fixed Height

Now we'll demonstrate the fixed height option.  In this scenario, we've decided that we want our website page to have the footer at the bottom of the page at all times.  Because of this requirement, the calendar now needs to stay within a specifically sized space.  That is where Fixed Height comes in. 

On our test webpage, we've created a container in the website code that has a very specific size, that will keep our calendar widget constrained within it.  Now, the calendar widget cannot rely on the website's scrollbar anymore, so it will have to provide its own.  By selecting the Fixed Height option in the widget's settings, this will let the widget know that it will be used in this fashion.  Here's an example:

Notice that we no longer have a main scrollbar on the right, and that the footer is showing at the bottom.  The calendar itself now has an inner scrollbar, letting you scroll through the classes, while not affecting the rest of the webpage:

As mentioned before, the padding around the calendar was added outside of the widget (in the website code directly), so you are in control to update that as you see fit.  For example, we'll remove that padding for a seamless fit:

Conclusion

We hope this information provides a better understanding of the website widgets available in Gym Insight.  If you have any additional questions or issues, feel free to reach out and we'd be happy to assist you.