Buchungs-Widget

Buchung und Fahrplan auf der Website der Gemeinde statt auf einer eigenen Adresse — in den eigenen Farben, barrierefrei und ohne Cookies.

Schnellstart

Zwei Schritte in RufBusle, dann ein Stück Code auf der eigenen Seite.

1. Im Stadt-Admin unter Erweiterungen das Website-Widget installieren. 2. Dort die Adresse der eigenen Website als erlaubte Domain eintragen. 3. Den Code an der gewünschten Stelle einfügen:

Buchung einbettenHTML

<script src="https://rufbusle.de/embed/v1.js" async></script>
<rufbusle-booking city="musterstadt">
  <a href="https://rufbusle.de/musterstadt">Rufbus online buchen</a>
</rufbusle-booking>

Der Link im Element ist der Rückfall: er bleibt stehen, wenn das Skript nicht lädt, und verschwindet, sobald das Widget da ist. Den fertigen Code mit dem richtigen Stadt-Kürzel zeigt der Konfigurator im Stadt-Admin, samt Live-Vorschau.

Elemente und Attribute

Zwei Elemente, dieselben Attribute. Nur die Stadt ist Pflicht.

<rufbusle-booking>Buchung: Die vollständige Buchungsstrecke: Datum, Strecke, Zeit, Angaben, Bestätigung.
<rufbusle-timetable>Fahrplan: Alle Strecken mit Abfahrtszeiten. „Jetzt buchen" öffnet die Buchungsseite der Stadt in einem neuen Tab.

cityPflicht: Kürzel der Stadt, wie in der Adresse der Buchungsseite.
locale: Sprache: de, en, ar, tr oder uk. Ohne Angabe gilt die Sprache der einbettenden Seite (<html lang>).
primary: Primärfarbe, jede CSS-Farbe. Überschreibt die Farbe aus dem Konfigurator.
radius: Eckenradius in Pixeln, 0 bis 24.
font-size: Grundschriftgröße in Pixeln, 14 bis 22. Ohne Angabe die Schriftgröße der Umgebung.
font-family: Schriftliste. Ohne Angabe die Schrift der Umgebung. Es wirken nur Schriften, die auf dem Gerät installiert sind.
label: Name des Rahmens für Bildschirmleser. Ohne Angabe ein passender Text in der Widget-Sprache.
preview: Zum Testen: Die Strecke ist bedienbar, Buchen ist gesperrt.

Gestaltung

Farbe und Ecken legt die Stadt fest; die Website kann sie pro Einbindung überschreiben.

Die Grundgestaltung kommt aus dem Konfigurator im Stadt-Admin. Ändert die Stadt dort die Farbe, ändern sich alle eingebundenen Widgets, ohne dass jemand den Code anfasst. Wer es pro Seite steuern will, setzt Attribute oder CSS-Variablen am Element:

Per CSSHTML

<style>
  rufbusle-booking {
    --rufbusle-primary: #0a5c8f;
    --rufbusle-radius: 6px;
    scroll-margin-top: 80px; /* bei fester Kopfzeile */
  }
</style>

Schriftart und Schriftgröße übernimmt das Widget von der Stelle, an der es steht. Die Schriftfarbe auf Schaltflächen wählt es passend zur Primärfarbe selbst, damit der Kontrast stimmt. Die Karte bleibt hell; ein Dunkelmodus ist noch nicht verfügbar.

Ereignis nach der Buchung

Für die eigene Erfolgsmessung oder einen Hinweis auf der Seite.

Auf eine Buchung reagierenJavaScript

document.querySelector('rufbusle-booking')
  .addEventListener('rufbusle:booked', () => {
    // z. B. eigene Statistik zählen
  });

Das Ereignis trägt bewusst keine Daten: keine Buchungsnummer, keine Telefonnummer, keine Strecke. Wer Buchungen maschinell auswerten will, nutzt Webhooks. Dort sind Widget-Buchungen am Feld sourcePluginSlug mit dem Wert web-widget erkennbar.

Ohne Skript

Für Redaktionssysteme, die Skripte aus Inhalten entfernen.

Reiner RahmenHTML

<iframe src="https://rufbusle.de/embed/musterstadt/booking"
        title="Rufbus buchen"
        style="width:100%;height:820px;border:0"></iframe>

Das funktioniert, hat aber eine feste Höhe: Ist der Inhalt länger, scrollt er im Rahmen. Schrift und Farben der Seite werden nicht übernommen; Gestaltung geht nur über den Konfigurator oder Parameter in der Adresse (?primary=%230a5c8f&radius=6). Für den Fahrplan endet die Adresse auf /timetable.

Sicherheitsvorgaben der eigenen Website

Nur nötig, wenn die Gemeinde-Website eine Content-Security-Policy setzt.

Ergänzung der eigenen PolicyHTTP

Content-Security-Policy: script-src https://rufbusle.de; frame-src https://rufbusle.de

Mehr braucht es nicht: Das Skript lädt keine weiteren Dateien nach und spricht mit keinem anderen Server. Alle Anfragen des Widgets laufen innerhalb des Rahmens direkt zu RufBusle.

Barrierefreiheit

Was das Widget selbst leistet und was die einbettende Seite beachten sollte.

Der Rahmen hat einen Namen für Bildschirmleser, die Sprache im Widget ist ausgezeichnet (auch von rechts nach links), die Strecke ist vollständig per Tastatur bedienbar, und nach dem Buchen springt der Fokus auf die Bestätigung. Bewegungen richten sich nach der Systemeinstellung für reduzierte Bewegung. Die Höhe wächst mit, auch bei vergrößerter Schrift.

Auf der einbettenden Seite hilft eine Überschrift vor dem Widget, den Fallback-Link im Element zu belassen und dem Widget die volle Spaltenbreite zu geben — unter etwa 320 Pixeln Breite wird es eng.

Datenschutz

Was im Browser der Besucherinnen und Besucher passiert.

Das Widget setzt keine Cookies, schreibt keinen Speicher im Browser und bindet keine Statistik ein. Beim Laden erfährt RufBusle wie bei jedem Abruf die IP-Adresse; gebucht wird als Gast mit Telefonnummer, an die die Bestätigung geht. Fahrgast-Konten gibt es im Widget nicht. Einzelheiten zu den übrigen Schnittstellen stehen unter Personenbezogene Daten.

Wenn etwas nicht lädt

Leerer Rahmen: Die Domain fehlt in der Freigabeliste oder weicht ab (www, http statt https). Die Browser-Konsole nennt dann frame-ancestors.
Nur der Link ist zu sehen: Das Skript wurde nicht geladen: vom Redaktionssystem entfernt oder von der eigenen Content-Security-Policy blockiert.
Hinweis „nicht aktiviert": Die Erweiterung ist für diese Stadt nicht installiert oder pausiert.

Kommen Sie nicht weiter, hilft der Support — am schnellsten mit der Adresse der Seite, auf der das Widget stehen soll.