Comment afficher les événements Hipsy sur mon propre site web ?

Avec le widget d'événements Hipsy, vous affichez les événements de votre organisation sur votre propre site web. Les visiteurs peuvent consulter, rechercher et cliquer pour plus d'informations sans que vous ayez à maintenir la liste manuellement.

Le widget se trouve dans le tableau de bord Hipsy sous votre organisation dans Add-ons. Vous pouvez y voir un aperçu, ajuster l'affichage et copier le code d'intégration.

Comment placer le widget

Le widget ne fonctionne que sur les domaines que vous avez ajoutés. Cela empêche d'autres d'utiliser votre widget sur un autre site web.

Quelles options pouvez-vous configurer ?

Dans Hipsy, vous pouvez ajuster le widget directement. L'aperçu montre immédiatement ce qui change.

• Thème : clair, sombre ou automatique (suit les paramètres de votre appareil).
• Affichage : grille, liste ou calendrier.
• Format de calendrier : regroupé par section (parties de la journée) ou affichage de 24 heures par jour.
• Couleurs : couleur primaire, couleur secondaire, couleur de fond et couleur du texte.
• Routing : détermine comment le widget se souvient des détails de l'événement ouverts dans l'URL.

Les modifications sont automatiquement enregistrées. Si vous modifiez les paramètres ci-dessus, vous devez copier et coller à nouveau le code du widget sur votre site web.

Ajouter le code d'intégration

Utilisez de préférence toujours le code du tableau de bord Hipsy, sauf si vous savez ce que vous faites. Le code que vous copiez dans Hipsy ressemble à cet exemple :

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

Ce code doit être ajouté sur votre site web à l'endroit où vous souhaitez que le calendrier apparaisse. Cela peut varier selon la plateforme. Voici quelques liens vers des plateformes couramment utilisées et les composants nécessaires :

• Wix :

  • Élément personnalisé - meilleure option, nécessite un forfait Wix payant.
  • Intégrer HTML - widget dans un iframe, gratuit, mais avec certaines limitations. Les événements apparaîtront alors beaucoup plus petits dans cet iframe au lieu de s'étendre sur tout votre écran. Vous recevez un message d'erreur ? Assurez-vous que l'URL de l'iframe sur Wix est également ajoutée dans le tableau de bord Hipsy. C'est www-votredomaine-com.filesusr.com. Faites attention aux tirets entre www ou com (ou fr).

• Squarespace : Blocs de code

• Elementor : Widget HTML

• Divi :

  • Ajoutez l'intégralité du code via un bloc de code.
  • Vous pouvez également choisir de charger la balise <script> dans le <head> de la page via Paramètres d'intégration

• Wordpress (Gutenberg) : HTML personnalisé

Styliser le widget sur votre web