Skip to main content

How to Add a Group Component in Framer

In this tutorial, you will learn how to set up a Group booking component in Framer using the Bookla plugin. You will create and configure your company, resources, group services, pricing, schedules, capacity settings, and API connection in Bookla, then connect everything to Framer and test your booking flow.

Prerequisites​

Before setting up Framer, make sure everything is configured correctly in the Bookla Platform.

Create a Company in Bookla​

This step is essential because it links your Company ID to the Framer widget.

  • Open Bookla Platform and click "Create Account".
  • Create an account using your credentials, or log in if you already have one.
  • Create a new company or use an invitation code to access an existing one.

Set Up Resources​

Resources represent the locations, rooms, equipment, or staff members that provide the service.

  1. Go to your Bookla account.
  2. Open the "Resources" section.
  3. Click the "+ New Resource" button.
  4. Enter a title for the resource. If needed, you can also change the resource color.
  5. Click the "Create" button.

Note
For Group services, you do not need to add working hours for resources. The availability of the service will be controlled through the service schedule instead.

Service Setup​

  1. Go to the "Services" section.
  2. Click the "+ New Service" button.
  3. Enter the service name. If needed, you can also change the service color.
  4. Click the "Next" button.
  5. Select the service type. For this tutorial, choose "Group".
  6. Click the "Next" button.
  7. Set the service duration.
  8. Choose the booking policy.
  9. Click the "Create" button.

Linking a Service with a Resource​

  1. Click the "Link with Resource" button.
  2. Select the resources that provide this service.
  3. Click the "Link Resources" button.

Setting Up the Service Schedule​

Group services use the schedule configured inside the service settings.

  1. Open the created Group service.
  2. Go to the "Schedule" section.
  3. Click the "+ Add Slot" button.
  4. Select the duration and resource
  5. Set the starting date and time.
  6. Select if it doesn't repeat, or if it repeatws weekly, or you can make custom Recurrence Rules.

Learn about Recurrence Rules here

  1. Click button "Create".

Setting the Group Capacity​

Group services allow multiple clients to book the same time slot.

  1. Go to the "Capacity" section.
  2. Click "+ Add capacity rule"
  3. Enter the maximum number of spots allowed per booking time slot.
  4. Click button "Create".

Adding the Currency and Setting Up the Tax Rate​

  1. Go to the "Pricing" section.
  2. Click "Click to set" under Currency.
  3. Select your desired currency.
  4. Click the "Save" button.
  5. Click "Click to set" under Tax rate.
  6. Enter your country's or state's required tax rate.
  7. Choose whether the tax is included in the price.
  8. Click the "Save" button.

Setting Up Price Rules​

  1. Click the "+ Add price rule" button.
  2. Configure the following parameters:
    • Price
    • Compared price (optional)
  3. Optionally, set restrictions for specific days, times, or resources.
  4. Click the "Create" button.

Service Settings​

In the "Settings" section, you can configure additional options for your Group service:

  • Booking Policy: Defines how bookings are confirmed. For example, with the Instant policy, bookings are automatically confirmed without requiring manual approval.
  • Availability Period: Determines how far in advance clients can book the service.
  • Duration: Defines the length of each booking slot.
  • Buffer Before: Adds a required time period before each booking, preventing bookings from being created too close to the previous activity.
  • Exclusive Slot: When enabled, each available time slot can only be booked exclusively.
  • Allow Ongoing Slot: Allows clients to book an ongoing time slot when enabled.

Connecting Bookla to Framer

  1. Go to your Framer project.
  2. Click the "Plugins" button.
  3. Search for the "Bookla" plugin and click "Integrate".
  4. Choose the Group component and drag and drop it onto your page.
  5. Adjust the width of the component as needed.

Setting the API Region and Generating an API Key​

  1. Open your Bookla account.
  2. Check whether your account URL uses the EU or US region.
  3. Select the same region in Framer.
  4. Go to the "Developers" section in Bookla.
  5. Click the "Create API key" button.
  6. Enter a name for your API key.
  7. Select the required permissions:
    • Client Service
    • Client Resource
    • Guest Client
  8. Copy the API key. It is displayed only once.
  9. Paste it into Framer under "API Key".

Adding the Company ID and Service ID​

  1. Go to the "Company" section in Bookla.
  2. Copy the Company ID.
  3. Paste it into Framer under "Company ID".
  4. Go to the "Services" section.
  5. Select your Group service.
  6. Copy the Service ID.
  7. Paste it into Framer under "Service ID".

Testing the Component​

  1. Click the "Play" button.
  2. Select an available date and time.
  3. Select the number of participants.
  4. Click the "Continue" button.
  5. Enter the guest details.
  6. Click the "Book Now" button.

Conclusion​

You have successfully connected the Bookla Group component to your Framer project. Your group booking flow is now ready for testing and publishing.