fepli
deen
EntwicklerÜbersicht

Bausteine

Teile von fepli, die Sie auf Ihren eigenen Seiten platzieren. Sie laden aktuelle Daten aus Ihrem fepli und übernehmen das Aussehen Ihrer Website.

So funktioniert es

  1. 1Skript einmal ladenIm Head Ihrer Seite oder Ihres Templates, mit Ihrem öffentlichen Schlüssel. Es registriert alle Bausteine.
  2. 2Element platzierenDort, wo die Angebote erscheinen sollen. Attribute legen Saison und Filter fest.
  3. 3An Ihr Design anpassenCSS-Variablen legen Farbe, Schrift und Ecken fest.
HTML
<!-- once, in the <head> -->
<script type="module" src="https://example.fepli.eu/embed.js" data-key="pk_9f3a2c71e4b05d18a6c2e7f0"></script>

<!-- where the offers should appear -->
<fepli-offers edition="herbstferien-2026"></fepli-offers>

Alle Bausteine

Die Bausteine zeigen die veröffentlichten Angebote der Saisons, die online sind, wie die REST API sie ohne Token liefert. Sie lesen sie mit einem öffentlichen Schlüssel und brauchen die eingeschaltete App API, nicht den öffentlichen Zugriff. Sie sind ausgeschaltet, bis eine Organisation sie einschaltet, mit der App Website einbinden unter Einstellungen → App-Store. Bis dahin antwortet embed.js mit 404. Um etwas anderes zu lesen oder zu ändern, verwenden Sie die REST API.

Die Bausteine haben keine eigene Datenquelle. Sie rufen die REST API im Browser der Besucher:in auf, GET /offers und GET /offers/{uuid}, mit dem öffentlichen Schlüssel Ihrer Website. Dieselben Aufrufe können Sie selbst senden, siehe Öffentliche Schlüssel.

Öffentliche Schlüssel

Ein Baustein zeigt nur mit einem öffentlichen Schlüssel etwas an. Der Schlüssel steht als data-key im Script-Tag, einmal pro Seite:

<script type="module" src="https://example.fepli.eu/embed.js" data-key="pk_9f3a2c71e4b05d18a6c2e7f0"></script>

Ein Schlüssel ist kein Geheimnis. Er steht im Quelltext Ihrer Seite und liest nur, was ohnehin öffentlich ist. Er legt fest, wer einbindet: Jeder Schlüssel nennt die Websites, auf denen er funktioniert, und lässt sich widerrufen, ohne dass die anderen betroffen sind.

  • Woher er kommt. In fepli unter Einstellungen → Integrationen → API → Öffentliche Schlüssel, sobald die Bausteine eingeschaltet sind. Der Code, den „Einbinden“ an einer Saison oder einem Angebot ausgibt, enthält den dort gewählten Schlüssel bereits.
  • Erlaubte Websites. Ein Schlüssel nennt Hosts. Ein Host schließt seine Subdomains ein: elmsbrueck.de gilt auch für www.elmsbrueck.de. Ein Schlüssel funktioniert auf den Websites, die er nennt, und auf keiner anderen. Jeder Schlüssel nennt deshalb mindestens eine.
  • Ohne Schlüssel, mit einem widerrufenen oder auf einer Website, die der Schlüssel nicht nennt, meldet der Baustein, dass die Angebote nicht geladen werden konnten. Den Grund nennt die Konsole des Browsers.

Die Bausteine rufen die API unter /api auf dem Host auf, von dem das Script geladen wurde. Hat die API einer Organisation eine eigene Domain, nennt das Script-Tag sie als data-api. Der Code unter „Einbinden“ enthält dieses Attribut dann ebenfalls.

Die Prüfung der Website stützt sich auf den Header Origin, den ein Browser sendet. Sie legt fest, welche Seiten die Bausteine zeigen dürfen. Eine Zugriffskontrolle ist sie nicht: Ein Script außerhalb eines Browsers kann jeden Origin senden.

Anmelden

Die Bausteine zeigen Angebote. Die Anmeldung der Familie findet in fepli statt. Jeder Knopf „Anmelden“ führt auf die Seite des Angebots in Ihrem fepli. Dort funktionieren die Anmeldung am Konto, das Anmeldeformular und die Zahlung wie gewohnt. Nichts davon wird in Ihre Website eingebettet.

Um selbst zur Anmeldung zu verlinken, etwa aus einem Newsletter oder von einem Plakat, verwenden Sie die Adresse dieser Seite. fepli zeigt sie unter „Einbinden“ am Angebot als „Link zur Anmeldung“.

War diese Seite hilfreich?