START HERE
Your venue, live this week.
Bayroom is built so you can swap in your bays, prices and photos without touching code. Follow these steps and your site is ready to take bookings.
STEP 01
Make it yours
Open Assets and edit the colour styles. Chalk, Olive and Burnt Orange drive the whole site, so one change updates every page.
Text styles control every heading and paragraph. Swap fonts there and the site follows.
Edit the logo and links inside the Navigation and Footer components.
STEP 02
Choose your homepage
Two finished homepages are included: Social Lounge (the current homepage) and Performance Studio at /performance-studio.
STEP 03
Add your bays
Open the Bays collection in the CMS. Each item powers the explorer, filters, price table, bay cards and its own bay page.
Set Bay number, Max players, Best for and Privacy so filters work, and add your Hourly rate and Peak rate.
Running a single-bay venue? Keep one item and everything still works beautifully.
STEP 04
Place bays on your floor plan
On the Bays page select Bay Explorer and drop in your own floor plan image.
In each bay, Plan X and Plan Y set where its number sits on the plan, as a percentage from the top left corner.
Use the Colours and Labels controls on Bay Explorer to match your brand and language.
STEP 05
Set your prices and planner
Select Group Planner on the Prices and Groups pages to set currency, bay rates, peak pricing, players per bay, bays available and session lengths.
Add your booking link to show a Check times and book button, and switch on Send to booking if your system reads group size and duration from the address.
STEP 06
Connect bookings and forms
Paste your booking system link into each bay’s Booking link field and into the Book a bay buttons.
Select each form and add a destination in its settings: email, webhook or Google Sheets. Choose Redirect to send people to the Thank You page.
Plans from the Group Planner drop straight into the group enquiry form.
STEP 07
Fill What’s On
Add leagues, clinics and parties in the What’s On collection. Status controls the tag and button: Upcoming, Full or Completed.
Every event gets its own page automatically.
STEP 08
Use the agent skills
Bayroom includes four project skills for Framer’s AI agent: preserve the design system, update a bay, create an event page and check links.
Ask the agent to add a new bay or event and it follows your Bayroom conventions.
STEP 09
Go live
Add your page titles and descriptions in each page’s settings, upload your social image and favicon, then publish.
Before launch, test both forms and the explorer on your phone.
NEED A HAND?
We’ve got you
Reply to your purchase receipt email and we will help you get your venue live. Your licence covers one website, forever.