Buchungskalender auf der eigenen Homepage einbinden

Mit dem Calendar-Widget zeigst du die Verfügbarkeit deines Playrooms direkt auf deiner eigenen Website an. Besucher sehen freie und belegte Tage und können mit einem Klick eine Buchung starten. Die Buchung selbst läuft weiterhin über My Playrooms – inklusive Zahlung, Bestätigung und Verwaltung in deinem Host-Bereich. Du musst nichts weiter programmieren, es genügt ein kleines HTML-Snippet.

Voraussetzungen

• Dein Playroom ist auf My Playrooms veröffentlicht.
• Du kennst den URL-Pfad deines Playrooms. Das ist der letzte Teil der Adresse deines Inserats, z. B. FlairVita in https://www.my-playrooms.de/playrooms/FlairVita.
• Du kannst auf deiner Website eigenen HTML-Code einfügen (z. B. über einen „HTML-Block“ oder „Eigenes HTML“-Element in deinem Website-Baukasten oder CMS).

Einbinden in zwei Schritten

1. Platzhalter einfügen – an der Stelle, an der der Kalender erscheinen soll:

<div
  class="myp-calendar-widget"
  data-months-to-show="2"
  data-server-frontend="https://www.my-playrooms.de"
  data-server-backend="https://api.my-playrooms.de"
  data-playroom-url-path="DEIN-URL-PFAD"
></div>

2. Skript laden – einmal pro Seite, am besten direkt vor dem schließenden </body>-Tag:

<script src="https://www.my-playrooms.de/calendar-widget/v2/script.js"></script>

Ersetze DEIN-URL-PFAD durch den URL-Pfad deines Playrooms. Mehr ist nicht nötig – das Skript findet alle Platzhalter auf der Seite und füllt sie automatisch mit dem Kalender.

Einstellungen

Das Verhalten steuerst du über data--Attribute am Platzhalter:

So sieht es für Besucher aus

• Der Kalender zeigt den aktuellen Monat; mit den Pfeilen blättern Besucher vor und zurück. Liegen im aktuellen Monat keine freien Tage, springt der Kalender automatisch zum nächsten Monat mit Verfügbarkeit.
• Freie Tage sind als verfügbar markiert und zeigen die früheste Check-in-Uhrzeit („ab 15:00“), belegte Tage sind entsprechend gekennzeichnet. Der heutige Tag ist hervorgehoben.
• Ein Klick auf einen freien Tag öffnet den Buchungsablauf von My Playrooms in einem Popup-Fenster, mit dem gewählten Anreisetag und der passenden Buchungsart bereits vorausgefüllt. Beim Schließen des Popups kehren Besucher zu deiner Seite zurück.
• Mit data-disable-booking-link="true" bleiben die Tage nicht klickbar – nützlich, wenn du nur informieren möchtest.

Mehrere Playrooms oder mehrere Kalender

Du kannst mehrere Platzhalter auf derselben Seite verwenden, auch für unterschiedliche Playrooms. Das Skript wird trotzdem nur einmal eingebunden:

<div
  class="myp-calendar-widget"
  data-playroom-url-path="PlayroomA"
  data-months-to-show="1"
  data-server-frontend="https://www.my-playrooms.de"
  data-server-backend="https://api.my-playrooms.de"
></div>

<div
  class="myp-calendar-widget"
  data-playroom-url-path="PlayroomB"
  data-months-to-show="1"
  data-server-frontend="https://www.my-playrooms.de"
  data-server-backend="https://api.my-playrooms.de"
></div>

<script src="https://www.my-playrooms.de/calendar-widget/v2/script.js"></script>

Hinweise und Fehlerbehebung

• Popups erlauben: Der Buchungsablauf öffnet sich in einem Popup. Blockiert der Browser Popups für deine Seite, erscheint ein Hinweis, Popups zu erlauben.
• Der Kalender erscheint nicht: Prüfe, ob die Klasse myp-calendar-widget gesetzt ist, der URL-Pfad exakt (Groß-/Kleinschreibung) stimmt und das Skript eingebunden ist. Fehlt ein Pflichtattribut, zeigt das Widget „Fehlende Konfiguration für den Kalender“ an.
• Website-Baukästen: Manche Baukästen filtern <script>-Tags in einfachen Textfeldern. Nutze dann ein Element für eigenen HTML-/JavaScript-Code oder binde das Skript im Footer-Bereich der Seite ein.
• Aktualität: Der Kalender lädt die Belegung bei jedem Seitenaufruf live von My Playrooms. Änderungen an deinem Belegungsplan (auch importierte Kalender) erscheinen daher ohne weiteres Zutun.
• Sprache: Beschriftungen und der Buchungsablauf im Popup sind derzeit auf Deutsch.
• Version: Verwende die Adresse /calendar-widget/v2/script.js. Die ältere Version /calendar-widget/script.js bleibt aus Kompatibilitätsgründen erreichbar, wird aber nicht weiterentwickelt und erwartet statt einer Klasse ein einzelnes Element mit der ID myp-calendar-widget (nur ein Kalender pro Seite).
• Design: Der Kalender bringt ein neutrales Standard-Design mit und passt sich der Breite seines Containers an. Platziere ihn bei Bedarf in einem Element mit fester Breite.

Fragen zur Einbindung? Schreib uns gerne – wir helfen dir bei der Integration.