Integrations & API

Embed Widgets

Reference for the BrightStar ticket widget: the code, layouts, themes, options and the iframe version.

4 min readUpdated 2026-10-01

The BrightStar ticket widget shows one event — its date, venue, live prices and availability — on your own website, with a Get Tickets button that opens ticket selection in a window over your page. It is set up per event in the dashboard (Share → Embed & Track → Ticket Widget) and needs the event to be on Elevate or Amplify. For the step-by-step guide, including WordPress, Squarespace and Wix, see Selling tickets from inside your own website. This page is the reference.

The code

html
<div data-brightstar="YOUR-EVENT-ID"></div>
<script src="https://www.brightstarevents.com/embed.js" async></script>

Setting it up

Everything is chosen in the dashboard; the code never changes.

  1. 1Open the event in the BrightStar dashboard → Share → Embed & Track → Ticket Widget.
  2. 2Choose the layout, theme and button text, and watch the live preview.
  3. 3Add the websites allowed to show it.
  4. 4Copy the script code (or the iframe code) and paste it into your page.

Layouts and themes

Four layouts: Compact card (image, date, venue, price range and button, up to 440 pixels wide), Full card (adds a short description and each ticket type with its price and sold-out state), Ticket list (no image; each ticket type, what's left and the button) and Button only. Three themes: Light, Dark, and My brand colours, which uses the event's Custom Design colours and follows them when they change. The button colour and text are yours to set. All of this is chosen in the dashboard and read live, so nothing in the code needs changing when you change it.

Per-placement options

Optional attributes on the div override the dashboard settings for that one placement — useful for showing the same event as a card on one page and a button on another.

The iframe version

html
<iframe src="https://www.brightstarevents.com/embed?event=YOUR-EVENT-ID" title="Tickets" width="100%" height="560" style="border:0;max-width:440px" loading="lazy"></iframe>

For site builders that strip scripts. It renders the same widget; its button opens the BrightStar event page in a new tab. Set the height to the value the dashboard suggests for your layout. The same per-placement options work as query parameters: style, theme, image=0 and desc=0.

Allowed websites

Organizers can list up to 10 websites allowed to show their widgets (one list for all their events). A listed domain covers its subdomains. With a list in place, the widget refuses to load anywhere else, for both the script and the iframe version. With no list, any website may show it, and the dashboard warns about that. The code itself carries no key or secret — only the public event ID.

Performance and accessibility

The script is a few kilobytes with no framework and no other downloads, loads asynchronously, and renders inside its own shadow root so the host page's CSS can't distort it. It picks up widgets added to the page after it loads, which is how many site builders insert content. The ticket window is a proper dialog: focus moves into it, stays there, returns to the button on close, and Escape closes it. On screens narrower than 640 pixels it opens full screen.

Common questions

What do I paste into my website?

A div carrying your event's ID and one script tag, both copied from the event's Ticket Widget page in the BrightStar dashboard. Builders that strip scripts take the iframe version instead.

Read more

The ID is public, the same one in your event's links, so the code is safe to share with whoever manages your website.

Can I show the same event differently on two pages?

Yes. Add data-style, data-theme, data-show-image or data-show-description to the BrightStar widget's div on one page to override the dashboard settings there only.

Read more

For example, the full card on your event's own page and data-style="button" in your blog post about it.

Can the widget match my website's colours?

Yes. The BrightStar widget comes in Light or Dark, with your own button colour and text, or My brand colours to use the event's Custom Design colours.

Read more

My brand colours follows Custom Design, so updating the event's colours updates the widget on your site too.

Do BrightStar widgets work on mobile?

Yes. The BrightStar widget fits the width you give it, and on screens narrower than 640 pixels the ticket window opens full screen with a close button.

Read more

Your page's scrolling is paused while the window is open and restored when it closes, so the buyer returns to the same spot on your page.

Ready to get started?

Create your first event on BrightStar — it’s free.