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:
- How to get your embed code from Eventbrite
- 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:
- Go to your events
- Click the event for which you want to embed a checkout widget
- Go to Marketing dropdown > Embedded checkout
- 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)
- 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:
- Create a Collection field for your event IDs
- Create a dynamic embed
- 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):
- Open the CMS panel
- Hover over your Events Collection and click the settings “cog” icon that appears
- Click Add new field
- Choose Plain text
- Give your field a label (e.g., “Eventbrite event ID”)
- 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:
- Go to Add panel > Advanced
- Add an embed element to the canvas
- Paste your Eventbrite embed code in the code editor
- Find the eventId in the embed code and highlight the ID number between the single quotation marks (e.g., 681294671627)
- Copy the ID number and keep the number highlighted
- Click Add field
- Choose the Collection field you created for your event ID (e.g., “Eventbrite event ID”)
- Click Save & close
Add your event ID to your event in the CMS
Finally, add your event ID to your event:
- Open CMS panel > Events Collection (or whatever name you chose for your Collection)
- Click your event Collection item
- 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”)
- 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.