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="docenten-agenda"></script>

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

<script src="https://ledenboek.nl/insluiten/embed.js"
        data-vereniging="jouw-vereniging"
        data-type="uitslagen"></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, docenten-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, docenten-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, en voor zowel profielen als docenten-agenda. Bij de agenda krijg je voorbeeldactiviteiten die in de toekomst liggen, zodat de weergave er gevuld uitziet. 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 — docenten-agenda

Met data-type="docenten-agenda" toon je de eigen activiteiten van je docenten (lessen, workshops) in een agenda-layout, per maand geordend. Zonder verdere opties zie je de gezamenlijke agenda van alle docenten. Wil je de agenda van één docent, voeg dan data-docent="<profiel-slug>" toe.

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

Elke docent kan zijn agenda ook als iCal-feed abonneren (https://ledenboek.nl/agenda/docent/<profiel-slug>.ics) in Google Agenda, Apple Agenda of Outlook. De docent vindt zowel de iCal-link als zijn eigen insluitcode terug in het ledenportaal, onder het profiel. De agenda vult zich met de activiteiten die de docent in Ledenboek plaatst; alleen docenten met een openbaar profiel verschijnen.

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.

Verdieping — wachtlijst

Een wachtlijst is een rij mensen die wachten op iets met beperkte plaats: een volle les, een nestje, een herplaatsing, een ligplaats. Je maakt er in Ledenboek zoveel aan als je wilt, elk met een eigen rij.

Anders dan de andere onderdelen hoort een insluitcode bij één specifieke lijst. Naast data-type="wachtlijst" geef je daarom met data-lijst mee om welke lijst het gaat. Die code staat kant-en-klaar bij de lijst zelf, onder Wachtlijsten.

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

Per lijst bepaal je wat je uitvraagt, wat er na aanmelden op het scherm komt en of iemand zijn eigen plek in de rij ziet. Namen van andere wachtenden zijn nooit zichtbaar. Je krijgt bericht bij elke aanmelding, en een lijst die vol of gesloten is neemt niemand meer aan.