Events & ticket widgets
Two drop-in widgets show live UniClubs data on your website with a copy-paste snippet. They’re configured with HTML attributes and need no API key.
Events widget
Turn it on and generate the snippet under Settings → API & OAuth → Embed widget. The generator previews every option. The result looks like:
<div data-uniclubs-events
data-club-slug="your-club"
data-theme="light"
data-style="cards"></div>
<script src="https://uniclubs.ch/embed/uniclubs-events.js" defer></script>Only public, published events are shown. Members-only and staff-only events never appear in the widget, so you can’t leak an internal event by embedding it. Events you co-host with a partner club are included when they’re public; hide them with data-include-partner-events="false".
Options
| Attribute | Values | Default |
|---|---|---|
data-theme | light, dark, transparent | light |
data-style | cards, compact, list, featured (one large event) | cards |
data-columns | number of columns for cards | 3 |
data-max-events | up to 12 | 9 |
data-language | en, de | en |
data-accent-color | any CSS colour | #007bff |
data-show-image, data-show-description, data-show-location | false to hide | shown |
data-hide-header, data-hide-footer | true to hide | shown |
data-custom-title, data-custom-footer | text | — |
data-include-past, data-only-past | true | upcoming only |
data-date-range | next-7-days, next-30-days, next-90-days, this-month, next-month | — |
data-start-date, data-end-date | YYYY-MM-DD (overrides data-date-range) | — |
data-include-partner-events | false to hide co-hosted events | included |
data-powered-by | logo, text, none | logo |
Styling
The widget renders inside a Shadow DOM, so your site’s CSS can’t break it, but it also can’t restyle it. Theme, layout, and accent colour are the styling controls. If you want the events to look fully native to your site, fetch the data yourself instead (below).
Ticket widget
For ticketed events, the ticket widget shows the ticket types with prices and availability and a Get tickets button that opens checkout on UniClubs. Find the snippet on the event’s Tickets page in the panel. It needs guest checkout enabled, and only shows ticket types marked public.
<div data-uniclubs-tickets
data-club-slug="your-club"
data-event-slug="your-event"></div>
<script src="https://uniclubs.ch/embed/uniclubs-tickets.js" defer></script>It supports data-theme, data-accent-color, data-language, data-show-availability, data-hide-header, data-button-label, and data-powered-by.
Fetching events yourself
To render events with your own design, call the same public endpoint the widget uses. No key is needed, and it’s safe to call from the browser:
GET https://uniclubs.ch/api/external/v1/public/clubs/{clubSlug}/eventsIt returns the same public, published events (title, dates, location, image, registration type and deadline, link). It accepts include_past, only_past, start_date, end_date, and include_partner_events, and is rate-limited per visitor IP. The embed widget must be enabled for your club.
To include members-only events (e.g. on a logged-in members area), call GET /api/external/v1/events from your backend with an API key. Each event carries a visibility field so you can decide what to show to whom.