Bringen Sie Ihren Verein auf Ihre eigene Website

Was Sie einbinden können

Sie wählen pro Element mit data-type, was angezeigt wird. Ersetzen Sie dein-verein durch den Kurznamen (Slug) Ihres Vereins, den Sie in Ledenboek finden. Jedes Element passt seine Höhe automatisch an und übernimmt Ihr Erscheinungsbild.

Die Einbindungscodes

Fügen Sie die Zeile des Elements, das Sie zeigen möchten, auf der gewünschten Seite ein.

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

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

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

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

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

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

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

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

profielen ist der Standard: Lassen Sie data-type weg, erhalten Sie die Mitgliederliste.

So funktioniert es

Das Anmeldeformular und die Änderungsseite sind die echten Formulare Ihres Vereins: Was eingeht, steht sofort in Ledenboek. Bei Mitgliedern und Anzeigen werden nur Daten angezeigt, die öffentlich gemacht wurden: Der Vorstand stellt eine Gruppe oder Anzeigenrubrik öffentlich, und Mitglieder entscheiden selbst, ob ihr Profil dabei ist. Daten, die nicht öffentlich gemacht wurden, werden nie angezeigt.

Alles ist öffentlich und funktioniert mit dem Kurznamen (Slug) des Vereins. Es ist kein API-Schlüssel nötig. Ein Vorstandsmitglied findet den fertigen Code, mit den richtigen Angaben schon darin, in Ledenboek bei der jeweiligen Gruppe oder Einstellung.

Drei Wege zum Einbinden

Das JavaScript-Widget ist am einfachsten. Können Sie keine Skripte einfügen, nehmen Sie das iframe. Wollen Sie selbst bauen, gibt es eine JSON-API.

1. JavaScript-Widget (empfohlen)

Eine Zeile einfügen. Das Widget baut sich selbst auf und passt seine Höhe automatisch an.

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

2. iframe

Funktioniert auf jeder Website, ohne JavaScript.

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

3. JSON-API

Für Entwickler, die selbst eine Liste oder Karte bauen. Verfügbar für die Anzeige-Elemente (profielen, advertenties, ledenactiviteiten). CORS ist offen, Sie rufen die API also von Ihrer eigenen Domain aus auf.

GET https://mitgliederbuch.de/insluiten/dein-verein/profielen.json

Felder ohne Wert kommen als null zurück. Das Anmelde- und das Änderungsformular sind interaktiv und haben keine JSON-Variante.

An Ihre eigene Website anpassen

Die Anzeige-Widgets (profielen, advertenties, evenementen, agenda, ledenactiviteiten) passen Sie mit zusätzlichen data-Attributen an. Alles ist optional; lassen Sie etwas weg, gilt der Standard. Das Anmelde- und das Änderungsformular übernehmen automatisch die Hausfarbe Ihres Vereins.

Farbe & Stil

• data-accent: Akzentfarbe als Hex-Wert, z. B. #0f766e (Standard: die Hausfarbe des Vereins).
• data-achtergrond: wit (weiß, Standard) oder transparant (transparent).
• data-hoeken: rond (abgerundet, Standard) oder recht (eckig).
• data-schaduw: aan (an) oder uit (aus, Standard).

Layout

• data-stijl: kaarten (Karten, Standard), lijst (Liste) oder compact (kompakt).
• data-kolommen: auto (Standard) oder 1 bis 4.
• data-weergave: beide (beides, Standard), lijst (Liste) oder kaart (Karte), für Elemente mit Karte.
• data-kaart-hoogte: Höhe der Karte in Pixeln, z. B. 300 (Standard 380).

Umfang der Informationen

• Mitglieder, Felder an/aus: data-foto, data-plaats, data-bio, data-website, data-email, data-boeken (Wert uit zum Ausblenden).
• Anzeigen, Felder an/aus: data-foto, data-plaats, data-omschrijving.
• data-max: höchstens diese Anzahl anzeigen, z. B. 12.
• data-zoek: aan für eine Suchleiste (Mitglieder, sucht nach Name und Ort).
• data-groep: die Mitgliederliste auf eine öffentliche Gruppe beschränken (die Gruppen-ID aus der Verwaltung).

Beispiel

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

Mit Beispieldaten testen

Möchten Sie schon bauen, während die echten Daten noch eingetragen werden? Setzen Sie data-demo="1" auf das Skript (oder ?demo=1 auf die API). Sie erhalten dann Beispieldaten mit Orten, sodass Sie Gestaltung und Layout testen können. Funktioniert mit jedem data-vereniging, sowohl für profielen als auch für ledenactiviteiten. Beim Kalender erhalten Sie Beispielangebote in der Zukunft, damit die Ansicht gefüllt aussieht. Entfernen Sie es wieder für die echten Daten.

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

Im Detail: Mitglieder buchbar machen

Ein Mitglied kann im eigenen Profil drei Kontaktmöglichkeiten angeben: eine Website, eine öffentliche E-Mail-Adresse und einen Buchungs- oder Kontaktlink. Praktisch zum Beispiel für Kursleiter, Trainer oder Züchter, die ansprechbar sein wollen. Sie erscheinen als anklickbare Schaltflächen im Widget und stehen auch im JSON (website, email, boeking_url).

Sie schalten sie einzeln an oder aus mit data-website, data-email und data-boeken (Wert uit). So zeigen Sie zum Beispiel nur die Buchungsschaltfläche, oder gerade keine E-Mail-Adresse.

Im Detail: Mitgliederangebote

Mit data-type="ledenactiviteiten" zeigen Sie die Angebote, die Ihre Mitglieder selbst organisieren (Kurse, Workshops, Trainings), in einem Kalender-Layout, nach Monat geordnet. Ohne weitere Optionen sehen Sie den gemeinsamen Kalender aller. Möchten Sie den einer einzelnen Person, fügen Sie data-lid="<profiel-slug>" hinzu.

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

Jedes Mitglied kann seinen Kalender auch als iCal-Feed abonnieren lassen (https://mitgliederbuch.de/agenda/lid/<profiel-slug>.ics), in Google Kalender, Apple Kalender oder Outlook. Das Mitglied findet sowohl den iCal-Link als auch seinen eigenen Einbindungscode im Mitgliederportal unter dem Profil. Der Kalender füllt sich mit den Angeboten, die es in Ledenboek einstellt; nur Mitglieder mit öffentlichem Profil erscheinen.

Im Detail: Anzeigen mit Warteliste

Vereine, die eine Anzeigenrubrik öffentlich stellen, können sie auf dieselbe Weise mit data-type="advertenties" einbinden. Besucher sehen sich die Anzeigen an und tragen sich direkt in die Warteliste ein, auch ohne Mitglied zu sein. Die Eintragungen kommen in Ledenboek an.

Im Detail: Warteliste

Eine Warteliste ist eine Reihe von Menschen, die auf etwas mit begrenzten Plätzen warten: einen vollen Kurs, einen Wurf, eine Vermittlung, einen Liegeplatz. Sie legen in Ledenboek so viele an, wie Sie möchten, jede mit ihrer eigenen Reihe.

Anders als die übrigen Elemente gehört ein Einbindungscode zu genau einer Liste. Neben data-type="wachtlijst" geben Sie deshalb mit data-lijst an, um welche Liste es geht. Dieser Code steht fertig bei der Liste selbst, unter Wartelisten.

<script src="https://mitgliederbuch.de/insluiten/embed.js"
        data-vereniging="dein-verein"
        data-type="wachtlijst"
        data-lijst="de-code-van-je-lijst"></script>

Pro Liste legen Sie fest, was Sie abfragen, was nach der Anmeldung auf dem Bildschirm erscheint und ob jemand seinen eigenen Platz in der Reihe sieht. Namen anderer Wartender sind nie sichtbar. Sie erhalten bei jeder Anmeldung eine Nachricht, und eine Liste, die voll oder geschlossen ist, nimmt niemanden mehr an.