Embedding Ticket Widgets on Your Website

Hi.Events widgets put your tickets, lineup, schedule or upcoming events on your own website. Visitors buy tickets without leaving your page, and prices and availability always match what’s in Hi.Events.

How to Get There

For one event:

1. Open your event
2. Click Widget Embed in the left sidebar (under Integrations)

For a list of all your events:

1. Open your organizer
2. Click Widget Embed in the left sidebar (under Tools)

The editor has your settings on one side and a live preview on the other. Switch the preview between desktop and mobile to check both.

Widget Types

On an event, pick the type at the top of the editor:

The Lineup and Schedule widgets use what you’ve added under Lineup & Schedule in the event sidebar. If the lineup or schedule is hidden on your event page, the widget will be empty, and the editor tells you so. See Where Your Lineup and Schedule Appear.

Events Widget

The organizer’s Widget Embed page builds an Events Widget: a list of your upcoming events that visitors can buy from. Pick the layout at the top of the editor: List, Grid or Compact. Then, under Events, you choose:

• Category: only list events in one category, or All events
• Per page: how many events show before visitors click Show more events
• When someone picks an event: Show tickets (opens them in a pop-up on your site) or Open event page
• Include a Past events tab

Customising a Widget

Settings are grouped under Customise. Which groups appear depends on the widget type.

Sections and Pop-Up Content

For Tickets, Sections lets you show more than the ticket list. For Button, the same choice is called Pop-up content and sets what the pop-up shows. Turn on extra sections and drag to reorder them: Event title, date and image, Description, Location, Organizer, Lineup, Schedule and Custom homepage sections. Tickets is always shown.

Switch on Show lineup strip above tickets to add a short strip of your lineup above the tickets.

Tickets

• Only these categories and Only these tickets: show part of your range, for example one widget for general admission and another for VIP. Leave both empty to show everything that’s on sale
• Hide category names: drop the category headings
• Date: on a recurring event, pin the widget to one date, or leave it on All dates to let visitors choose. Lineup and Schedule widgets on a recurring event have the same choice in their own Date group

Promo Code

• Promo code: applied automatically when the widget loads. Useful for a partner’s site or a members’ page
• Hide “Have a promo code?”: removes the promo code link

Appearance

Choose Match event page (on an organizer, Match my page) to use the colours and font from your homepage design, or Custom to set your own colours for Buttons, Button text, Background, Text and Borders, and a font. You can also set the Corner radius, and the Padding on every type except Button.

Checkout & Language

On Lineup and Schedule widgets this group is called Language & sizing, and only has Language and Fit height to content.

Saving Widgets

You can copy the code straight away, but saving a widget gives you more:

1. Click Save widget
2. Give it a Name. “Only your team sees this”, so call it something like “Homepage” or “Newsletter”
3. Click Save widget

Saved widgets appear in the Widget switcher at the top of the editor, under Saved widgets. Choose New widget to start another one. It starts from the settings you have open, so change what you need before saving.

Editing a saved widget updates every page that uses it. Change the settings, click Save changes, and your site picks them up without you touching its code. Some changes do need new code on your site: the widget type, a Button’s text, colours or corner radius, and Fit height to content on the other types. A Button set to Match event page also needs new code after you change your homepage design. When that happens the editor says Copy the new code to your site. Copy it and replace the old code.

Use the ⋯ menu next to the switcher to Rename or Delete a saved widget. Deleting it doesn’t break pages that embed it: they keep showing the widget, but with only the settings written in their own embed code.

Widget Stats

Each saved widget shows how it’s doing:

• Views: how many times it was loaded. Repeat loads by the same visitor within a few minutes count once, and loads by signed-in team members don’t count. For a Button, a view is each time the pop-up opens
• Orders: completed orders placed through it
• Conversion: orders as a share of views
• Revenue: sales through it, minus refunds. Only shown to team members who can see financials

Saving a separate widget for each place you use it, such as your homepage and a partner’s site, tells you which one sells.

Adding It to Your Site

Open the Add to your site panel and choose Where is your website?: Any website (HTML), WordPress, Webflow, Squarespace, Wix, Shopify, Framer or React / Next.js. The panel shows the steps for that platform with the code ready to paste.

For Any website (HTML) there are two steps:

1. Add this to your site’s <head>: a script tag that loads the widget
2. Paste this where the widget should appear: the widget itself

Site builders get a single block of code to paste into their custom HTML or embed element. For React and Next.js, you get a component to save as HiEventsWidget.jsx and render where the widget should appear.

Copy for AI agent copies step-by-step instructions you can paste into ChatGPT, Claude, Cursor or your site builder’s AI assistant, so it can add the widget for you.

For a longer walkthrough of each builder, see our guides for WordPress, Wix, Squarespace, Webflow, Shopify and Framer.

Example Code

A saved ticket widget looks like this:

<script async src="https://app.hi.events/widget.js"></script>
 
<div class="hievents-widget"
  data-hievents-id="123"
  data-hievents-widget="wgt_AbC123xyZ9kLm"
></div>

Always copy the code from the editor rather than typing it, so your event, widget and settings are filled in correctly.

Tracking Sales in Your Analytics

When an order completes, the widget fires an hievents:order-completed event on your page. Its detail holds eventId, currency, total, quantity and status. This only works when Checkout opens in is set to Pop-up on your site, because a new tab isn’t part of your page.

This example sends purchases to Google Analytics 4. Add it after the embed code:

<script>
  window.addEventListener('hievents:order-completed', function (event) {
    var order = event.detail;
    if (order.status !== 'COMPLETED') {
      return;
    }
    if (window.gtag) {
      gtag('event', 'purchase', { currency: order.currency, value: order.total });
    }
  });
</script>

The editor’s Track sales in your own analytics section has a version that sends to Meta as well. Orders waiting for an offline payment also fire the event, with a different status, which is why the example checks for COMPLETED.

The widget also fires hievents:checkout-opened, hievents:checkout-step (with the step, such as details or payment, in detail.step) and hievents:checkout-closed, so you can track where buyers drop off.

Affiliate Links, Promo Codes and UTM Tags

If the page the widget is on was opened with aff, promo_code or utm_source, utm_medium, utm_campaign, utm_term or utm_content in its address, the widget passes them on to Hi.Events. Affiliate sales and promo codes in links work the same on your site as on your event page.

Embed Code Reference

The editor writes these attributes for you. You only need this table if you want to change the code by hand.

In React, Vue and other frameworks you can use the <hievents-widget> element instead of the div. It takes the same attributes without the data-hievents- prefix, except that data-hievents-id becomes event-id.

Older Embed Codes

Embed codes copied before saved widgets existed keep working, and you don’t need to replace them. In older codes, data-hievents-locale="en" together with data-hievents-widget-version="1.0" is ignored, so those widgets now follow the visitor’s language. To set a language on purpose, choose it under Language in the editor and copy the new code.

Tips

• Run a full test checkout on your live site before you announce it. See Testing Your Checkout
• Prices, availability and sold-out states update by themselves. You never need to re-copy the code for those
• On Wix and Framer, which show embeds in a fixed-size box, make the box tall enough or set Checkout opens in to New tab
• Reserved seating works in the ticket widget too. See Selling Reserved Seats
• Widget not showing? Check that the script tag is on the page once and that nothing (such as a WordPress security plugin) strips scripts. If you’re still stuck, email [email protected] with the page address

Last updated 20 October 2026