Einbindungen: Angebote & Co. auf deiner eigenen Website — iframe und WordPress-Plugin

Du hast eine eigene Website und möchtest dort dein Kursangebot, deine Neuigkeiten, den Blog oder eine Buchungsstrecke aus PetWorkers zeigen — ohne die Inhalte doppelt zu pflegen? Dafür gibt es Einbindungen. Eine Einbindung ist genau ein Seitenmodul, das du wie in der Seitenverwaltung einstellst und dann auf jeder anderen Website ausspielst.

Zwei Wege stehen dir offen:

• iframe — funktioniert auf jeder Website (WordPress, Jimdo, Wix, selbst gebaut). Der Inhalt kommt in einem eigenen Rahmen; das mitgelieferte Skript passt die Höhe automatisch an. Buchungsstrecken laufen darin vollständig.
• WordPress-Plugin — setzt den Inhalt direkt in deine Seite, ohne Rahmen, passend zur Spaltenbreite deines Themes. Das Theme kann das Aussehen nicht verändern (technisch: Shadow DOM). Gedacht für Listen und Texte — Angebote, Aktuelles, Blog, Inhaltsabschnitte.

1. Einbindung anlegen

Gehe zu System → Einbindungen und klicke auf Einbindung anlegen.

1. Gib eine Bezeichnung ein — nur für dich, zum Beispiel „Kursangebot Startseite".
2. Speichere einmal. Danach erscheint unter Inhalt der Block-Editor.
3. Klicke auf Block hinzufügen und wähle das Seitenmodul: Angebote, Aktuelles, Blog, einen Inhaltsabschnitt oder eine Buchungsstrecke. Stelle es ein wie in der Seitenverwaltung — die Vorschau rechts zeigt sofort, wie es aussieht.

Eine Einbindung hat immer genau ein Modul. Brauchst du zwei, legst du zwei Einbindungen an.

Unter Erlaubte Websites (iframe) kannst du eintragen, auf welchen Adressen der iframe erscheinen darf, zum Beispiel https://www.meine-hundeschule.de. Lässt du das Feld leer, geht es überall. Für das WordPress-Plugin spielt das Feld keine Rolle.

2. Den Code holen

In der Liste unter System → Einbindungen klickst du bei der Einbindung auf Code. Du bekommst beides:

<iframe src="https://deine-instanz.petworkers.app/einbindung/3f7c…/" …></iframe>
<script>…</script>

Den iframe-Code setzt du an die Stelle deiner Website, an der die Einbindung erscheinen soll — bei WordPress zum Beispiel in einen Block „Individuelles HTML". Das Skript darunter gehört dazu: Es sorgt dafür, dass der Rahmen genau so hoch ist wie der Inhalt.

[petworkers einbindung="3f7c9a2e4b814d6f9a037c5e12f8ab44"]

Den Shortcode setzt du in eine WordPress-Seite oder einen Beitrag — er braucht das Plugin aus Schritt 3.

3. Das WordPress-Plugin einrichten

1. Unter System → Einbindungen auf WordPress-Plugin herunterladen klicken. Du bekommst eine ZIP-Datei.
2. In WordPress: Plugins → Installieren → Plugin hochladen, die ZIP-Datei auswählen, installieren, aktivieren.
3. In WordPress unter Einstellungen → PetWorkers zwei Dinge eintragen: die Adresse deiner Instanz (zum Beispiel https://deine-instanz.petworkers.app) und den Plugin-Schlüssel. Beides steht in PetWorkers unter System → Einbindungen im Kasten „WordPress-Plugin" zum Kopieren bereit.
4. Auf Speichern und Verbindung prüfen klicken. Steht dort „Verbunden", listet die Seite darunter alle deine Einbindungen mit fertigem Shortcode.

Der Plugin-Schlüssel kann nur Einbindungen lesen — nichts anderes, nichts schreiben. Selbst wenn er in falsche Hände geriete, käme niemand an Kunden, Tiere oder Rechnungen. Ist er trotzdem einmal weg: in PetWorkers unter System → Einbindungen auf neu vergeben klicken und den neuen Wert in WordPress eintragen.

4. Wie das Plugin aussieht und arbeitet

Der Inhalt erscheint in deiner Seite, aber mit dem Aussehen aus PetWorkers: die Schrift, die Farben, die Schaltflächen sind die aus deiner Seitenverwaltung, nicht die deines Themes. Das ist Absicht — so sieht die Einbindung überall gleich und verlässlich aus. Das Raster (zum Beispiel die Karten der Angebote) richtet sich nach dem Platz, den dein Theme dem Inhalt gibt: eine Spalte in einer schmalen Seitenleiste, drei Spalten in voller Breite.

Änderungen in PetWorkers erscheinen im iframe sofort. Das Plugin merkt sich den Inhalt fünf Minuten lang; spätestens dann holt es den neuen Stand. Wer nicht warten will, klickt in WordPress unter Einstellungen → PetWorkers auf Zwischenspeicher leeren.

Ist PetWorkers einmal nicht erreichbar, zeigt das Plugin den letzten bekannten Stand weiter an — Besucher merken nichts. Als Administrator siehst du in WordPress einen Hinweis.

5. Aktualisierungen

Das Plugin fragt einmal je Stunde bei deiner Instanz nach, ob es eine neuere Fassung gibt. Gibt es eine, erscheint sie in WordPress unter Plugins wie jedes andere Update — mit einem Klick installiert, auch automatische Updates funktionieren. Du musst nichts herunterladen.

6. Wann iframe, wann Plugin?

	iframe	WordPress-Plugin
Website	jede	WordPress
Aussehen	eigener Rahmen, Höhe automatisch	direkt in der Seite, ohne Rahmen
Passt sich der Spaltenbreite an	ja (Breite), Höhe folgt dem Inhalt	ja, auch das Raster
Suchmaschinen sehen den Inhalt	nein	ja
Buchungsstrecken (Pension, Termine, Platz, Shop)	ja, vollständig	nur der Einstieg — die Buchung selbst führt auf die iframe-Adresse

Faustregel: Listen und Texte über das Plugin, Buchungsstrecken über den iframe. Beides kannst du für dieselbe Einbindung nebeneinander benutzen.

7. Einbindung abschalten oder löschen

In der Liste kannst du eine Einbindung abschalten: iframe und Shortcode zeigen dann nichts mehr, der Code auf deiner Website bleibt aber stehen und wird wieder lebendig, sobald du einschaltest. Löschen entfernt die Einbindung endgültig aus der Liste (sie landet im Papierkorb der Seitenverwaltung).

8. Für Entwickler

Was das Plugin tut, kannst du auch selbst tun — mit dem Plugin-Schlüssel und der Schnittstelle:

GET /api/v1/embeds                      alle Einbindungen (Token, Bezeichnung, aktiv)
GET /api/v1/embeds/render?token=…       HTML, Stylesheets, Schriften und Skript ohne Seitenrahmen
GET /api/v1/embeds/plugin               Plugin-Version und Download-Link

Die Antwort von render ist dafür gebaut, in einem Shadow DOM zu stehen: stylesheets als <link> in den Schatten, css als <style> dazu, fonts ins Dokument, html in den Schatten. Alle Adressen sind absolut. Mit If-None-Match und dem ETag aus der Antwort sparst du Übertragung (Status 304, wenn sich nichts geändert hat).