Event widget - Hipsy Docs

With the Hipsy event widget you can show your events as a list, grid or calendar on any website. Visitors can view the event details and buy tickets without leaving your website, and payments always go safely through Hipsy. You only need to paste a small code snippet on your website.

Get your embed code

Log in to your Hipsy dashboard.
Go to 'Organisatie' in the menu and open the tab 'Add-ons'.
Add the domain(s) of your website on which the widget may be used, without https://, www or a page name. For example: mywebsite.com.
Click on 'Embedcode genereren' to create your widget key.
Choose the layout, colours and language. The preview shows the result directly.
Copy the embed code and paste it on your website.

The embed code looks like this:

<script src="https://cdn.hipsy.nl/sdk/v1/hipsy-events.js"></script>
<hipsy-event-widget
    organisation="your-organisation-slug"
    widget-key="your-widget-key"
></hipsy-event-widget>

The widget key is not an API key. It only gives access to the public events of your organisation, and only on the domains you added.

Wix and other page builders

Some page builders, like Wix, load the widget from another domain. In that case the domain verification fails. You can disable domain verification on the 'Add-ons' page.

Attributes

You can change the widget by adding attributes to the <hipsy-event-widget> element.

Attribute	Required	Description	Default
organisation	required	The slug of your organisation
widget-key	required	The widget key from the 'Add-ons' page
display	optional	Can be either `list`, `grid` or `calendar`	`grid`
calendar-type	optional	Layout of the calendar view. Can be either `hours` or `sections`	`hours`
theme	optional	Can be either `light`, `dark` or `auto` (follows the light or dark mode of the visitor)	`light`
lang	optional	Language of the widget: `en`, `nl`, `de`, `fr` or `es`. If empty, the language of your page or the browser is used	(auto)
routing	optional	Shows the opened event in the URL of your page, so visitors can share it. Can be `hash`, `query` or `disabled`	`hash`
period	optional	Which events to show. Can be either `upcoming`, `past` or `all`	`upcoming`
limit	optional	The number of events to load at once

The lang attribute only changes the texts of the widget itself. Event titles, descriptions and ticket names are always shown as you entered them in Hipsy.

Use at most one widget with routing enabled on a page, because all widgets on a page share the same URL.

Styling

The widget uses Shadow DOM, so the styles of your website don't affect the widget. You can change the colours, corners and fonts with CSS variables:

<style>
hipsy-event-widget,
hipsy-event-drawer {
    --hipsy-primary: #009c51;
    --hipsy-background: #ffffff;
    --hipsy-foreground: #1d1b16;
    --hipsy-border-radius: 16px;
    --hipsy-font-body: 'Helvetica Neue', sans-serif;
    --hipsy-font-heading: Georgia, serif;
}
</style>

By default, the widget uses the font of your website. The colour settings on the 'Add-ons' page add this <style> block to the embed code for you.

Check the Hipsy help center for more information and tips.