Met de Hipsy evenementenwidget toon je de evenementen van je organisatie op je eigen website. Bezoekers kunnen evenementen bekijken, zoeken en doorklikken naar meer informatie zonder dat je de lijst handmatig hoeft bij te houden.
De widget staat in Hipsy dashboard bij je organisatie onder Add-ons. Daar kun je een voorbeeld bekijken, de weergave aanpassen en de embedcode kopiëren.
Zo plaats je de widget
- Klik in het dashboard menu op Organisatie en open Add-ons.
- Voeg bij Toegestane domeinen het domein van je website toe, bijvoorbeeld
jouwwebsite.nl. - (optioneel) Pas de kleuren en instellingen aan.
- Klik op Kopiëer code.
- Plak de code op de pagina van je website waar je de evenementen wilt tonen.
De widget werkt alleen op domeinen die je hebt toegevoegd. Dit voorkomt dat anderen jouw widget zomaar op een andere website gebruiken.
Wat kun je instellen?
In Hipsy kun je de widget direct aanpassen. De preview laat meteen zien wat er verandert.
- Thema: licht, donker of automatisch (volgt de instellingen van je apparaat).
- Weergave: raster, lijst of kalender.
- Kalenderindeling: gegroepeerd per sectie (dagdelen) of een 24 uurs weergave per dag.
- Kleuren: primaire kleur, secundaire kleur, achtergrondkleur en tekstkleur.
- Routing: bepaalt hoe de widget de geopende evenementdetails onthoudt in de URL.
Wijzigingen worden automatisch opgeslagen. Als je bovenstaande instellingen aanpast, moet je de widget code opnieuw kopiëren en plakken op je website.
Embedcode toevoegen
Gebruik bij voorkeur altijd de code uit het Hipsy dashboard, tenzij je weet wat je doet. De code die je in Hipsy kopieert lijkt op dit voorbeeld:
<script src="https://cdn.hipsy.nl/sdk/v1/hipsy-events.js"></script>
<hipsy-event-widget
organisation="jouw-organisatie"
widget-key="wcc_voorbeeld"
></hipsy-event-widget>
Deze code voeg je toe op je website op de plek waar je wil dat de agenda verschijnt. Het kan per platform verschillen hoe dit werkt. Een paar linkjes naar veelgebruikte platformen en de benodigde componenten:
-
Wix:
- Custom Element - beste optie, betaald Wix pakket nodig.
- Embed HTML - widget in een iframe, gratis, maar met enige beperkingen. De evenementen verschijnen dan veel kleiner binnen deze iframe ipv over je hele scherm. Krijg je een foutmelding? Zorg ervoor dat de URL van de iframe op Wix ook toegevoegd wordt in het Hipsy dashboard. Dit is
www-jouwdomein-com.filesusr.com. Let op de streepjes tussen www of com (of nl).
-
Squarespace: Code blocks
-
Elementor: HTML widget
-
Divi:
- Voeg de gehele code toe via een code block.
- Je kan er ook voor kiezen het inladen van de
<script>tag in je<head>van de pagina te zetten via Integratie Instellingen
-
Wordpress (Gutenberg): Custom HTML
De widget stylen op je website
De meeste styling stel je in via de preview in het Hipsy dasbboard. Als je meer wil aanpassen, kan dit met CSS op de widget. Een voorbeeld van het stijlen van border-radius in CSS:
<style>
hipsy-event-widget,
hipsy-event-drawer {
--hipsy-border-radius: 20px;
}
</style>
Je kan de volgende CSS variabelen aanpassen in zo'n style blok:
--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';
Domeinen
Voeg alleen domeinen toe waarop je de widget echt gebruikt. Je kunt maximaal 12 domeinen toevoegen. Vul alleen de domeinnaam in, zonder extra pagina's of paden. Bijvoorbeeld:
- Goed:
jouwwebsite.nl - Goed:
events.jouwwebsite.nl - Niet nodig:
https://jouwwebsite.nl/agenda
Stabiliteit en Veiligheid
De widget laad de juiste evenementen via je organisatie URL. Als je je organisatie URL (slug) op Hipsy veranderd, moet je je widget code ook updaten.
De widget sleutel is een extra beveiligingslaag die misbruik van jouw events data moeilijker maakt. Als je de widget-sleutel opnieuw genereert, werkt oude embedcode met de vorige sleutel niet meer.
