Angebote & Co. auf deiner Website einbinden: Schritt für Schritt mit iframe oder WordPress-Plugin

Mit Einbindungen zeigst du PetWorkers-Inhalte auf deiner eigenen Website. Du pflegst Angebote und Texte weiterhin in PetWorkers.

Versionsstand: Diese Seite beschreibt die Wave-Testversion vom 14.10.2026. Die ergänzten Funktionen sind noch nicht in Kundensystemen verfügbar.

Du arbeitest mit PetWorkers Classic? Dann nimm die Anleitung für Classic.

Die zwei Wege – welcher passt zu dir?

	WordPress-Plugin (Shortcode)	iframe-Code
Für welche Website?	nur WordPress	jede Website (WordPress, Jimdo, Wix, selbst gebaut)
Was du einfügst	eine kurze Zeile, zum Beispiel [petworkers angebot="gruppe" id="2"]	einen längeren Code, der mit <iframe beginnt
Wo du ihn einfügst	in WordPress im Block „Shortcode“	in einen HTML-Block (WordPress: „Individuelles HTML“)
Vorher nötig	das Plugin „PetWorkers Wave“ einmal installieren (Teil 4)	nichts
Suchmaschinen sehen den Inhalt	ja (Listen und Texte)	nein

Der Ablauf

1. Ein einzelnes Angebot einbinden (Gruppe, Kurs, FlexKurs oder Veranstaltung)
2. Mehrere ausgewählte Angebote einbinden
3. Filter, Angebotsart, Kategorie und Standort
4. Das WordPress-Plugin installieren und aktualisieren
5. Was deine Besucher sehen und wie sie buchen
6. Archivierte oder gelöschte Angebote
7. Weitere Fehler gezielt prüfen
8. Andere Seitenmodule, Newsletter, Abschalten, Entwickler

Teil 1: Ein einzelnes Angebot einbinden

So zeigst du genau ein Angebot auf einer Seite deiner Website, zum Beispiel deine Junghundegruppe auf der Seite „Junghundegruppe“.

Schritt 1: Das Angebot öffnen

Öffne die Liste deiner Angebote:

• Gruppen: Hundeschule → Gruppen (direkt: /groups.php hinter deiner PetWorkers-Adresse, zum Beispiel https://dein-betrieb.petworkers.app/groups.php)
• Kurse: Hundeschule → Kurse · FlexKurse: Hundeschule → FlexKurse (/flexcourses.php)
• Veranstaltungen: Veranstaltungen → Einzel-, Serien- oder Blockveranstaltungen

Klicke in der Zeile des Angebots rechts auf die drei Striche und dann auf den Stift.

Schritt 2: Den Kasten „Auf der Website einbinden“ finden

Du bist im Reiter „Basisdaten“. Scrolle nach unten bis zum Kasten „Auf der Website einbinden“. Den Kasten gibt es nur bei einem gespeicherten Angebot – legst du gerade ein neues an, speichere es zuerst einmal.

Schritt 3: Den passenden Code kopieren

• WordPress mit Plugin (Teil 4): beim WordPress-Shortcode auf „Kopieren“ klicken.
• Jede andere Website (oder WordPress ohne Plugin): beim iframe-Code auf „Kopieren“ klicken.

Im Shortcode steht die Angebotsart und die Nummer deines Angebots: gruppe, kurs, flexcourse, veranstaltung (Einzelveranstaltung), serienveranstaltung oder blockveranstaltung, dahinter id="…". Du musst daran nichts ändern.

Schritt 4a: In WordPress einfügen

1. Öffne in WordPress die Seite, auf der das Angebot erscheinen soll (Seiten → Seite bearbeiten), oder lege eine neue an.
2. Klicke oben links auf den blauen Plus-Knopf.
3. Tippe Shortcode ein.
4. Klicke auf den Block Shortcode.
5. Klicke in das Feld des neuen Blocks und füge den Code ein: Strg + V (Mac: cmd + V).
6. Klicke oben rechts auf „Speichern“ bzw. „Veröffentlichen“.

Schritt 4b: In eine andere Website einfügen

1. Füge in deinem Website-Baukasten einen HTML-Block ein. Er heißt je nach Baukasten „HTML“, „Code“, „Eigener Code“ oder „Einbetten“. In WordPress heißt er „Individuelles HTML“.
2. Füge den iframe-Code komplett ein – auch die Zeile mit <script> am Ende. Sie sorgt dafür, dass der Rahmen genau so hoch wird wie dein Angebot.
3. Speichere bzw. veröffentliche die Seite.

Schritt 5: So sieht es aus

Auf deiner Website steht jetzt nur dieses eine Angebot: Bild, Name, Beschreibung, darunter die kommenden Termine und die Tarife mit Preis.

Teil 2: Mehrere ausgewählte Angebote einbinden

So zeigst du mehrere Angebote zusammen als Liste, zum Beispiel alle Welpenangebote auf deiner Startseite.

Schritt 1: System → Einbindungen öffnen

Klicke links im Menü auf System → Einbindungen (direkt: /einbindungen.php) und dann auf „Einbindung anlegen“.

Schritt 2: Bezeichnung, Seitenmodul und Angebote wählen

1. Trage bei Bezeichnung einen Namen nur für dich ein, zum Beispiel „Welpenangebote Startseite“.
2. Wähle unter Seitenmodul den Wert Angebote.
3. Einzelne Angebote auswählen (keine Auswahl = alle): Klicke das erste Angebot an. Für jedes weitere hältst du Strg gedrückt (Mac: cmd) und klickst es an. Ausgewählte Angebote sind grau hinterlegt.
4. Klicke ganz unten auf „Formular speichern“.

Achtung: Klickst du ohne Strg/cmd, ist danach nur noch dieses eine Angebot ausgewählt. Wählst du gar nichts aus, erscheinen alle passenden Angebote.

Schritt 3: Den Code holen

Du bist wieder in der Liste. Klicke in der Zeile deiner Einbindung auf „Code“. Es öffnet sich das Fenster „Einbinden“ mit beiden Codes und je einem Knopf „Kopieren“.

Dann fügst du den Code genau wie in Teil 1, Schritt 4 ein. Ändern kannst du die Auswahl später jederzeit über „Bearbeiten“ – der Code auf deiner Website bleibt gleich.

Ohne Einbindung geht es in WordPress auch direkt: [petworkers angebote="kurs:12,gruppe:5"] zeigt den Kurs Nr. 12 und die Gruppe Nr. 5. Die Nummern stehen in der Auswahlliste in Klammern, zum Beispiel „Gruppe: Junghundegruppe (#2)“.

Teil 3: Filter, Angebotsart, Kategorie und Standort

Im selben Formular unter Inhalt stellst du ein:

• Angebotsarten (keine Auswahl = alle) – Gruppen, Kurse, FlexKurse, Einzel-, Serien- oder Blockveranstaltungen.
• Darstellung – Standard, Klassisch, Kompakt oder Magazin.
• Kategorien – alle oder nur ausgewählte, zum Beispiel nur „Welpen“.
• Standorte (keine Auswahl = alle).
• Filter „Standort“ zeigen, Filter „Kategorie“ zeigen, Filter „Angebotsart“ zeigen und Besucher dürfen nach Veranstaltungsort filtern – damit filtern deine Besucher selbst. Ein Filter erscheint nur, wenn es mindestens zwei Werte gibt.

So wirken Auswahl und Filter zusammen: Hast du einzelne Angebote ausgewählt, filtern Angebotsart, Kategorie und Standort nur innerhalb deiner Auswahl. Sie fügen nie ein Angebot hinzu, das du nicht ausgewählt hast.

Teil 4: Das WordPress-Plugin installieren und aktualisieren

Das brauchst du nur für den Shortcode. Für den iframe-Code ist kein Plugin nötig.

Schritt 1: Plugin herunterladen

Öffne System → Einbindungen und klicke oben auf „Plugin PetWorkers Wave herunterladen (…)“. In der Klammer steht die aktuelle Fassung. Du bekommst eine ZIP-Datei. Nicht entpacken!

Schritt 2: Plugin in WordPress installieren

1. Klicke in WordPress links auf Plugins → Plugin hinzufügen.
2. Klicke oben auf „Plugin hochladen“.
3. Klicke auf Datei auswählen.
4. Wähle die ZIP-Datei aus.
5. Klicke auf Jetzt installieren.
6. Klicke auf Plugin aktivieren.

Schritt 3: Plugin einrichten

1. Klicke in WordPress links auf Einstellungen → PetWorkers Wave.
2. Trage die Adresse deiner Instanz ein, zum Beispiel https://dein-betrieb.petworkers.app, und den Plugin-Schlüssel. Beides steht in PetWorkers unter System → Einbindungen im Kasten „WordPress-Plugin“, jeweils mit Knopf „Kopieren“.
3. Klicke auf „Speichern und Verbindung prüfen“. Steht dort „Verbunden.“, listet die Seite darunter alle deine Einbindungen mit fertigem Shortcode.

Der Plugin-Schlüssel kann nur Einbindungen lesen – keine Kunden, keine Tiere, keine Rechnungen. Musst du ihn ersetzen, klicke in PetWorkers auf „neu vergeben“ und trage den neuen Wert in WordPress ein.

Schritt 4: Plugin aktualisieren

Das Plugin fragt einmal je Stunde bei deiner Instanz nach einer neueren Fassung. Gibt es eine, erscheint sie in WordPress unter Plugins wie jedes andere Update: Klicke auf „jetzt aktualisieren“. Auch automatische Updates funktionieren. Herunterladen musst du nichts.

Für die Shortcodes angebot und angebote brauchst du mindestens die Fassung 1.2.6, für die Newsletter-Anmeldung mindestens 1.1.0.

Teil 5: Was deine Besucher sehen und wie sie buchen

• Einzelnes Angebot: Bild, Name, Beschreibung, kommende Termine und Tarife.
• Termin anklicken: Die Buchung öffnet sich in einem neuen Tab auf deiner PetWorkers-Seite. Bei Gruppen und Serienveranstaltungen ist der angeklickte Termin schon ausgewählt, bei FlexKursen der Starttermin. Kurse, Einzel- und Blockveranstaltungen bucht man als Ganzes.
• „Weiter zur Buchung“ bzw. „Details & Buchung“ in einer Liste: öffnet die Buchung ebenfalls in einem neuen Tab.

Warum ein neuer Tab? Zum Buchen muss sich dein Kunde anmelden. Browser wie Safari, Firefox und Chrome sperren Anmeldungen in fremden Seiten, also in einem Rahmen auf deiner Website – zum Schutz vor Betrug. Im neuen Tab läuft die Anmeldung direkt auf deiner PetWorkers-Seite, nicht in einem fremden Rahmen. Deine Website bleibt im alten Tab offen.

Teil 6: Archivierte oder gelöschte Angebote

Archivierst du ein Angebot, löschst es, schaltest es inaktiv oder beschränkst sein Publikum, wird es in der Einbindung nicht mehr angeboten. In WordPress kann der bisherige Inhalt noch bis zu fünf Minuten zwischengespeichert sein. Beim einzelnen Angebot steht an seiner Stelle: „Dieses Angebot ist derzeit nicht verfügbar.“ In einer Liste fällt es einfach weg. Holst du das Angebot zurück, erscheint es mit demselben Code wieder.

Weitere Fehler gezielt prüfen

Was du siehst	Was du tust
Auf der Website steht der Shortcode als Text	Das Plugin ist nicht installiert oder nicht aktiviert (Teil 4). Oder der Code steht in einem normalen Textblock statt im Block „Shortcode“.
Ein Hinweis, dass das Plugin nicht eingerichtet ist	Adresse und Plugin-Schlüssel unter Einstellungen → PetWorkers Wave eintragen und „Speichern und Verbindung prüfen“. Solche Hinweise sehen nur angemeldete WordPress-Administratoren.
„Dieses Angebot ist derzeit nicht verfügbar.“	Das Angebot ist archiviert, gelöscht, inaktiv oder hat ein eingeschränktes Publikum (Teil 6). Oder Angebotsart bzw. Nummer im Code passen nicht – kopiere den Code neu.
Es erscheinen alle Angebote statt deiner Auswahl	In der Einbindung ist nichts ausgewählt. Wähle die Angebote mit gedrückter Strg/cmd-Taste aus und speichere.
Der iframe ist abgeschnitten oder hat viel Leerraum	Die Zeile mit <script> fehlt. Kopiere den iframe-Code noch einmal komplett.
Der iframe bleibt leer	Prüfe bei der Einbindung „Erlaubte Websites (iframe)“: Steht dort etwas, muss die Adresse deiner Website genau so drinstehen, zum Beispiel https://www.deine-hundeschule.de.
Änderungen erscheinen in WordPress nicht	Das Plugin merkt sich den Inhalt fünf Minuten. Unter Einstellungen → PetWorkers Wave auf „Zwischenspeicher leeren“ klicken.

Andere Seitenmodule einbinden

Eine Einbindung zeigt immer genau ein Seitenmodul – neben Angeboten zum Beispiel Aktuelles, Preisliste, Stempelkarten und Abos, Einzeltermine, Terminbuchung, Hausbetreuung, Platzvermietung, Pension, Tagesbetreuung, Newsletter-Anmeldung, Shop oder Forum. Der Ablauf ist derselbe wie in Teil 2. Brauchst du zwei Module, legst du zwei Einbindungen an.

• Listen und Texte (Angebote, Aktuelles, Blog, Inhaltsabschnitte) passen gut ins WordPress-Plugin: Der Inhalt steht ohne Rahmen direkt in deiner Seite, passend zur Spaltenbreite deines Themes, mit Schrift und Farben aus deiner Seitenverwaltung.
• Buchungsstrecken (Pension, Termine, Platz, Shop) bindest du per iframe ein; dort laufen sie vollständig. Im Plugin zeigt eine Buchungsstrecke nur den Einstieg, die Buchung selbst führt auf die iframe-Adresse.
• Erlaubte Websites (iframe): legt fest, auf welchen Adressen der iframe erscheinen darf. Leer = überall. Für das WordPress-Plugin spielt das Feld keine Rolle.

Änderungen in PetWorkers erscheinen im iframe sofort, im Plugin nach spätestens fünf Minuten. Ist PetWorkers einmal nicht erreichbar, zeigt das Plugin den letzten bekannten Stand weiter an.

Newsletter-Anmeldung auf deiner Website

Mit dem Baustein „Newsletter-Anmeldung“ sammelst du Newsletter-Abonnenten direkt auf deiner eigenen Website. Leg eine Einbindung an und wähle den Baustein; eingestellt werden Überschrift, Text, die angebotenen Listen/Themen, der Einwilligungstext mit Link auf die Datenschutzerklärung und die Beschriftung des Knopfs.

• iframe und WordPress-Plugin funktionieren beide vollständig: Das Formular sendet direkt an deine Instanz und zeigt die Rückmeldung an Ort und Stelle.
• Wer das Formular absendet, bekommt eine Bestätigungs-E-Mail. Erst die Bestätigung trägt die Adresse ein; wer sich früher abgemeldet hat, wird erst damit wieder frei.
• Gegen Spam schützen ein unsichtbares Feld, eine Mindest-Ausfüllzeit und eine Grenze je Internetanschluss. Die Antwort verrät nie, ob eine Adresse schon bekannt ist.

Einbindung abschalten oder löschen

In der Liste schaltest du eine Einbindung mit „Ein-/ausschalten“ ab: iframe und Shortcode zeigen dann nichts mehr, der Code auf deiner Website bleibt aber stehen und wird wieder lebendig, sobald du einschaltest. „In den Papierkorb“ entfernt die Einbindung aus der Liste.

Für Entwickler

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

Was macht das? Diese Aufrufe lesen Einbindungen, ihren gerenderten Inhalt und die Plugin-Informationen. Sie benötigen den Plugin-Schlüssel.

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).