Embed widgets allow you to display events and sell tickets directly on your own website. Visitors can browse and purchase without leaving your domain.
Widget Types
Event List Widget
Displays: All or filtered events
Features: Search, filter, pagination
Size: Responsive (auto-fit container)
Single Event Widget
Displays: One event with details
Features: Ticket selection, checkout
Size: Configurable (min 300px width)
Checkout Button
Displays: "Get Tickets" button only
Features: Opens checkout modal on click
Size: Inline, customizable
Installation
html
<!-- Event List Widget -->
<div id="brightstar-events"></div>
<script src="https://cdn.brightstarevents.com/widget.js"></script>
<script>
BrightStar.init({
container: "#brightstar-events",
organizer: "your-org-slug",
theme: "dark", // dark | light | auto
maxEvents: 10,
showPastEvents: false
})
</script>
<!-- Single Event Widget -->
<div id="brightstar-event"></div>
<script>
BrightStar.event({
container: "#brightstar-event",
eventId: "evt_abc123"
})
</script>Widget configuration preview
Interactive component coming soon
Customization Options
Theming
theme: "dark" | "light" | "auto"
primaryColor: "#6B3FA0" (any hex)
borderRadius: "8px"
fontFamily: "inherit" | "system" | custom
Behavior
openInNewTab: false (default: modal)
showDescription: true
showVenue: true
showOrganizer: false
Filtering
category: "retreat" (show only retreats)
tags: ["yoga", "meditation"]
dateFrom: "2025-01-01"
dateTo: "2025-12-31"
Responsive Behavior
Desktop (>768px) • Grid layout (2-3 columns) • Full event cards with images • Inline checkout modal
Mobile (<768px) • Single column list • Compact cards • Full-screen checkout
Use theme: "auto" to automatically match your site's dark/light mode. The widget respects prefers-color-scheme media query.