Insert an Eventbrite order processing on your Webflow website

Important: This guide makes use of Webflow’s integration feature to insert custom code. The integration feature is accessible on any paid Site plan and on Core, Growth, Agency, and Freelancer Workspace plans. 

In this tutorial, you will discover: 

1. The method to retrieve your integration code from Eventbrite
2. How to integrate an interactive Eventbrite order processing on your Webflow website

Obtaining your integration code from Eventbrite

Prior to beginning: If not done yet, establish an Eventbrite event. Also, make sure to generate a Collection in the Webflow CMS where you can save and adjust your event IDs.

To acquire your event ID and integration code from Eventbrite: 

1. Visit your events 
2. Select the event that you want to embed an order processing widget for
3. Navigate to the Marketing menu > Embedded order processing
4. Choose the Order processing appearance you prefer for your website (e.g., a button that shows a modal window over the page, or a button integrated within the content on the page)
5. Click on Copy code to copy your integration code

Integrating an interactive Eventbrite order processing on your Webflow website

You have the option to take the integration code from Eventbrite and paste it into an integration element anywhere on your website — however, the embedded order processing will remain static (i.e., not change), therefore, you will need to manually update the integration code each time you wish to embed an order processing for a different event. This approach might be suitable if you only intend to embed an Eventbrite order processing for a single event, but not if you handle multiple events.

Here, you will learn how to integrate an interactive Eventbrite order processing on your site. By utilizing the Webflow CMS and dynamic integrations, you can design an order processing layout that recurs for all the events in your CMS Collection. 

This will be broken down into 3 steps: 

1. Establish a Collection field for your event IDs 
2. Set up a dynamic integration 
3. Include your event ID to your event in the CMS

Important: Ensure that you have set up a CMS Collection (e.g., “Events,” “Meet-ups,” etc.) and created at least 1 event Collection item for your event. The CMS even provides an Events template to guide you in configuring your Collection.

Establish a Collection field for your event IDs 

Initially, you must establish a CMS Collection field to save your Eventbrite event IDs (i.e., the distinct identifier for the Eventbrite integration): 

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

Set up a dynamic integration

Dynamic integrations only function with dynamic content, implying that you can only attach them on Collection pages or within a Collection list on a static page. Since you are referencing your Events Collection, you will need to link your integration to the Collection page associated with your Events Collection, or connect a Collection list to your Events Collection. 

To set up your dynamic integration:

1. Proceed to the Add panel > Advanced
2. Insert an integration element to the canvas
3. Paste your Eventbrite integration code in the code editor
4. Locate the eventId in the integration code and select the ID number between the single quotation marks (e.g., 681294671627) 
5. Copy the ID number and keep it highlighted
6. Tap on Add field
7. Choose the Collection field you created for your event ID (e.g., “Eventbrite event ID”)
8. Select Save & close 

‍

Include your event ID to your event in the CMS 

Lastly, incorporate your event ID to your event: 

1. Access the CMS panel > Events Collection (or any chosen name for your Collection) 
2. Select your event Collection item 
3. Paste the ID number from the integration code (e.g., 681294671627) into the Collection field you designated for your event ID (e.g., “Eventbrite event ID”)
4. Click on Save

You can follow these steps for any events where you desire to include an interactive order processing — copy the ID from the Eventbrite integration code and add it to your event ID Collection field in each Collection item. 

Once prepared, publish your website to experience your newly integrated Eventbrite order processing in operation. 

Professional hint: You can apply conditional visibility on Collection pages and within Collection lists to conceal the integrated order processing for events lacking an event ID. 

Important: Your Eventbrite order processing won’t display on the Designer canvas — that is, you won’t be able to preview the processing in the Designer, and a placeholder will show instead. After publishing or exporting your website, the processing will be visible (i.e., shown) where you positioned it. If you need to preview the processing before launching your website on a custom domain, you can publish your site to the webflow.io staging subdomain.