Mettez votre association sur votre propre site web

Ce que vous pouvez intégrer

Vous choisissez pour chaque élément ce que vous affichez avec data-type. Remplacez votre-association par le nom (slug) de votre association : vous le trouvez dans Ledenboek. Chaque élément s'agrandit automatiquement en hauteur et s'adapte à vos couleurs.

Les codes d'intégration

Collez la ligne de l'élément que vous voulez afficher sur la page de votre choix.

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="aanmelden"></script>

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="mutatie"></script>

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="evenementen"></script>

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="agenda"></script>

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="profielen"></script>

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="ledenactiviteiten"></script>

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="advertenties"></script>

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="uitslagen"></script>

profielen est la valeur par défaut : si vous omettez data-type, vous obtenez la liste des membres.

Comment ça marche

Le formulaire d'inscription et la page de modification sont les vrais formulaires de votre association : ce qui arrive se retrouve immédiatement dans Ledenboek. Pour les membres et les annonces, seules les données rendues publiques sont affichées : le conseil rend un groupe ou une rubrique d'annonces public, et les membres décident eux-mêmes si leur profil y figure. Aucune donnée qui n'a pas été rendue publique n'est jamais affichée.

Tout est public et fonctionne avec le nom (slug) de l'association. Aucune clé API n'est nécessaire. Un administrateur retrouve le code prêt à l'emploi, avec les bonnes données déjà remplies, dans Ledenboek, auprès du groupe ou du paramètre concerné.

Trois façons d'intégrer

Le widget JavaScript est le plus simple. Si vous ne pouvez pas placer de scripts, utilisez l'iframe. Si vous voulez construire vous-même, il existe une API JSON.

1. Widget JavaScript (recommandé)

Collez une seule ligne. Le widget se construit tout seul et s'agrandit automatiquement en hauteur.

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="evenementen"></script>

2. Iframe

Fonctionne sur n'importe quel site web, sans JavaScript.

<iframe src="https://ledenboek.be/insluiten/votre-association/evenementen"
        style="width:100%;border:0;min-height:600px" loading="lazy"></iframe>

3. API JSON

Pour les développeurs qui construisent eux-mêmes une liste ou une carte. Disponible pour les éléments d'affichage (profielen, advertenties, ledenactiviteiten). CORS est ouvert, vous appelez donc l'API depuis votre propre domaine.

GET https://ledenboek.be/insluiten/votre-association/profielen.json

Les champs sans valeur sont renvoyés comme null. Les formulaires d'inscription et de modification sont interactifs et n'ont pas de variante JSON.

Adapter à votre propre site

Les widgets d'affichage (profielen, advertenties, evenementen, agenda, ledenactiviteiten) s'adaptent avec des attributs data- supplémentaires. Tout est facultatif ; si vous omettez quelque chose, la valeur par défaut s'applique. Les formulaires d'inscription et de modification reprennent automatiquement la couleur de votre association.

Couleur et style

• data-accent : couleur d'accent en hexadécimal, par ex. #0f766e (par défaut : la couleur de l'association).
• data-achtergrond : wit (blanc, par défaut) ou transparant (transparent).
• data-hoeken : rond (arrondis, par défaut) ou recht (droits).
• data-schaduw : aan (activée) ou uit (désactivée, par défaut).

Mise en page

• data-stijl : kaarten (cartes, par défaut), lijst (liste) ou compact.
• data-kolommen : auto (par défaut) ou de 1 à 4.
• data-weergave : beide (les deux, par défaut), lijst (liste) ou kaart (carte), pour les éléments avec une carte.
• data-kaart-hoogte : hauteur de la carte en pixels, par ex. 300 (par défaut 380).

Quantité d'informations

• Membres, champs affichés ou non : data-foto, data-plaats, data-bio, data-website, data-email, data-boeken (valeur uit pour masquer).
• Annonces, champs affichés ou non : data-foto, data-plaats, data-omschrijving.
• data-max : afficher au maximum ce nombre, par ex. 12.
• data-zoek : aan pour une barre de recherche (membres, recherche par nom et localité).
• data-groep : limite la liste des membres à un seul groupe public (l'identifiant du groupe dans l'administration).

Exemple

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="evenementen"
        data-accent="#0f766e"
        data-stijl="compact"
        data-kolommen="2"
        data-kaart-hoogte="300"></script>

Tester avec des données de démonstration

Vous voulez déjà construire pendant que les vraies données sont encore en cours de saisie ? Ajoutez data-demo="1" au script (ou ?demo=1 à l'API). Vous obtenez alors des données de démonstration avec des lieux, pour tester la présentation et la mise en page. Cela fonctionne avec n'importe quel data-vereniging, et aussi bien pour profielen que pour ledenactiviteiten. Pour l'agenda, vous obtenez des activités de démonstration situées dans le futur, pour que l'affichage paraisse rempli. Retirez-le ensuite pour les vraies données.

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="profielen"
        data-demo="1"></script>

En détail : rendre les membres réservables

Un membre peut indiquer trois moyens de contact dans son profil : un site web, une adresse e-mail publique et un lien de réservation ou de contact. Pratique par exemple pour les professeurs, les entraîneurs ou les éleveurs qui veulent être joignables. Ils apparaissent comme des boutons cliquables dans le widget, et figurent aussi dans le JSON (website, email, boeking_url).

Vous les activez ou les désactivez un par un avec data-website, data-email et data-boeken (valeur uit). Vous pouvez ainsi n'afficher que le bouton de réservation, ou au contraire masquer l'adresse e-mail.

En détail : les activités de membres

Avec data-type="ledenactiviteiten", vous affichez les activités que vos membres organisent eux-mêmes (cours, ateliers, entraînements) dans une mise en page d'agenda, classées par mois. Sans autre option, vous voyez l'agenda commun de tout le monde. Pour celui d'une seule personne, ajoutez data-lid="<profiel-slug>".

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="ledenactiviteiten"
        data-docent="anna-de-vries"></script>

Chaque membre peut aussi proposer son agenda comme flux iCal (https://ledenboek.be/agenda/lid/<profiel-slug>.ics) auquel on s'abonne dans Google Agenda, Apple Calendrier ou Outlook. Le membre retrouve le lien iCal et son propre code d'intégration dans l'espace membres, sous son profil. L'agenda se remplit avec les activités qu'il publie dans Ledenboek ; seuls les membres avec un profil public apparaissent.

En détail : les annonces avec liste d'attente

Les associations qui rendent publique une rubrique d'annonces peuvent l'intégrer de la même façon avec data-type="advertenties". Les visiteurs consultent les annonces et s'inscrivent directement sur la liste d'attente, même sans être membres. Les inscriptions arrivent dans Ledenboek.

En détail : la liste d'attente

Une liste d'attente, c'est une file de personnes qui attendent quelque chose dont les places sont limitées : un cours complet, une portée, un replacement, un emplacement d'amarrage. Vous en créez autant que vous voulez dans Ledenboek, chacune avec sa propre file.

Contrairement aux autres éléments, un code d'intégration correspond à une liste précise. En plus de data-type="wachtlijst", vous indiquez donc avec data-lijst de quelle liste il s'agit. Ce code est prêt à l'emploi auprès de la liste elle-même, sous Listes d'attente.

<script src="https://ledenboek.be/insluiten/embed.js"
        data-vereniging="votre-association"
        data-type="wachtlijst"
        data-lijst="de-code-van-je-lijst"></script>

Pour chaque liste, vous décidez de ce que vous demandez, de ce qui s'affiche après l'inscription et si une personne voit sa propre place dans la file. Les noms des autres personnes en attente ne sont jamais visibles. Vous êtes prévenu à chaque inscription, et une liste complète ou fermée n'accepte plus personne.