Skip Main Navigation

How to embed Eventbrite’s classic widgets on your website


Updated by Antwonne D. on 24/01/2018

Feature Availability: This article discusses a feature only available for Eventbrite Professional and Premium organizers.
Learn more about upgrading

If your eblink{event doesn't qualify=>} for our eblink{new embedded checkout button or ticket listing=>}, you can pick from our time-tested, classic widgets. Unlike the new embedded checkout, classic widgets don’t let attendees complete registration on your website. They'll reach your Eventbrite event listing to finish registration. But classic widgets still present great way to drive ticket sales. We have several options for you (including Ticket Listing, Button, and Calendar widgets). From your event's Manage page, go to "Website Integrations" and select one of our widgets to get started.

TIP: Don't have your own website or blog? eblink{Set up your organiser profile page=>} so potential attendees can see all your live public events on a single page. Also eblink{check out our partnerships with website services on Eventbrite Spectrum=>}.

NOTE: Your outside website must support iframes in order to embed classic widgets. users, for instance, will need install a eblink{plugin=>} allowing you to embed iframes in your site. However, eblink{>} users can use the eblink{Multi Event=>} and eblink{Single Event=>} Themes. Also, widgets cannot be used if your event is eblink{invitation-only=>}.

1. Learn which website integration is right for you.

We’ve launched a new embedded checkout that connects attendees more closely to your brand. eblink{Add the new embedded checkout as a button or ticket listing=>} and attendees register without ever leaving your website. eblink{Learn which website integration is right for you=>}.

TIP: The new embedded checkout is optimised for mobile devices, so that attendees can easily buy tickets — no matter how they’re viewing your website

NOTE: If you qualify for the new embedded checkout, you can still access our classic Event Calendar, Countdown, and Text Link widgets.

2. Learn for which checkout your current event qualifies.

Not all of Eventbrite’s features work with the new embedded checkout right now. Check if your event qualifies by going to Website Integrations on the Manage page (Steps 3 & 4). If your event qualifies, you'll see the new embedded checkout at the top of the page.

NOTE: eblink{Read our troubleshooting article=>} to learn what features don’t allow you to use the new embedded checkout right now.

3. Go to your Manage page.

After you eblink{log in=> target=_blank} and eblink{create an event=>}, find your event on the Manage Events page, then select "Manage."

4. Go to "Website Integrations" (under Invite & Promote).

Go to "Website Integrations" (under Invite & Promote).
Go to "Website Integrations" (under Invite & Promote).

From the options menu, scroll to the middle until you see the "Invite & Promote" section.

NOTE: If your eblink{event schedule has multiple dates/times=>}, you can add a widget to your website and promote one or all of the events in your overall schedule. Just choose a date from the "Individual Event Selector" at the top of the Manage page.

5. Select one of our classic widgets.

Select one of our classic widgets.
Select one of our classic widgets.

If your event doesn’t qualify for eblink{the new embedded checkout=>}, you’ll see a list of our classic widgets and a box labelled “Coming Soon” with the title “Add Checkout to Your Website.” You can choose from several classic widgets: • Ticket Listing (classic): Add a ticket listing so attendees can select their tickets and start the registration process from your website. • Button (classic): Add a button that will take attendees straight to your event listing on Eventbrite. • Event Calendar (classic): Display a calendar that will show all your live upcoming events. Attendees can click on a highlighted date in the calendar to go that event listing. • Countdown (classic): Display a timer that will count down the days until your event takes place. It will also have a link that takes attendees to your event listing. • Text Link (classic): Add a custom link that will take attendees straight to your event listing on Eventbrite.

EXAMPLE: Allison has several events happening over the next few months, so she's adding a Calendar widget to her website so people can easily get to those event pages.

TIP: If the box is instead labelled "New," your event qualifies for our new embedded checkout. To learn how to set up our new button and ticket listing, eblink{click here=>}. For other classic widgets (Event Calendar, Countdown, Text Link) continue with this article.

PRO TIP: We no longer offer the (classic) event page widget. Our research found that — compared to other widgets — people were less likely to complete their registration when using the event page listing.

NOTE: Some Eventbrite features will limit the widgets you have available to use. For example, if you have Group Registration activated, your event will not have access to the Ticket Form widget.

6. Customise your widget.

Customise your widget.
Customise your widget.

You can customise certain elements of most of our widgets (like the colour and text). Change the button text to "Buy Now!" or change the colours of the Event Calendar widget to match your website. You'll see a preview of the widget as you're making edits.

TIP: Your changes aren't saved automatically, so make sure to hit "Save" so you don't lose any of your changes.

PRO TIP: If you're trying to match a colour from another web page, check out eblink{Palleton=>}, a free online tool for colour palette design.

7. Click "Code" and copy the code that's generated.

Click "Code" and copy the code that's generated.
Click "Code" and copy the code that's generated.

Hit the "Code" tab to view the code that's generated for your widget. Then copy the code so it's ready to be pasted on your website.

8. Paste the code onto your website or blog.

Once the code has been copied, paste it into the HTML for your personal website or blog. The widget should now appear on your site, and visitors can easily start buying tickets and go straight to your event listing!

PRO TIP: eblink{Learn more about how to use Eventbrite's promotional tools=>}.

9. Recommended: Test your embedded checkout.

People use the internet through a wide variety of devices and screen sizes. To be sure people can buy tickets, test your website — at least on the four most popular browser and device combinations: 1. Chrome on desktop (Mac or Windows) 2. iOS Safari on mobile (iPhone or iPad) 3. Chrome on mobile (any Android phone) 4. Internet Explorer on desktop (Windows) 5. Safari on desktop (Mac) 6. Firefox on desktop (either Mac or Windows) To test: 1. View the embedded checkout on your website in each browser/device. 2. Resize the browser to learn what customers with different screen sizes will see. Look for issues where • Other parts of your website overlap with our embedded checkout • The screen isn’t tall enough to show all your eblink{ticket types=>}. Buyers can scroll within the embedded checkout, so test the scrolling. 3. Place an order through the embedded checkout with your email address. • Make sure other parts of your page don't stop the checkout • Complete the checkout and check your email inbox for an eblink{order confirmation email=>} • Go back to the embedded checkout and start a new order. Make sure you can place another order without refreshing your page.

TIP: eblink{Our new embedded checkout button and ticket listing options=>} are optimised for mobile devices.

PRO TIP: If your website is a vital part of your business, evaluate the benefits of investing into a professional testing tool like eblink{Browserstack=>}.

Related articles

Still have questions? Our team can help. Contact us.