How to Embed a Ticket Widget on Your Website or Blog

With our embeddable IFrame, you can now sell your tickets directly on your own website or blog. To help you get started, we’ve put together a quick walkthrough to show you what the widget looks like (…really good), what it does (…everything you need), and how to set it up for your own events now. And if you don't know what any of this means - don't panic - we have a bit of an intro intro with examples of widgets coming up too.

What's a widget? What’s an IFrame?

Say you have a blog, and you want to add something to it that's going to display your current tweets or a 'like' button for your Facebook page. That "something" is better known as "widget". You need a "Twitter Widget" to display your tweets or a "Facebook Widget" to display your Facebook Page information. Basically, it's any additional external element you want to add to your blog (or a site).

An IFrame (short for ‘inline frame’) is an HTML element that can be embedded inside an HTML document. You can copy this HTML element from a website and place it (or "embed it") on your website with a piece of code. To make a simple example, when you use a YouTube video on your blog, an IFrame element code is included into the code of your blog's HTML. See the video below? We've just copied and pasted the IFrame code into this page in order for the video to appear.

What Billetto’s widget does.

Below is an example of the widget in action. The example below is for tickets to an event by our friends at Party like Gatsby displayed on their website.

The Billetto widget displays the name, type and cost of the tickets listed for your event on the site. If you have multiple ticket types, or Merchandise and Vouchers on sale, then these will all be listed within the widget. Next to each ticket the widget displays the status or cost of that ticket (e.g. if that ticket is not on sale yet it will say ‘Coming Soon’, and if the ticket is sold out it will say… ‘Sold Out’). If you need to update the tickets for your event (e.g. allocation, on-sale date, or adding new ticket types), simply do this as normal through your My Events area on Billetto – the widget will update automatically. You only need to embed it once.

There is also a handy ‘Get tickets’ button which links directly to the purchase page for the ticket on Billetto. No added clicking. Straight to the business.

Why this is good news.

The new widget gives visitors to your own website or blog a quick and simple way to purchase tickets to your event. This also means that you can package the ticket buying experience within the cuddly familiarity of your own website, potentially making it more enticing to regular visitors and patrons of your brand.

Of course, you will still benefit from traffic to your Billetto event page by our community and new visitors, links from Facebook event pages and links-in from other sources. The widget is a tool to increase the number of opportunities for people to buy a ticket for your event. The widget is the icing on the cake.

How to set it up.

For those of you familiar with basic blogging or website admin functions, embedding your IFrame widget will be a breeze. For everyone else – be warned – it may take a minute or two. Here’s the step-by-step:

1. Login to your Billetto account.

2. Hover over your name in the top right corner at any time and select ‘My Profile’ from the drop down menu. This will take you to a list of the events you’ve created which are currently active on the site.

3. Find the desired event and click the 'Manage' button to be brought to the event's admin page.

4. Find 'Share Event' in the menu on the left of the page and click it.

5. Click the 'Ticket Widget' button and a text box will appear with the embed code.

6. Copy the embed code provided to your clipboard or similar (you'll need this in a sec).

7. Head over to the editor for the post or page where you’d like the widget to appear. Enter the Text editor mode (sometimes called ‘source code’ mode, or simply the ‘<>’ button).

8. Make sure you’re in the Text editor, and paste the embed code to the desired position on the post/page. The widget will have a set height to fit the corresponding event’s ticket info, and will adjust to the full width of the page automatically.

9. Preview the new post/page, find the widget and double check that the listed ticket details are correct and that the ‘Get Tickets’ button is linking to the correct purchase page.