Skip to main content

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.

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.
  1. To add tickets, scroll down to "Tickets" and click on it.
  2. Click on Items, then "Add".
  3. Enter the title and subtitle.
  4. Copy the ID from the Bookla platform.

Do these steps for all of your tickets.

  1. Now set up Bookla settings – click on Bookla and choose the region. You can see your region on the platform.
  2. Copy the company ID from the platform and create an API key. Paste both into the correct input boxes.
  3. Copy and paste the service ID.
  1. 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".