Embed the booking calendar on your own website

The calendar widget shows your playroom's availability directly on your own website. Visitors see free and booked days and can start a booking with one click. The booking itself still runs through My Playrooms, including payment, confirmation and management in your host area. No programming needed, a small HTML snippet is enough.

Requirements

• Your playroom is published on My Playrooms.
• You know your playroom's URL path: the last part of your listing's address, e.g. FlairVita in https://www.my-playrooms.de/playrooms/FlairVita.
• You can add custom HTML to your website (e.g. via an "HTML block" or "custom HTML" element in your website builder or CMS).

Embedding in two steps

1. Add a placeholder where the calendar should appear:

<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="YOUR-URL-PATH"
></div>

2. Load the script, once per page, ideally right before the closing </body> tag:

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

Replace YOUR-URL-PATH with your playroom's URL path. That's all: the script finds every placeholder on the page and fills it with the calendar.

Options

You control the behaviour with data- attributes on the placeholder:

What visitors see

• The calendar starts at the current month; arrows let visitors page back and forth. If the current month has no free days, it automatically jumps to the next month with availability.
• Free days are marked as available and show the earliest check-in time ("ab 15:00"), booked days are marked accordingly. Today is highlighted.
• Clicking a free day opens the My Playrooms booking flow in a popup window, with the arrival date and matching booking type prefilled. When the popup closes, visitors are back on your page.
• With data-disable-booking-link="true" days stay non-clickable, which is useful if you only want to inform.

Multiple playrooms or calendars

You can use several placeholders on the same page, also for different playrooms. The script is still included only once:

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

Notes and troubleshooting

• Allow popups: The booking flow opens in a popup. If the browser blocks popups for your site, a notice asks visitors to allow them.
• The calendar doesn't appear: Check that the myp-calendar-widget class is set, the URL path matches exactly (case-sensitive) and the script is included. If a required attribute is missing, the widget shows "Fehlende Konfiguration für den Kalender" (missing calendar configuration).
• Website builders: Some builders strip <script> tags from plain text fields. Use an element for custom HTML/JavaScript instead, or add the script in the page footer area.
• Freshness: The calendar loads availability live from My Playrooms on every page view, so changes to your occupancy calendar (including imported calendars) show up without further action.
• Language: Labels and the booking flow in the popup are currently German.
• Version: Use /calendar-widget/v2/script.js. The older /calendar-widget/script.js stays reachable for compatibility but is no longer developed and expects a single element with the ID myp-calendar-widget instead of a class (one calendar per page).
• Design: The calendar ships with a neutral default style and adapts to the width of its container. Place it in a fixed-width element if needed.

Questions about embedding? Get in touch, we're happy to help.