The Spot-Tool feature enables you to make adjustments and reconfigurations to your spot room in real-time. This part of the design-guide will focus on the behavior and requirements to use the spot tool effectively.
- Room Background Image: The image uploaded will be used as the background display for your spot scheduled room.
- Room Width: The width of your room is in pixels.
- Room Height: The height of your room is in pixels.
- Display Instructor: This option will allow you to choose whether or not you would like to display the instructor bio image.
- Instructor Width: The width of your instructor image is in pixels.
- Instructor Height: The height of your instructor image is
Spot Style Settings
- Spot Style: Five options to choose for your spot icons.
- Image: When selected, you will be given the option to upload three images. These images will be representations of your bookable fitness location.
- Available Image: The default state of an available spot.
- Hover Image: The hover state of an available spot in your room.
- Booked Image: The booked state of an unavailable spot in your room.
We recommend using .png images for spot images, as they are better optimized for web use and preserve transparency. We also recommend that you use the same size images for all three, to maintain consistency.
- Open Circle: Use a bordered circle as representations of your bookable fitness location.
- Closed Circle: Use a solid circle as representations of your bookable fitness location.
- Open Square: Use a bordered square as representations of your bookable fitness location.
- Closed Square: Use a solid square as representations of your bookable fitness location.
- Spot Available Color: The default color for your available spot.
- Spot Hover Color: The hover state color for your available spot.
On a desktop browser, this will be the effect when someone ‘mouses-over’ the available spot, as visual confirmation of the spot they are selecting.
- Spot Unavailable Color: The booked state of your an unavailable spot in your room.
- Spot Width: The width of the spot in pixels.
- Spot Height: The height of the spot in pixels.
Spot Text Settings
- Spot Text Color: Select from a gradient map or use a hex code to select the color of the text displayed on your spot.
- Spot Text Size: Set the size of text displayed on your spot.
- Display Text on Available: Shows/Hides text on the spot in its default state.
- Display Text On Hover: Shows/Hides text on the spot in its hover state.
- Spot Text Align: Set the position of the text displayed within your spot as top, middle or bottom.
Once the style configuration has been completed, click ‘save’ to save your settings, which will bring you to a live display of your spot room within the pop-up window. From here you will be able to drag and drop your spots to the desired locations.
Once the positions have been set and saved, your changes will be pushed to the front-end within a few moments.
- Spot: The spot that you are affecting with label and rotation changes.
- Label: Apply a label to the spot room. (Example: T1/F2)
- Rotate: Set a rotation on the spot using degrees (Example: Enter 90 for 90° angle rotation.)
Yes you can! Select ‘image’ under the spot style, which will provide three upload fields to allow you to upload your custom images.
Do my changes appear in real-time?
Yes. As soon as you click ‘save’ the changes you have made are stored and are pushed live instantly.
Can I change my spot schedule layout anytime I want?
Yes. The spot tool was made so that you can, at a moments notice, rearrange your room at any time.