Skip to main content

How to Add a Flexible Component in Framer

In this tutorial, you will learn how to set up a flexible service in Bookla, connect it to Framer, and configure the Flexible component so your customers can start making bookings.

Prerequisites​

Before adding the Flexible component in Framer, you need to configure your Bookla account.

Create a Company in Bookla​

If you have not already done so, create a company in Bookla.

  1. Go to the Bookla Platform and click "Create Account".
  2. Create an account using your credentials.
  3. Create a new company or use an invitation code to access an existing one.

Set Up Resources​

Note
Resources are entities that provide a service. For example, they can be barbers in a hair salon, vehicles in a car rental company, and so on.

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

Add Working Hours to a Resource​

  1. Click the "Add working hours" button.
  2. Select all working days.
  3. Enter the working hours.
  4. Click the "Create" button.

Create a Flexible Service​

  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 "Flexible" service type.
  6. Click the "Next" button.
  7. Set the service duration.
  8. Choose the booking policy.
    • Instant booking: The client instantly books the service without payment.
    • Needs confirmation: The booking requires your confirmation.
    • Needs prepayment: The client must prepay to confirm the booking.
  9. Click the "Create" button.
  1. Click the "Link with Resource" button.
  2. Select all resources that provide this service.
  3. Click the "Link Resources" button.

Configure the Currency and Tax Rate​

  1. Go to the "Pricing" section.
  2. Click "Click to set" under Currency.
  3. Select your preferred 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.

Set Up Price Rules​

  1. Click the "+ Add price rule" button.
  2. Configure the following settings:
    • Minimum duration
    • Maximum duration
    • Price
    • Compared price (optional)
  3. You can also set limits for specific days, times, or resources.
  4. Click the "Create" button.

Note
In this specific example, the rules are as follows: Monday through Thursday, from 8:00 to 17:00, the price is 50 EUR/h. From 17:00 to 00:00, the price is 70 EUR/h. From Friday through Sunday, a one-hour booking costs 80 EUR/h, while bookings of at least 2 hours cost 70 EUR/h.

Note
You can add plugins to your company. Learn more about the available plugins here.

Connect 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 Flexible component and drag it onto your page.
  5. Adjust the width of the component.

Set the API Region and Generate 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 following 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".

Add 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 service.
  6. Copy the Service ID.
  7. Paste it into Framer under "Service ID".

Test the Component​

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

Conclusion​

You have successfully created a flexible service in Bookla and connected it to the Flexible component in Framer. Your booking flow is now ready to accept reservations. If you need additional customization, you can explore the available component settings in Framer or enhance your Bookla account with plugins and additional pricing rules.