Integrate Booking Component with Framer CMS

Integrating Bookla with Framer CMS makes it easy to manage multiple booking components for different services. This tutorial walks through the setup process step by step.

What You'll Learn

• How to create custom CMS fields in Framer CMS.
• How to manage different service types (Fixed & Flexible).
• How to dynamically display the right booking component for each service.

Benefits

• Better Booking Experience: Make it simple for users to book the right service.
• Flexible Service Management: Easily handle different service types within Framer CMS.
• Seamless Integration: Keep everything organized with structured booking management.

Setting up Framer CMS for services

1. Go to your Framer project

2. Click on the CMS button and then "+" on Collections and give a name to the collection.

3. Click "New Item".

4. Now you will see fields. By default, there will be 3 fields: Title, Slug, and Content. To add more fields:

• Click the "..." button.
• Click "Edit Fields."

If you don't need to add fields, you can skip this and the next step and go to "Adding Service Items with Bookla IDs."

5. Here you can see all the fields you already have, but you can also add new ones by clicking on "+" and choosing the types for fields. Add information about each field. The options are:

• Title: Title for the field.
• Description: Description for the field.
• Required: Whether this field is required or not.
• Max length: Maximum number of characters allowed.
• Default:
  • Value: Default value for the field.
  • Based on: Defines what the default value is based on.
• Placeholder: Example text shown when the field is empty.
• Text area:
  • Yes: Allows multiple lines of text.
  • No: Single-line text input.
• Localization:
  • Yes: Supports multiple languages.
  • No: Single-language only.

That's it for this step!

Adding Service Items with Bookla IDs

1. Click "New Item."

2. Write information in the fields and click "Save."

Do this for all of your services

Creating CMS Pages for Services

1. Go to Pages in your Framer project.

2. Click "+"
3. Click "New CMS Page".
4. Choose "Services" -> Index.

5. Click "+"
6. Click "New CMS Page".
7. Choose "Services" -> Detail Page.

8. Click on the Plugins button.
9. Choose Bookla Plugin.
10. Choose "Fixed", then drag and drop it.

11. Choose width - Fill, or if you don't want to, you can skip this step.

Configuring Bookla Components with API Keys

1. Change the API region. You can find the correct one in the Bookla platform.

2. To add an API Key:

• Go to the Bookla platform.
• Go to "Developers".
• Click "+ Create API Key".
• Enter a name for the API key.
• Scroll down to "Clients".
• Choose permissions.
• Click "Create".
• Copy the API key and paste it into Framer under "API Key".

3. To add Company ID:

• Go to the Bookla platform.
• Go to "Company".
• Copy the ID.
• Paste it into Framer under "Company ID".

Connecting CMS Variables to Components

1. Add Service ID:

• Click "+".
• Click "Set Variable".
• Click "Service ID".

By doing this, the Service ID is connected from your CMS into the component.

2. Now, go to the CMS Index Page.

3. Make items clickable by:

• Clicking on an item.
• Clicking "+" on Link.
• Clicking "/services/:slug".

Adding Flexible Service Types

1. Go to "CMS".

2. Click on "...".
3. Click "Edit Fields".

4. To add the "Type" field:

• Click "+".
• Choose "Option Field".

5. Enter information about the field:

• Name: Type
• Options:
  • Fixed
  • Flexible
• We don't need Localization here, so you can turn that off.

6. When ready, just click outside the field box.

7. To add a Flexible Service, click "New Item".

8. Enter information in the fields, selecting the Flexible option.
9. Click "Save".

Managing Multiple Booking Components

1. Go back to the Service Page.

2. Click "Plugins".
3. Open Bookla.
4. Drag & Drop the Flexible Component.

5. Choose width - Fill, or if you don't want to, you can skip this step.

6. Copy the API Key and Company ID from the previously created Fixed Component.

7. Add Service ID:

• Click "+".
• Click "Set Variable".
• Click "Service ID".

8. Hide the Fixed Component when it doesn't belong to the service type:

• Click on the component.
• Click on the "Visible" option.
• Click "+".
• Go to "Service Variable" -> "Type" -> "Equals".

9. Hide the Flexible Component when it doesn't belong to the service type:

• Click on the component.
• Click on the "Visible" option.
• Click "+".
• Go to "Service Variable" -> "Type" -> "Equals".
• Change the Value to Flexible.