With the Holibiza events widget, you can showcase your organization's events on your own website. Visitors can view, search, and click through to more information without you having to manually maintain the list.
The widget is located in the Holibiza dashboard under your organization in Add-ons. There you can preview, adjust the display, and copy the embed code.
How to place the widget
- Click on Organization in the dashboard menu and open Add-ons.
- Add your website's domain under Allowed domains, for example,
yourwebsite.com. - (optional) Adjust the colors and settings.
- Click on Copy code.
- Paste the code on the page of your website where you want to display the events.
The widget only works on domains you have added. This prevents others from using your widget on another website without permission.
What can you configure?
In Holibiza, you can directly adjust the widget. The preview immediately shows what changes.
- Theme: light, dark, or automatic (follows your device settings).
- Display: grid, list, or calendar.
- Calendar format: grouped by section (time slots) or a 24-hour view per day.
- Colors: primary color, secondary color, background color, and text color.
- Routing: determines how the widget remembers the opened event details in the URL.
Changes are automatically saved. If you adjust the settings above, you need to copy and paste the widget code again on your website.
Adding embed code
Preferably always use the code from the Holibiza dashboard unless you know what you're doing. The code you copy in Holibiza looks like this example:
<script src="https://cdn.hipsy.nl/sdk/v1/hipsy-events.js"></script>
<hipsy-event-widget
organisation="your-organization"
widget-key="wcc_example"
></hipsy-event-widget>
You add this code to your website where you want the calendar to appear. It may vary by platform how this works. Here are a few links to commonly used platforms and the required components:
-
Wix:
- Custom Element - best option, paid Wix package required.
- Embed HTML - widget in an iframe, free but with some limitations. The events will appear much smaller within this iframe instead of across your entire screen. Getting an error message? Ensure that the iframe URL on Wix is also added in the Holibiza dashboard. This is
www-yourdomain-com.filesusr.com. Note the dashes between www or com (or nl).
-
Squarespace: Code blocks
-
Elementor: HTML widget
-
Divi:
- Add the entire code via a code block.
- You can also choose to load the
<script>tag in the<head>of the page via Integration Settings
-
Wordpress (Gutenberg): Custom HTML
Styling the widget on your website
Most styling options can be configured through the preview in the Holibiza dashboard. To make additional customizations, you can apply CSS to the widget. For example, you can customize the border-radius using CSS:
<style>
hipsy-event-widget,
hipsy-event-drawer {
--hipsy-border-radius: 20px;
}
</style>
You can customize the following CSS variables in a style block:
--hipsy-primary: #008042;
--hipsy-secondary: #ffda8a;
--hipsy-background: #ffffff;
--hipsy-foreground: #1d1b16;
--hipsy-error: #8e101f;
--hipsy-error-background: #ffdede;
--hipsy-border-radius: 10px;
--hipsy-shadow:
0 1px 2px color-mix(in srgb, var(--hipsy-foreground-muted) 6%, transparent),
0 1px 3px color-mix(in srgb, var(--hipsy-foreground-muted) 8%, transparent);
--hipsy-shadow-glow-accent:
0 3px 10px color-mix(in srgb, var(--hipsy-primary) 50%, transparent),
0 2px 2px color-mix(in srgb, var(--hipsy-primary) 20%, transparent);
--hipsy-font-size-xxs: 0.625rem;
--hipsy-font-size-xs: 0.75rem;
--hipsy-font-size-sm: 0.875rem;
--hipsy-font-size-md: 1rem;
--hipsy-font-size-lg: 1.125rem;
--hipsy-font-size-xl: 1.25rem;
--hipsy-font-size-2xl: 1.5rem;
--hipsy-font-size-3xl: 2rem;
--hipsy-font-body: 'inherit';
--hipsy-font-heading: 'inherit';
Domains
Only add domains where you actually use the widget. You can add a maximum of 12 domains. Enter only the domain name, without any additional pages or paths. For example:
- Correct:
yourwebsite.com - Correct:
events.yourwebsite.com - Not required:
https://yourwebsite.com/events
Stability and security
The widget loads the correct events through your organisation URL. If you change your organisation URL, or slug, on Holibiza, you must also update your widget code.
The widget key provides an additional layer of security that makes misuse of your event data more difficult. If you regenerate the widget key, old embed code using the previous key will no longer work.
