Skip to main content

How to Create a Custom Service Selection Component for Bookla

Integrating Bookla with a custom service selection component in Framer gives you full control over your booking experience. This tutorial provides a clear, step-by-step guide to help you design a user-friendly component, apply state-based logic, and connect it directly to Bookla using the plugin and API.

What You'll Learn​

  • How to design a custom service list in Framer.
  • How to use variants and variables to manage selected and unselected states.
  • How to connect your Framer component to Bookla using real booking data.

Benefits​

  • Fully Customizable: Create a service list that matches your project’s design.
  • Interactive Booking Flow: Let users visually select a service and view details in real time.
  • Efficient Integration: Combine the flexibility of Framer with the power of Bookla’s booking system.

Creating the Service List Item in Framer​

  1. Go to your Framer project.
  2. Click on "Layout" and select "Frame".
  3. Draw the list item.
  4. You can resize the item in the left-side panel under "Size".
  1. Now you can change the style for this list item.

For example:

  • Opacity.
  • Background color.
  • Border radius.
  • Border color.
  • Shadows.
  1. In the list item, write the service name.
  2. Add the item to the stack by right-clicking and selecting "Add stack".
  1. To add another label, click "Layers".
  2. Copy and paste the previous label and, for example, write the price.
  3. To add some space between labels:
  • In the Layout section, select "Distribute".
  • Select "Space between".
  • In the Position section, add padding to the left and/or right.

Building the Component with Variants​

  1. Right-click on your component and select "Create component".
  2. Name the component, for example, "List item".
  3. Click "Create".

Note
Now you are in the component editor where you can add more variants and states.

  1. Edit Variant 1 as the Unselected state.
  2. Create a new variant for the Selected state.
  1. To make the selected state different from the unselected state, apply some styling changes. For example:
  • Change background color.
  • Change text color.
  • Etc.
  1. To add variables that you can change:
  • Click on the Unselected state, then click on the text.
  • Under the Text section, find "Content".
  • Click "+" → "Create Variable" → "Plain Text".
  • Name it as you like, for example, "Title".
  • Do the same for the price.

Creating the Service List Component​

  1. Go back to "Home".
  2. Right-click on the list component and click "Add stack".
  3. To add new list items, just copy & paste the list item.
  4. To change the horizontal stack into a vertical stack, find "Direction" and set it to vertical.
  1. Edit the other list items and change the titles and prices.
  1. Add the component from the stack by selecting the stack.
  2. Right-click and select "Create component".
  3. Write the title, for example, "Service List".
  1. To add different states, follow these steps:
  • Change Variant 1 to the first list title.
  • Set the first list item to Selected.
  • Repeat for the other items.
  1. To make it work across all steps, add interactions by drawing lines to other states and setting them on click.

Connecting to Bookla API​

  1. Click on "Plugins".
  2. Find the Bookla plugin.
  3. Click on the service type you have and drag it under the service list.
  4. Change the width to "Fill", so it matches the component.
  5. If you want, change the booking component’s color to match the list items.
  1. Select the component. Here you will need to add information from the Bookla Platform.
  2. To check your Bookla region, look at the beginning of your Bookla Platform URL.
  3. Go to the Bookla Platform → Developers → New API key.
  4. Create the API key for the component:
  • Select "Client Permissions".
  • Name your API key.
  • Click "Create".

Note
You can only access this API key once, so after closing the pop-up, you won’t be able to view it again.

  1. To get your Company ID, go to the Bookla Platform, click on the company, and copy the ID. Then paste it into Framer.
  2. To get the Service ID, go to the Bookla Platform → Services, copy the Service ID, and paste it into Framer.
  1. To make the component work in other states, follow these steps:
  • Delete the component from the other state.
  • Click on "Plugins".
  • Find the Bookla plugin.
  • Click on the service type and drag it under the service list.
  • Set the width to "Fill".
  • Optionally, change the booking component’s color to match the list items.
  • Copy and paste the API key and Company ID from the previous state.
  • Repeat the Service ID step for each state.

Note
Do this for all other states.

Testing & Final Result​

  1. Click "Play".
  2. Test different options to ensure everything works correctly.