How to dynamically embed Eventbrite events with Webflow CMS

Updated 
May 5, 2017
 

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

In this example, we’ll be using a Collection we created specifically for Events, but you can add the field to any collection you want Eventbrite embed to live in.

1. 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.

2. 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.

3. 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’re embedding.

Using the embed code created in step 1, find the string of numbers listed after “eid=”—that’s the Event ID.

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

4. Paste the full embed code into an embed component in a Dynamic List or a Collection Template Page

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

In this example, we’ll use an Embed Component placed on the Collection Template 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.

5. 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.
‍Replace the event ID with the field in your CMS to create new event widgets for each item in your CMS.

6. 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!