Put your association on your own website

What you can embed

You choose per component with data-type what to show. Replace jouw-vereniging with the name (slug) of your association — you can find it in Ledenboek. Each component automatically grows in height and adapts to your house style.

The embed codes

Paste the line for the component you want to show on the desired page.

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

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

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

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

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

<script src="https://mitgliederbuch.de/insluiten/embed.js"
        data-vereniging="jouw-vereniging"
        data-type="ledenactiviteiten"></script>

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

<script src="https://mitgliederbuch.de/insluiten/embed.js"
        data-vereniging="jouw-vereniging"
        data-type="uitslagen"></script>

profielen is the default: leave out data-type and you get the member list.

How it works

The registration form and the change page are your association's real forms — whatever comes in appears in Ledenboek immediately. For members and classifieds, only data that has been made public is shown: the board makes a group or classifieds category public, and members decide for themselves whether their profile is included. Data that has not been made public is never shown.

Everything is public and works with the name (slug) of the association. No API key is needed. A board member will find the ready-made code, with the right details already filled in, in Ledenboek at the relevant group or setting.

Three ways to embed

The JavaScript widget is the easiest. If you cannot place scripts, use the iframe. If you want to build it yourself, there is a JSON API.

1 — JavaScript widget (recommended)

Paste one line. The widget builds itself and automatically grows in height.

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

2 — iframe

Works on any website, without JavaScript.

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

3 — JSON API

For developers who build their own list or map. Available for the display components (profielen, advertenties, ledenactiviteiten). CORS is open, so you can call the API from your own domain.

GET https://mitgliederbuch.de/insluiten/jouw-vereniging/profielen.json

Fields without a value are returned as null. The registration and change forms are interactive and have no JSON variant.

Adapting it to your own site

You customize the display widgets (profielen, advertenties, evenementen, agenda, ledenactiviteiten) with extra data- attributes. Everything is optional; leave something out and the default applies. The registration and change forms automatically adopt your association's house-style color.

Color & style

• data-accent — accent color as hex, e.g. #0f766e (default: the association's house-style color).
• data-achtergrond — wit (default) or transparant.
• data-hoeken — rond (default) or recht.
• data-schaduw — aan or uit (default).

Layout

• data-stijl — kaarten (default), lijst or compact.
• data-kolommen — auto (default) or 1 to 4.
• data-weergave — beide (default), lijst or kaart (for components with a map).
• data-kaart-hoogte — height of the map in pixels, e.g. 300 (default 380).

Amount of information

• Members — fields on/off: data-foto, data-plaats, data-bio, data-website, data-email, data-boeken (value uit to hide).
• Classifieds — fields on/off: data-foto, data-plaats, data-omschrijving.
• data-max — show at most this number, e.g. 12.
• data-zoek — aan for a search bar (members, searches by name and place).
• data-groep — limit the member list to one public group (the group id from the admin).

Example

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

Testing with sample data

Want to start building while the real data is still being entered? Put data-demo="1" on the script (or ?demo=1 on the API). You then get sample data with locations, so you can test your styling and layout. Works with any data-vereniging, and for both profielen and ledenactiviteiten. For the calendar you get sample activities set in the future, so the view looks filled. Remove it again for the real data.

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

In depth — making members bookable

A member can fill in three contact options in their own profile: a website, a public email address and a booking or contact link. Useful for teachers, trainers or breeders who want to be approachable. They appear as clickable buttons in the widget, and are also included in the JSON (website, email, boeking_url).

You switch them on or off individually with data-website, data-email and data-boeken (value uit). That way you can show only the booking button, for example, or hide the email address.

In depth — member activities

With data-type="ledenactiviteiten" you show the activities your members organise themselves (classes, workshops, training) in a calendar layout, ordered by month. Without further options you see the combined calendar of everyone. For a single person, add data-lid="<profiel-slug>".

<script src="https://mitgliederbuch.de/insluiten/embed.js"
        data-vereniging="jouw-vereniging"
        data-type="ledenactiviteiten"
        data-docent="anna-de-vries"></script>

Every member can also subscribe to their calendar as an iCal feed (https://mitgliederbuch.de/agenda/lid/<profiel-slug>.ics) in Google Calendar, Apple Calendar or Outlook. Members find both the iCal link and their own embed code in the member portal, under their profile. The calendar fills with the activities they publish in Ledenboek; only members with a public profile appear.

In depth — classifieds with waiting list

Associations that make a classifieds category public can embed it in the same way with data-type="advertenties". Visitors browse the classifieds and sign up for the waiting list directly, even without being a member. The sign-ups arrive in Ledenboek.

In depth — waiting list

A waiting list is a queue of people waiting for something with limited capacity: a full class, a litter, a rehoming, a mooring. You can create as many as you like in Ledenboek, each with its own queue.

Unlike the other components, an embed code belongs to one specific list. Alongside data-type="wachtlijst" you therefore pass data-lijst to indicate which list it is. That code is ready to copy at the list itself, under Waiting lists.

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

Per list you decide what to ask, what appears on screen after signing up, and whether people see their own place in the queue. Names of other people waiting are never visible. You receive a message for every sign-up, and a list that is full or closed does not accept anyone new.