JavaScript-Widgets einbinden

Anmeldung, Mitgliedsantrag, Fragebogen, Spenden, Gutscheine und Event-Moments mit einem Script und einem div auf jeder Website, ohne Framework und ohne WordPress.

Die JavaScript-Widgets bringen Funktionen von vynst (inwendo ERP) auf jede Website: WordPress, Typo3, Wix, Jimdo, eine statische Seite oder eure eigene App. Ein Widget besteht aus einem Script und einem Platzhalter. Es braucht kein Framework, und die Gestaltung eurer Seite bleibt unberührt.

Der schnellste Weg: der Embed-Code-Generator

In vynst unter Ext. Verbindungen (API) → JS Website Einbindung stellt ihr ein Widget zusammen, seht eine Vorschau mit euren echten Daten und kopiert den fertigen Code. Der Generator kennt Fragebogen, Veranstaltungsanmeldung, Registrierung und Spenden.

Einbinden

Jede Installation liefert die Scripts selbst aus:

<div data-iw-event-signup
     data-iw-host="verein.iw-erp.de"
     data-iw-event-id="523"></div>

<script src="https://verein.iw-erp.de/frontend_assets/backend/iw_erp_web_ui/event-signup.js" async></script>

• data-iw-host ist die Adresse eurer Installation, mit oder ohne https://. Alle Anfragen gehen per HTTPS dorthin.
• Das Script sucht nach dem Laden alle passenden Platzhalter auf der Seite und startet in jedem ein Widget. Mehrere Widgets auf einer Seite sind kein Problem.
• Jedes Widget rendert in ein eigenes Shadow DOM. CSS eurer Seite wirkt nicht hinein und das Widget nicht hinaus.
• Ziel sind aktuelle Browser. Polyfills für alte Browser gibt es nicht.

In vynst freischalten

Die Widgets rufen die API eurer Installation direkt aus dem Browser der Besucher auf. Damit der Browser das zulässt, tragt eure Website in vynst bei CORS - HTTP Origins (cors_allow_origin) ein, mehrere durch Komma getrennt:

https://www.unser-verein.de,https://unser-verein.de

Je nach Widget braucht ihr außerdem die Funktion in vynst, etwa die Selbstregistrierung, Spendenziele, Gutscheine oder den Zahlungsanbieter. Das steht auf der Seite des Widgets.

Gestalten

Ohne weitere Angaben kommt ein neutrales Design. Mit Attributen passt ihr es an eure Seite an:

<div data-iw-registration
     data-iw-host="verein.iw-erp.de"
     data-iw-theme="soft"
     data-iw-theme-highlight="#005f66"
     data-iw-theme-font="Inter, sans-serif"
     data-iw-theme-radius="8"
     data-iw-theme-density="compact"></div>

Einzelne Werte gehen vor der Vorlage. Dieselben Werte stehen als CSS-Variablen bereit (--iw-color-highlight, --iw-font-family, --iw-radius und so weiter), die ihr am Platzhalter setzen könnt.

Texte ändern

Jeder Text lässt sich überschreiben, einzeln oder als JSON:

<div data-iw-event-signup
     data-iw-host="verein.iw-erp.de"
     data-iw-event-id="523"
     data-iw-text-send="Platz sichern"
     data-iw-texts='{"success": "Danke, wir sehen uns!"}'></div>

Die Texte der Widgets sind deutsch. Für eine englische Seite überschreibt ihr sie auf diese Weise.

Ohne HTML-Zugriff: Shortcodes

Erlaubt euer Baukasten kein HTML, aber das Script, schreibt ihr einen Shortcode in den Text. Das Widget ersetzt ihn beim Laden:

[iw-event-signup host="verein.iw-erp.de" event-id="523"]
[iw-registration host="verein.iw-erp.de" people="multi"]
[iw-donation host="verein.iw-erp.de" goal-id="7"]

Die Optionen heißen wie die Attribute ohne data-iw-.

Per JavaScript steuern

Für Single-Page-Apps oder nachgeladene Inhalte startet ihr Widgets selbst:

const el = document.querySelector('#anmeldung');
await window.IwEventSignup.mount(el, { host: 'verein.iw-erp.de', eventId: '523' });

// Nachgeladene Platzhalter einsammeln
window.IwEventSignup.scan(document.body);

Die Objekte heißen IwEventSignup, IwRegistration, IwQuestionnaire, IwDonation, IwVoucher und IwEventMoments. Optionen heißen wie die Attribute in camelCase (data-iw-event-id wird eventId), Farben gehen auch als Objekt: theme: { highlightColor: '#005f66' }.

Ereignisse

Jedes Widget meldet, was passiert, als DOM-Ereignis am Platzhalter. Damit zählt ihr Anmeldungen in eurer Statistik oder blendet Inhalte ein:

el.addEventListener('iw:event-signup:submitted', (event) => {
  console.log(event.detail.statusCode, event.detail.data);
});

<widget> ist event-signup, registration, register-multi-person, questionnaire, donation, voucher oder event-moments. Bei submitted steht in detail.data die Antwort von vynst, bei der Anmeldung etwa mit Namen. Gebt sie nicht ungefiltert an Statistik-Dienste weiter.

Zahlung

Kostenpflichtige Anmeldungen, Spenden und Gutscheine öffnen die Zahlungsseite eures Zahlungsanbieters in einem neuen Fenster. Blockiert der Browser das, wechselt die ganze Seite zur Zahlung. Einrichten: Zahlungsanbieter.

Datenschutz

• Die Widgets setzen keine Cookies.
• Damit nichts verloren geht, merken sich Registrierung, Mitgliedsantrag, Spenden und Gutscheine angefangene Eingaben im Browser (localStorage) für etwa einen Tag. Bei der einfachen Registrierung gehören dazu auch die Bankdaten, bei Mitgliedsantrag und Spenden nicht. Erwähnt das in eurer Datenschutzerklärung.
• Alle Daten gehen direkt an eure vynst-Installation, nicht an Dritte.