Back to Documentation

Eventbrite on Your Site

Share your events around the web with our customizable Widget tools!

Each of our API client libraries come bundled with functions that make it easy to share Eventbrite content on your site:

Links Buttons Tickets Registration Lists Calendars Countdown

Links

Providing a link to an event page is by far the easiest way to share an event, and to direct prospective attendees to our Order workflow.

Event page URLs are available via the url attribute on each Event object returned from our API.

You can construct your own HTML links by copying the following HTML code, and then substituting your related event_id. Or, you can automate this work in your language of choice by taking advantage of our API client code.

Our API clients will accept optional link_text, and link_color parameters on this method to help you further customize the link appearance.

Example Code

<a href="http://www.eventbrite.com/event/4653432542?ref=elink" target="_blank" style="color:#000000;">Eventbrite API - Office Hours</a>

Buttons

Register for Eventbrite API - Office Hours on Eventbrite

Buttons are another great way to encourage users to sign up for an event:

Construct your own HTML buttons by copying the following HTML example code, and then swapping in your event_id.
Or, you can generate button links automatically using the API client example code, also available below.

Event owners can customize the button text and color via the Promote section of our web-based event-management tools.

Example Code

<a href="http://www.eventbrite.com/event/4653432542?ref=ebtn" target="_blank">
  <img border="0" src="http://www.eventbrite.com/custombutton?eid=4653432542" alt="Register for Eventbrite API - Office Hours on Eventbrite" />
</a>

Ticket Previews

Ticket Widgets help you to display a preview of an event’s available ticket selection, allowing attendees to initiate an order on your site before confirming the order on Eventbrite.com.

Take a look at our workflows page to learn a bit more about how this process works.

Our ticket widgets use an iframe to keep your site up to date. You can display this widget by copying the following HTML example code, or use one our API clients to generate the iframe code automatically.

Example Code

<div style="width:100%; text-align:left;" >
  <iframe src="http://www.eventbrite.com/tickets-external?eid=4653432542&ref=etckt&v=2" frameborder="0" height="256" width="100%" vspace="0" hspace="0" marginheight="5" marginwidth="5" scrolling="auto" allowtransparency="true"></iframe>
</div>

Event Page Previews

You can optionally embed an entire event page in another website via an iframe.

WARNING: Eventbrite event pages contain a lot of great content!

Maps, calendars, and social sharing tools can all take up quite a bit of space, so embedding a complete event page in an external site is not for everyone. We did not include an example here, since this page does not have enough room to fit all that good stuff in.

Example Code

<div style="width:100%; text-align:left;">
  <iframe src="http://www.eventbrite.com/event/4653432542?ref=eweb" frameborder="0" height="1000" width="100%" vspace="0" hspace="0" marginheight="5" marginwidth="5" scrolling="auto" allowtransparency="true"></iframe>
</div>

Event Lists

If you would like to display a list of events that will automatically keep itself up-to-date, then you’re in luck!

The following event list example code can be modified to display publicly available Event content (via our event_search API method), all events from a specific Eventbrite User (via user_list_events), or all events that are associated with a specific Organizer Profile page (organizer_list_events).

Make sure to sub in your own API Key so that you don’t experience any loss of functionality due to API key rate limiting.

You can also provide a custom function for converting each event listing into a format of your choosing, allowing you to quickly build event lists that look great regardless of your site’s design requirements.

For more information on how to customize your event listings, visit any of our language-specific API client library pages.

Example Code

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript' src="http://evbdn.eventbrite.com/s3-s3/static/js/platform/Eventbrite.jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
  Eventbrite({'app_key': "P47XBRPQTVS7YF64Z5"}, function(eb){
    eb.organizer_list_events( {'id': 561037966, 'statuses': "live,started"}, function( response ){
      document.write(eb.utils.eventList( response, eb.utils.eventListRow ));
    });
  });
});
</script>

Event Calendars

Share your upcoming events in a calendar format with the following HTML code. You’ll just need to replace the example event_id with the id that is associated with your upcoming event.

This widget uses an iframe to keep in sync with your Eventbrite data, helping you showcase all of your upcoming events in a single unified calendar display.

Event owners can customize the calendar colors and content in the Promote section of their web-based event-management tools.

Example Code

<div style="width:195px; text-align:center;">
  <iframe src="http://www.eventbrite.com/calendar-widget?eid=4653432542" frameborder="0" height="382" width="195" marginheight="0" marginwidth="0" scrolling="no" allowtransparency="true"></iframe>
</div>

Event Countdown

Count down the days to your next big event launch with the following example code. As with our other HTML examples, you’ll need to replace the example event_id with the id associated with your upcoming event.

This widget uses an iframe to stay up-to-date as your event day approaches.

Event owners can customize the countdown colors and content in the Promote section of their web-based event-management tools.

Example Code

<div style="width:195px; text-align:center;">
  <iframe src="http://www.eventbrite.com/countdown-widget?eid=4653432542" frameborder="0" height="479" width="195" marginheight="0" marginwidth="0" scrolling="no" allowtransparency="true"></iframe>
</div>