Eventbrite Integration | Webflow University

This integration is now an official Webflow app. Visit the Webflow Marketplace to learn more!

Eventbrite

Dynamically embed Eventbrite events into your site.

This video features an old UI. Updated version coming soon!

With Dynamic Embeds, you can let your site visitors register for your events using an embedded Eventbrite widget.

Create a Text Field for the Event ID
Create an embed for your event in Eventbrite
Find and copy the Event ID in the Eventbrite embed
Paste the full embed code into an embed component in a Collection List or a Collection Page
Replace the Event ID in the embed code

Create a Text Field for the Event ID

In your event Collection, create a Plain Text Field for the Event ID, which is the unique identifier for the Eventbrite embed.

Structure of an example event Collection, with the Eventbrite event ID plain text field. — *Create a Plain Text field for the unique Eventbrite event ID.*

Create an embed for your event in Eventbrite

Next, you’ll need to create the Eventbrite widget you’ll embed in your website, following these steps. Eventbrite has a variety of widgets, but for this example, we’ll embed the Ticket Form widget option.

In the Eventbrite settings, select the Ticket Form widget. — *In your event settings, locate the Ticket Form widget.*

Find and copy the Event ID in the Eventbrite embed

Next, we need to find the unique identifier within the Eventbrite embed code. It is this identifier that will allow us to know which event we are embedding.

In the embed code you created in the previous step, locate the string of numbers listed after “eid=”—that’s the Event ID. Copy it to your clipboard.

Location of the embed code in your event settings. — *Grab the full embed code from your Ticket Form widget page.*

Paste the full embed code into an embed component in a Collection List or a Collection Page

Dynamic embeds only work with dynamic content, so you need a Collection Page or a Collection List.

In this example, we’ll use an Embed Component placed on the Collection Page for our Events collection. Just drag the Embed component from the Add Panel onto your site, and paste the full embed code from the Eventbrite widget into the Embed.

Paste your full embed code in an empty HTML embed component on your template page. — *Paste the full event embed code in an HTML embed component, on the template page.*

Replace the Event ID in the embed code

If this was the only event we wanted on our website, we’d be done. But if you plan on adding any events in the future, you’ll need to replace the Event ID in the embed code with the field that you created in Step 1. That way, the Embed Component will dynamically pull in the Event ID you enter in your Collection Item and display the right event.

To replace the Event ID, open the embed code editor by double clicking on the Eventbrite widget we just added. Then find and select the Event ID, click the Add Field button, and pick the Event ID field from the dropdown.

*‍Replace the event ID with the field in your CMS to create new event widgets for each item in your CMS.*

Done!

Your Dynamic Embed’s all set up. So in the future, you’ll just need to copy the Event ID from Eventbrite and paste it into Event ID field when you create a new event. Webflow CMS and your Dynamic Embed will take care of the rest!

View lesson