Embed Widgets

When someone lands on your retreat center's website, or the page you built for a Friday night kirtan, you don't want the ticket-buying part of that visit to happen somewhere else. Embed widgets let you display BrightStar events and sell tickets directly on your own site, so a visitor can browse, pick a ticket, and check out without ever leaving your domain. That matters most at the exact moment someone is reading about your ceremony or sound bath and deciding whether to commit — a redirect to another site right then is often when momentum breaks and the tab gets closed instead. BrightStar gives you three different widget types so you can choose how much of that experience lives on your page, depending on whether you're listing many events, spotlighting one, or just need a single button.

Each widget type is suited to a different spot on your site. The Event List Widget shows all of your events, or a filtered set of them, with search, filter, and pagination built in — the right choice for a page like your events calendar, where someone wants to browse everything you offer. Its size is responsive, meaning it auto-fits whatever container you place it in, so you don't need to measure anything. The Single Event Widget shows one event in full, including ticket selection and checkout, and is meant for a dedicated event page — say, the page describing your October yoga retreat. It's configurable in size but needs a minimum width of 300 pixels to render its ticket details legibly. The Checkout Button is the lightest option: it shows only a "Get Tickets" button, which opens the checkout modal on click. Reach for this one when you already have a page written — a blog post, an email landing page — and just need a way for people to buy without redesigning anything around it.

BrightStar widgets carry three groups of settings. Theming controls appearance: theme can be dark, light, or auto; primaryColor accepts any hex value so you can match your brand; borderRadius adjusts how sharp or rounded the cards look; and fontFamily can inherit your site's font, use a system font, or a custom one. Behavior settings control how the widget acts rather than how it looks — openInNewTab defaults to false, so checkout opens as a modal rather than sending visitors to a new tab, while showDescription and showVenue default to visible and showOrganizer defaults to hidden. Filtering settings control which events actually appear: you can restrict a list to one category, such as retreat, to specific tags like yoga or meditation, or to a date range using dateFrom and dateTo. Combined with maxEvents and showPastEvents from installation, this means you can build a list widget that shows exactly the slice of your calendar relevant to the page it sits on — upcoming retreats only, for instance, without last month's kirtan nights cluttering the view.

The widget changes layout depending on the visitor's screen size rather than rendering the same way everywhere. Above 768 pixels wide, it shows a grid of two to three columns, with full event cards that include images, and checkout opens inline as a modal over the page. Below 768 pixels, it switches to a single-column list of more compact cards, and checkout takes over the full screen instead of appearing as a modal. This split exists because a multi-column grid with large images that reads well on a desktop browser gets cramped on a phone, and a modal checkout can be awkward to scroll and close on a small screen — a full-screen checkout gives a visitor more room to enter ticket details without the page shifting under their thumb.