Embedding the Ticket Widget

The ticket widget lets you embed a ticket purchase form directly on your own website — so attendees can buy tickets without leaving your site.

How to Get There

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

Configure the appearance, then copy the two generated snippets into your website:

Embed Script — place this in the <head> of your website
Embed Code — paste this where you want the widget to appear

How It Works

The embed code renders your ticket selection inside your page. The widget auto-resizes to fit its content by default, so it adapts as tickets expand, collapse, or change.

When the buyer continues to checkout, it opens in a full-screen modal over your page — they never leave your site. If you prefer, checkout can open in a new tab instead (see data-hievents-checkout below); the widget also falls back to a new tab automatically in environments where the modal can’t be shown.

Example Embed Code

In the <head>:

<script async src="https://app.hi.events/widget.js"></script>

Where you want the widget to appear:

<div class="hievents-widget"
     data-hievents-id="123"
     data-hievents-primary-color="#7b5db8"
     data-hievents-primary-text-color="#000000"
     data-hievents-secondary-color="#7b5eb9"
     data-hievents-secondary-text-color="#ffffff"
     data-hievents-background-color="#ffffff"
     data-hievents-widget-type="widget"
     data-hievents-widget-version="1.0"
     data-hievents-locale="en"
     data-hievents-padding="20px"
     data-hievents-autoresize="true"
     data-hievents-continue-button-text="Continue">
</div>

The Widget Embed page generates this for you with your event ID and chosen colors already filled in.

Property Breakdown

Property	What it does
`data-hievents-id`	Required. The ID of the event to sell tickets for.
`data-hievents-primary-color`	Buttons and interactive elements.
`data-hievents-primary-text-color`	Text on primary-colored elements.
`data-hievents-secondary-color`	Secondary accents (e.g. quantity selectors).
`data-hievents-secondary-text-color`	Text on secondary-colored elements.
`data-hievents-background-color`	The widget’s background.
`data-hievents-widget-type`	Leave as `widget`.
`data-hievents-widget-version`	The widget version — leave as generated.
`data-hievents-padding`	Space around the widget content, e.g. `20px`. The Widget Embed page fills this in as `20px`; if you remove the attribute entirely the widget falls back to `10px`.
`data-hievents-autoresize`	`true` (default) grows/shrinks the widget to fit its content; set to `false` to control the height yourself.
`data-hievents-continue-button-text`	Custom label for the checkout button.
`data-hievents-locale`	Included in the generated snippet, but currently has no effect — see below.
`data-hievents-checkout`	Optional. Set to `new-tab` to open checkout in a new browser tab instead of the full-screen modal.

The widget’s language isn’t controlled by the embed code — it follows the visitor’s own browser language (or the language they’ve previously chosen on your Hi.Events pages), falling back to English.

All appearance settings live in the embed code itself — they aren’t stored in Hi.Events. To change them later, adjust the attributes directly or copy a fresh snippet from the Widget Embed page.

Tips

Test the widget on your site before going live — including a full test checkout
Ticket prices and availability update automatically; you never need to re-copy the embed code for those
Works on any website that supports HTML embeds; a React snippet is also available on the Widget Embed page

Managing Your Team Webhooks & Integrations