Embed an Eventbrite checkout on your Webflow site

Note: This tutorial uses Webflow’s embed element to add custom code. The embed element is available on any paid Site plan and on Core, Growth, Agency, and Freelancer Workspace plans. 

In this lesson, you’ll learn: 

1. How to get your embed code from Eventbrite
2. How to embed a dynamic Eventbrite checkout on your Webflow site

How to get your embed code from Eventbrite 

Before you get started: If you haven’t already, create an Eventbrite event. You’ll also want to create a Collection in the Webflow CMS where you’ll store and update your event IDs. 

To get your event ID and embed code from Eventbrite: 

1. Go to your events 
2. Click the event for which you want to embed a checkout widget
3. Go to Marketing dropdown > Embedded checkout
4. Choose the Checkout appearance you want to use on your site (i.e., a button that overlays a modal window on the page, or a button embedded within the content on the page)
5. Click Copy code to copy your embed code

How to embed a dynamic Eventbrite checkout on your Webflow site

You could take your embed code from Eventbrite and paste it into an embed element anywhere on your site — but that embedded checkout would be static (i.e., unchanging), and you’d have to manually update the embed code each time you want to embed checkout for a different event. This approach may be ideal if you only plan on embedding an Eventbrite checkout for a single event, but not if you’re managing multiple events.

Here, you’ll learn how to embed a dynamic Eventbrite checkout on your site. Using the Webflow CMS and dynamic embeds, you can create a checkout layout that repeats for all the events in your CMS Collection. 

You’ll do this in 3 steps: 

1. Create a Collection field for your event IDs 
2. Create a dynamic embed 
3. Add your event ID to your event in the CMS

Note: Make sure you’ve created a CMS Collection (e.g., “Events,” “Meet-ups,” etc.) and created at least 1 event Collection item for your event. The CMS even includes an Events template to help you set up your Collection.

Create a Collection field for your event IDs 

First, you’ll need to create a CMS Collection field to store your Eventbrite event IDs (i.e., the unique identifier for the Eventbrite embed): 

1. Open the CMS panel
2. Hover over your Events Collection and click the settings “cog” icon that appears 
3. Click Add new field
4. Choose Plain text
5. Give your field a label (e.g., “Eventbrite event ID”) 
6. Click Save field

Create a dynamic embed

Dynamic embeds only work with dynamic content, which means you can only add them on Collection pages or in a Collection list on a static page. Since you’re referencing your Events Collection, you’ll need to add your embed to the Collection page associated with your Events Collection, or connect a Collection list to your Events Collection. 

To add your dynamic embed:

1. Go to Add panel > Advanced
2. Add an embed element to the canvas
3. Paste your Eventbrite embed code in the code editor
4. Find the eventId in the embed code and highlight the ID number between the single quotation marks (e.g., 681294671627) 
5. Copy the ID number and keep the number highlighted
6. Click Add field
7. Choose the Collection field you created for your event ID (e.g., “Eventbrite event ID”)
8. Click Save & close 

‍

Add your event ID to your event in the CMS 

Finally, add your event ID to your event: 

1. Open CMS panel > Events Collection (or whatever name you chose for your Collection) 
2. Click your event Collection item 
3. Paste the ID number from the embed code (e.g., 681294671627) in the Collection field you created for your event ID (e.g., “Eventbrite event ID”)
4. Click Save

You can repeat these steps for any events for which you want to include a dynamic checkout — copy your ID from the Eventbrite embed code and add it to your event ID Collection field in each Collection item. 

When you’re ready, publish your site to check out your new embedded Eventbrite checkout in action. 

Pro tip: You can use conditional visibility on Collection pages and in Collection lists to hide the embedded checkout for events that don’t have an event ID. 

Note: Your Eventbrite checkout won’t render on the Designer canvas — that is, you won’t be able to preview the checkout in the Designer, and a placeholder will be shown in its place. Once you publish or export your site, the checkout will render (i.e., display) where you placed it. If you need to preview the checkout before going live with your site on a custom domain, you can publish your site to the webflow.io staging subdomain.