Spot Scheduling

Spot Scheduling permits studio customers to book a bike/mat/machine or other studio resources within a group fitness settting.

In order to implement custom spot booking layouts, zingFit counts on designer/developers to provide zingFit with the room design and all necessary media assets, room design is not part of zingFit standard integration services.

Room Layout

Spot Scheduling requires a room layout, designed to proper web page scale, to show the position of the equipment/bikes in the studio. Below is an example of a fully implemented booking room, with numbers displayed as available spots.

Take notice of a few of the elements in the design above.

  • The key at the bottom center is part of the background image asset you will provide
  • The booking room itself is built with spot icons overlaid on a background image (displayed below)
  • The design displays an entrance and other room features to orient customers to the room
  • Even though it is not bookable, the instructor location is designated for proper orientation in the classroom

Spot Images

Designers/developers can choose to have spots represented by icons/images, or they can create geometric elements to display as background images (ex: circles) and have zingFit overlay via css spot numbers on top (preferred method), either in the default state or the roll-over state.

There are three "states" for a spot - available, booked, and hover. Some studios use the hover state to display the spot number.

Images for these states should be provided as JPEG, GIF or PNG images with a minimum size of 40px is recommended (each spot icon occupies a "spot block" of 46px that cannot be occupied by any other spot icon)..
Examples of DEFAULT image choices:


bike_available.png bike_booked.png bike_unavailable.png
 
bike_available.jpg bike_booked.jpg bike_unavailable.jpg
 
mat available mat booked mat unavailable

 

There are two means of displaying equipment/bike numbering:

1. Display the number on top of the icon using CSS. This is the preferred method and, in this case, the designer should provide a style guide or basic CSS code for the spot numbers and make provisions for any custom web fonts. NOTE: Many studios choose to simply provide us with a colored circle icon for the spot background.

2. Display each spot number as a graphic image. The file naming scheme needs to be: number_1.jpg, number_2.jpg. See DEFAULT image choices below that serve as examples. To account for expansion, number images should span ten (10) numbers past the total number of actual bikes in the room.

 
number_1.jpg number_2.jpg or number_1.jpg number_2.jpg

Booking Room Specs.

  • Width of entire spot scheduling design should not exceed 850px
  • A spot occupies a "spot block" of 46px. The spot icon can be larger or smaller than the spot block, however, designers need to accommodate for 46px of minimum space for a spot block to occupy. Designers are free to add as much space as is practical to fit the overall layout within the website container.
  • Asset size MUST BE CONSISTENT across provided files. If your spot icons are 50px x 50px in the overall design layout you provide, your spot icon pngs or jpgs should also be 50px x 50px. If your overall design layout is 600px wide, the background image you provide with no spots should also be 600px wide.
  • There are three available spot icon states - available, roll-over/hover and booked. Spot icons should be provided as images (pngs) over which a spot number can be dynamically placed and styled using CSS.
  • Icon key/guide for icon states (booked, available) - optional. Included as part of background image.
and for mobile
  • mobile booking room layout with numbers (400px max-width) to orient users to bike/spot positions in the room

Please Provide The Following Assets

Your asset package should look something like this: background.jpg, background-numbered.jpg, available-icon.png, booked-icon.png, hover-icon.png. Download an example here.