Skip to main content

Padel Club Website with Online Court Reservation

Introduction​

In this tutorial, you will learn how to build a padel club website with an online court reservation system using Framer and Bookla. We will go step by step through setting up your booking system, creating resources and services, and connecting everything to your Framer website.

By the end of this guide, you will have a fully functional booking system integrated into your website.

What you will need​

  • A Framer account
  • A Bookla account
  • Basic understanding of Framer
  • Access to your Bookla dashboard
  • A ready Framer project (or you will create one during this tutorial)

Free Framer template​

  1. You can access our free Framer template here: Free Pádel Club Framer Template
  2. Open the website
  3. Click the "Copy" button

After this, the template will be copied into your Framer workspace.

Setting up services and resources (courts) in Bookla​

Before configuring the Framer component, we first need to set up resources and services in the Bookla platform.

How to create a resource​

  1. Go to your Bookla Platform account
  2. Navigate to the "Resources" section
  3. Click the "+ New Resource" button
  4. Enter the resource title and optionally choose a color
  5. Click "Create"

How to create working hours for the resource​

  1. Click "+ Add working hours"
  2. Select the days and times for availability
  3. Click "Create"

How to create a service​

  1. Go to the "Services" section
  2. Click "+ New Service"
  3. Enter the title and optionally choose a color
  4. Click "Next"
  5. Select the "Flexible" service type
  6. Click "Next"
  7. Set the booking interval
  8. Choose a booking policy:
    • Instant booking: The client instantly books without confirmation
    • Needs confirmation: The booking requires your approval
    • Needs prepayment: The client must pay before confirmation
  9. Click "Create"
  1. Click "Link with resource"
  2. Select the resources
  3. Click "Link resources"

Adding the currency​

  1. Go to the "Pricing" section
  2. Click "Click to set" under currency
  3. Select your desired currency
  4. Click "Save"

Setting up price rules​

  1. Click "+ Add price rule"

  2. Configure the parameters:

    • Duration
    • Minimum duration: the shortest bookable time
    • Maximum duration: the longest bookable time
    • Price
    • Compared price

  3. You can also set limits for specific days, times, or resources

  4. Click "Create"

Connecting Bookla to Framer​

  1. Go to your Framer project
  2. Click on the booking component

Set the API region​

  • Open your Bookla account
  • Check whether your URL region is EU or US
  • Select the same region in Framer

Generate and add API key​

  1. Go to the Developers section in Bookla
  2. Click "Create API key"
  3. Enter a name (for example, "Padel booking key")
  4. Select permissions:
    • Client Service
    • Client Resource
    • Guest Client
  5. Copy the API key (it is shown only once)
  6. Paste it into Framer under "API key"

Add Company ID​

  1. Go to the Company section in Bookla
  2. Copy the Company ID
  3. Paste it into Framer under "Company ID"

Add Service ID​

  1. Go to the Services section
  2. Select your service
  3. Copy the Service ID
  4. Paste it into Framer under "Service ID"

Testing the component​

  1. Click the "Play" button
  2. Select available dates and times
  3. Click "Continue"
  4. Enter guest details
  5. Click "Book Now"

Conclusion​

If everything is set up correctly, your padel club website is now fully connected to Bookla and ready to accept online court reservations directly through your Framer website.

Get Involved​

We want these tutorials to address your real-world needs. If you have specific use cases or scenarios you'd like to see covered, please:

  1. Open an issue in our GitHub repository with the label "use case request".
  2. Provide a brief description of your business type and the specific challenge you're trying to solve with Bookla.

Your input will help us prioritize and develop the most relevant content for our developer community.

We appreciate your patience as we work on creating valuable, practical content to support your Bookla implementation journey. In the meantime, don't hesitate to explore our API documentation and reach out to our support team if you have any questions.