How to Add Tickets Component in Framer

This tutorial guides you through setting up a streamlined ticket sales process in Framer using Bookla. With a simple drag-and-drop method, you'll create a dynamic component for ticket purchases.
Learn how to configure ticket types, set pricing, manage schedules, and integrate Bookla, enabling clients to book tickets directly from your website.

Create a New Ticket Service

1. Go to the platform dashboard.

2. Click on the "+" to create a new ticket service.

3. Choose a color and name for this service.

4. Click "Next".
5. Choose the "Ticket" type of service.
6. Click "Next".

7. Choose the duration and booking policy.

Note: For testing, we recommend using the "Instant booking" policy.

8. Click "Create".

9. Link the service with a resource by clicking "+ Link with resource" and choosing the resource from the list.

Note: You can choose not to add working hours for the resource because we will set them up for the tickets.

Create Tickets for a Ticket Service

1. Go to the Tickets section.

2. Click "+ Add ticket".

3. Enter the ticket name and click "Create". Repeat this process to create all the ticket types you need, such as Adult, Child, Senior, and Student.

Create a Schedule for Tickets

1. Go to the "Schedule" section.

2. Click "+ Add slot".

3. Enter the duration, select a resource, and choose the start date and time.

4. Choose how the schedule will repeat. You can select No repeat, Weekly, or Custom [RRule].

5. Select the days when the schedule will be active and set an end date.

If you don’t know when the schedule should end, select a date far in the future.

6. Click "Create".

Create capacity

1. Go to the section "Capacity"

2. Click "+ Add Capacity rule"

3. Choose spots and if needed choose spots for tickets(like maybe 10 spots for students, 50 spots for adults, 20 for kids and 20 for seniors) and if you want limits and "active till".

Create pricing for tickets

1. Go to the "pricing" section

2. Click "+ Set currency".
3. Change the currency.
4. Click "Save".

5. If needed add Tax rate by clicking "Click to set" adding procents and click "Save".

6. To add price rule click "Add price rule".

7. Select ticked and add price.
8. And if you want add:

• Compared price
• Limits
• Active from - Active till

Do this to all tickets

Add the Bookla plugin to Framer

1. Go to the Framer page.

2. Click on Plugins.

3. Search for the "Bookla" plugin and click on Integrate.

4. Choose the ticket component – drag and drop it.

5. Change the width of the component.

6. To add tickets, scroll down to "Tickets" and click on it.

7. Click on Items, then "Add".

8. Enter the title and subtitle.

9. Copy the ID from the Bookla platform.

Do steps 7 to 9 for all of your tickets.

10. Now set up Bookla settings – click on Bookla and choose the region. You can see your region on the platform.

11. Copy the company ID from the platform and create an API key. Paste both into the correct input boxes.

12. Copy and paste the service ID.

13. That's it! Now you can test it.

• Click the "Play" button.
• Choose tickets and click "Continue".
• Select the date & time.
• Enter your first name, last name, and email, then click "Make booking".