Zet je vereniging op je eigen website

Wat je kunt insluiten

Je kiest per onderdeel met data-type wat je toont. Vervang jouw-vereniging door de naam (slug) van je vereniging — die vind je in Ledenboek. Elk onderdeel groeit automatisch mee in hoogte en past zich aan je huisstijl aan.

De insluitcodes

Plak de regel van het onderdeel dat je wilt tonen op de gewenste pagina.

<script src="https://ledenboek.nl/insluiten/embed.js"
        data-vereniging="jouw-vereniging"
        data-type="aanmelden"></script>

<script src="https://ledenboek.nl/insluiten/embed.js"
        data-vereniging="jouw-vereniging"
        data-type="mutatie"></script>

<script src="https://ledenboek.nl/insluiten/embed.js"
        data-vereniging="jouw-vereniging"
        data-type="evenementen"></script>

<script src="https://ledenboek.nl/insluiten/embed.js"
        data-vereniging="jouw-vereniging"
        data-type="agenda"></script>

<script src="https://ledenboek.nl/insluiten/embed.js"
        data-vereniging="jouw-vereniging"
        data-type="profielen"></script>

<script src="https://ledenboek.nl/insluiten/embed.js"
        data-vereniging="jouw-vereniging"
        data-type="advertenties"></script>

profielen is de standaard: laat je data-type weg, dan krijg je de ledenlijst.

Hoe het werkt

Het inschrijfformulier en de wijzigingspagina zijn de échte formulieren van je vereniging — wat er binnenkomt, staat meteen in Ledenboek. Bij leden en advertenties worden alleen gegevens getoond die openbaar zijn gemaakt: het bestuur zet een groep of advertentierubriek openbaar, en leden bepalen zelf of hun profiel meedoet. Er worden nooit gegevens getoond die niet openbaar zijn gemaakt.

Alles is publiek en werkt met de naam (slug) van de vereniging. Er is geen API-sleutel nodig. Een bestuurder vindt de kant-en-klare code, met de juiste gegevens er al in, terug in Ledenboek bij de betreffende groep of instelling.

Drie manieren om in te sluiten

De JavaScript-widget is het makkelijkst. Kun je geen scripts plaatsen, gebruik dan het iframe. Wil je zelf bouwen, dan is er een JSON-API.

1 — JavaScript-widget (aanbevolen)

Eén regel plakken. De widget bouwt zichzelf op en groeit automatisch mee in hoogte.

<script src="https://ledenboek.nl/insluiten/embed.js"
        data-vereniging="jouw-vereniging"
        data-type="evenementen"></script>

2 — iframe

Werkt op elke website, zonder JavaScript.

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

3 — JSON-API

Voor ontwikkelaars die zelf een lijst of kaart bouwen. Beschikbaar voor de weergave-onderdelen (profielen, advertenties, evenementen, agenda). CORS staat open, dus je roept de API vanaf je eigen domein aan.

GET https://ledenboek.nl/insluiten/jouw-vereniging/profielen.json

Velden zonder waarde komen terug als null. Het inschrijf- en wijzigingsformulier zijn interactief en hebben geen JSON-variant.

Aanpassen aan je eigen site

De weergave-widgets (profielen, advertenties, evenementen, agenda) pas je aan met extra data-attributen. Alles is optioneel; laat je iets weg, dan geldt de standaard. Het inschrijf- en wijzigingsformulier nemen automatisch de huisstijlkleur van je vereniging over.

Kleur & stijl

• data-accent — accentkleur als hex, bijv. #0f766e (standaard: de huisstijlkleur van de vereniging).
• data-achtergrond — wit (standaard) of transparant.
• data-hoeken — rond (standaard) of recht.
• data-schaduw — aan of uit (standaard).

Layout

• data-stijl — kaarten (standaard), lijst of compact.
• data-kolommen — auto (standaard) of 1 t/m 4.
• data-weergave — beide (standaard), lijst of kaart (voor onderdelen met een kaart).
• data-kaart-hoogte — hoogte van de kaart in pixels, bijv. 300 (standaard 380).

Hoeveelheid informatie

• Leden — velden aan/uit: data-foto, data-plaats, data-bio, data-website, data-email, data-boeken (waarde uit om te verbergen).
• Advertenties — velden aan/uit: data-foto, data-plaats, data-omschrijving.
• data-max — toon maximaal dit aantal, bijv. 12.
• data-zoek — aan voor een zoekbalk (leden, zoekt op naam en plaats).
• data-groep — beperk de ledenlijst tot één openbare groep (het groep-id uit het beheer).

Voorbeeld

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

Testen met voorbeelddata

Wil je alvast bouwen terwijl de echte gegevens nog worden ingevuld? Zet data-demo="1" op het script (of ?demo=1 op de API). Je krijgt dan voorbeeldgegevens met locaties, zodat je opmaak en layout kunt testen. Werkt met elke data-vereniging. Haal het weer weg voor de echte data.

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

Verdieping — leden boekbaar maken

Een lid kan in het eigen profiel drie contactmogelijkheden invullen: een website, een openbaar e-mailadres en een boekings- of contactlink. Handig voor bijvoorbeeld docenten, trainers of fokkers die aanspreekbaar willen zijn. Ze verschijnen als klikbare knoppen in de widget, en zitten ook in de JSON (website, email, boeking_url).

Je zet ze per stuk aan of uit met data-website, data-email en data-boeken (waarde uit). Zo laat je bijvoorbeeld alleen de boekingsknop zien, of juist geen e-mailadres.

Verdieping — advertenties met wachtlijst

Verenigingen die een advertentierubriek openbaar zetten, kunnen die op dezelfde manier insluiten met data-type="advertenties". Bezoekers bekijken de advertenties en schrijven zich direct op de wachtlijst in, ook zonder lid te zijn. De inschrijvingen komen binnen in Ledenboek.