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

Du hast eine eigene Website und möchtest dort deine Gruppen, Kurse und Veranstaltungen aus PetWorkers zeigen – mit Terminen und Preisen, immer aktuell, ohne alles doppelt zu pflegen? Diese Anleitung zeigt dir jeden Klick. Mach einen Schritt nach dem anderen.

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

Die zwei Wege – welcher passt zu dir?

Beide Wege zeigen dasselbe: dein Angebot mit Bild, Beschreibung, Terminen und Tarifen. Die Farben kommen aus deinem PetWorkers.

Der Ablauf

1. Ein einzelnes Angebot einbinden (eine Gruppe, ein Kurs oder eine 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. Wenn etwas nicht klappt
8. Andere Seitenmodule einbinden

Teil 1: Ein einzelnes Angebot einbinden

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

Schritt 1: Das Angebot öffnen

Öffne das Angebot, das auf deine Website soll:

• eine Gruppe: Hundeschule → Gruppen (direkt: /groups.php hinter deiner PetWorkers-Adresse, zum Beispiel https://dein-betrieb.petworkers.app/groups.php)
• einen Kurs: Hundeschule → Kurse (/courses.php)
• eine Veranstaltung: Veranstaltungen → Einzelveranstaltungen (/singleevents.php)

Klicke in der Zeile des Angebots auf den Stift.

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

Ganz oben im Formular steht eine Zeile mit Sprungmarken. Klicke dort auf „Auf der Website einbinden“ – oder scrolle ganz nach unten. Der Kasten steht am Ende des Formulars.

Wichtig: Den Kasten gibt es nur bei einem gespeicherten Angebot. Legst du gerade ein neues Angebot an, speichere es zuerst einmal.

Schritt 3: Den passenden Code kopieren

• Deine Website ist WordPress und das Plugin ist installiert (Teil 4)? Klicke beim WordPress-Shortcode auf „Kopieren“. Du hast jetzt eine Zeile wie [petworkers angebot="gruppe" id="1"] in der Zwischenablage.
• Jede andere Website (oder WordPress ohne Plugin)? Klicke beim iframe-Code auf „Kopieren“.

Die Zahl bei id="…" ist die Nummer deines Angebots. Die Angebotsart steht davor: gruppe, kurs oder veranstaltung. 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, tippe Shortcode ein und klicke auf den Block „Shortcode“.
3. Klicke in das Feld des neuen Blocks und füge den Code ein: Strg + V (Mac: cmd + V).
4. Klicke oben rechts auf „Speichern“ bzw. „Veröffentlichen“.

Schritt 4b: In eine andere Website einfügen

1. Öffne in deinem Website-Baukasten die Seite und füge 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

Öffne die Seite auf deiner Website. Dort steht jetzt nur dieses eine Angebot: Bild, Name, Beschreibung, darunter die kommenden Termine und die Tarife mit Preis.

Was beim Klick auf einen Termin passiert, steht in Teil 5.

Teil 2: Mehrere ausgewählte Angebote einbinden

So zeigst du mehrere Angebote zusammen als Liste, zum Beispiel alle Welpenangebote auf deiner Startseite. Du wählst die Angebote einmal in PetWorkers aus und bekommst einen Code für alle.

Schritt 1: System → Einbindungen öffnen

Klicke links im Menü auf System → Einbindungen (direkt: /einbindungen.php). Klicke oben rechts auf „Einbindung hinzufügen“.

Schritt 2: Titel, Seitenmodul und Angebote wählen

1. Titel: ein Name nur für dich, zum Beispiel „Welpenangebote Startseite“. Deine Besucher sehen ihn nicht.
2. Seitenmodul: wähle „Angebote (Gruppen, Kurse und Veranstaltungen gemischt)“.
3. Einzelne Angebote auswählen (keine Auswahl = alle): Klicke das erste Angebot an. Für jedes weitere Angebot hältst du Strg gedrückt (Mac: cmd) und klickst es an. Ausgewählte Angebote sind grau hinterlegt.

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: Speichern

Scrolle nach unten und klicke auf „Einbindung hinzufügen“. Das Häkchen „Aktiv“ bleibt gesetzt.

Schritt 4: Den Code holen

Du bist wieder in der Liste. Klicke in der Zeile deiner neuen Einbindung auf „Code anzeigen“. Darunter erscheint der Kasten „Code anzeigen: …“.

Klicke in das Feld, markiere alles mit Strg + A (Mac: cmd + A) und kopiere mit Strg + C (Mac: cmd + C). Dann fügst du den Code genau wie in Teil 1, Schritt 4 ein.

Später etwas ändern

Klicke in der Liste auf den Stift der Einbindung, ändere die Auswahl und speichere. Der Code auf deiner Website bleibt gleich – du musst dort nichts ändern. Im iframe siehst du die Änderung sofort, im WordPress-Plugin nach spätestens fünf Minuten (oder sofort mit „Zwischenspeicher leeren“ unter Einstellungen → PetWorkers Classic).

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

Teil 3: Filter, Angebotsart, Kategorie und Standort

Öffne die Einbindung mit dem Stift. Beim Bearbeiten siehst du alle Einstellungen:

• Filter „Standort“ / „Kategorie“ / „Angebotsart“ zeigen – damit können deine Besucher selbst filtern. Ein Filter erscheint nur, wenn er eingeschaltet ist und es mindestens zwei Werte gibt.
• Angebotsarten (keine Auswahl = alle) – nur Gruppen, nur Kurse, nur Veranstaltungen oder eine Kombination.
• Kategorien (keine Auswahl = alle) – zum Beispiel nur „Welpen“.
• Standorte – erscheint nur, wenn du mehrere Standorte hast.
• Angebote nach Name sortieren (sonst nach dem nächsten Termin) und Nur buchbare Angebote zeigen (freie Plätze und ein kommender Termin).
• Höchstens so viele Angebote zeigen (leer = alle).

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.

Beispiel „Alle Welpenangebote“: keine einzelnen Angebote auswählen, unter Kategorien nur „Welpen“ anhaken. Neue Welpenangebote erscheinen dann von selbst.

Mehr zum Seitenmodul: Seitenmodul „Angebote“.

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 in PetWorkers System → Einbindungen. Unten im Kasten „WordPress-Plugin“ steht der Name mit der aktuellen Fassung, zum Beispiel „PetWorkers Classic 1.0.9“. Klicke auf „Plugin herunterladen“. Du bekommst eine ZIP-Datei. Nicht entpacken!

Gibt es noch keinen Plugin-Schlüssel, klicke zuerst auf „Plugin-Schlüssel anlegen“.

Schritt 2: Plugin in WordPress installieren

1. Melde dich in WordPress an. Klicke links auf Plugins → Plugin hinzufügen.
2. Klicke oben auf „Plugin hochladen“.
3. Klicke auf „Datei auswählen“ und wähle die ZIP-Datei aus Schritt 1.
4. Klicke auf „Jetzt installieren“ und danach auf „Plugin aktivieren“.

Schritt 3: Plugin einrichten

1. Klicke in WordPress links auf Einstellungen → PetWorkers Classic.
2. Adresse der PetWorkers-Instanz: deine PetWorkers-Adresse, zum Beispiel https://dein-betrieb.petworkers.app – ohne etwas dahinter.
3. Plugin-Schlüssel: in PetWorkers unter System → Einbindungen in das Feld „Plugin-Schlüssel“ klicken (das kopiert ihn) und hier einfügen.
4. Klicke auf „Speichern und Verbindung prüfen“. Steht unter Verbindung „Verbunden.“, ist alles fertig. Darunter siehst du alle deine Einbindungen mit ihrem 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 Schlüssel in WordPress ein.

Schritt 4: Plugin aktualisieren

Gibt es in PetWorkers eine neuere Fassung, zeigt WordPress sie unter Plugins wie jedes andere Update an: „Eine neue Version von PetWorkers Classic ist verfügbar.“ Klicke auf „jetzt aktualisieren“. Herunterladen musst du dafür nichts. Auf Einstellungen → PetWorkers Classic steht außerdem „Plugin-Fassung hier: … · in der Instanz: … — Update verfügbar“.

Für die Shortcodes angebot und angebote brauchst du mindestens die Fassung 1.0.8.

Teil 5: Was deine Besucher sehen und wie sie buchen

• Einzelnes Angebot: Bild, Name, Beschreibung, kommende Termine und Tarife. Interne Vermerke und Notizen erscheinen nie.
• Termin anklicken: Die Buchung öffnet sich in einem neuen Tab auf deiner PetWorkers-Seite. Bei Gruppen ist der angeklickte Termin dort schon angehakt. Kurse und Veranstaltungen bucht man als Ganzes.
• „Weiter zur Buchung“ bzw. „Details & Buchung“: ö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 auf deiner PetWorkers-Seite und klappt in jedem Browser. 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, verschwindet es von deiner Website. Beim einzelnen Angebot steht dann an seiner Stelle: „Dieses Angebot ist derzeit nicht verfügbar.“ In einer Liste fällt es einfach weg. Den Code auf deiner Website musst du dafür nicht anfassen.

Holst du das Angebot zurück (Archiv aufheben, wieder aktiv), erscheint es mit demselben Code wieder.

Wenn etwas nicht klappt

Andere Seitenmodule einbinden

Unter System → Einbindungen kannst du nicht nur Angebote einbinden, sondern jedes dieser Seitenmodule: Einzeltermine, Gruppen, Kurse, Veranstaltungen, Angebote, Stempelkarten und Abos sowie Platzvermietung. Der Ablauf ist derselbe wie in Teil 2: Einbindung hinzufügen, Seitenmodul wählen, speichern, „Code anzeigen“.

• Für Einzeltermine wählst du bei Bedarf die Terminart (nur für das Seitenmodul „Einzeltermine“).
• Das zugehörige Modul muss unter System → Einstellungen → Module eingeschaltet sein.
• Erlaubte Herkünfte (eine pro Zeile, leer = alle): Hier legst du fest, auf welchen Websites der iframe erscheinen darf, zum Beispiel https://www.deine-hundeschule.de. Für das WordPress-Plugin spielt das Feld keine Rolle.
• Mit dem Häkchen „Aktiv“ schaltest du eine Einbindung ab, ohne den Code auf deiner Website zu ändern. Gelöschte Einbindungen findest du im Papierkorb.
• Statt der Buchungsformulare zeigt die Einbindung den Knopf „Weiter zur Buchung“. Er öffnet die Buchung auf deiner PetWorkers-Seite in einem neuen Tab.

Sind in WordPress die Plugins „PetWorkers Classic“ und „PetWorkers Wave“ beide aktiv, gehört [petworkers …] zu Wave. Für Classic schreibst du dann [petworkers_classic …], zum Beispiel [petworkers_classic angebot="gruppe" id="1"]. Ein Hinweis in WordPress zeigt die Zuordnung.

Siehe auch: Seitenmodul „Angebote“ · Gruppen und Kurse · Veranstaltungen