Beds24-Widget auf Ihrer Website einbinden: Buchungsbox, Kalender und iframe

Die Beds24-Widgets und wohin sie Ihre Gäste führen

Die Buchungswidgets von Beds24 sind für Beds24-Kunden kostenlos: Belegungskalender, Buchungsbox oder Buchungsstreifen, Buttons, ein Such-Widget und das eingebettete iframe. Laut Beds24 gibt es alle Widgets in über 30 Sprachen, und sie lassen sich in WordPress, Wix, Squarespace und Joomla einbinden (Beds24). So kommt ein Widget auf Ihre Website:

1. Wählen Sie im Widget-Bereich Ihrer Beds24-Einstellungen den Widget-Typ.
2. Passen Sie die Einstellungen an und prüfen Sie die Vorschau.
3. Kopieren Sie den Code und fügen Sie ihn ins HTML Ihrer Website ein.

Entscheidend für Ihre Gäste ist, wohin jedes Widget sie führt:

Mit Kalender, Box, Streifen oder Button wählt der Gast auf Ihrer Website und bucht auf der Beds24-Seite: einfach und zuverlässig. Diese Seite hat aber ihr eigenes Design, und der Gast merkt, dass er Ihre Website verlässt.

iframe oder Script-Widget: was sich auf dem Handy ändert

Damit die ganze Buchung auf Ihrer Seite bleibt, gibt es zwei Techniken. Ein iframe ist ein Fenster, das eine andere Website zeigt, hier Ihre Beds24-Buchungsseite. Ein Script-Widget baut Suche, Zimmer und Buchungsformular direkt in Ihre Seite ein.

Den iframe-Code erzeugt Beds24 im Widget-Bereich (IFRAME GENERATOR) und benennt die Nachteile offen (Beds24-Wiki): „iFrames on mobile devices are problematic“, und blockierte Drittanbieter-Cookies können verhindern, dass Daten vom Widget ins iframe gelangen. Beds24 empfiehlt sogar, die Buchungsseite lieber in einem neuen Tab zu öffnen.

Testen Sie jede Einbindung auf einem echten Handy, in einem privaten Fenster, mit einer kompletten Suche.

Wix, Jimdo, Squarespace: was Sie vor dem Einbinden prüfen sollten

Die meisten Baukästen haben ein Element für eigenen Code, und jeder hat seinen Haken. Stand Oktober 2026:

• Wix: Code fügen Sie über HTML einbetten ein. Laut Wix-Hilfe zeigt dieses Element Ihren Code in einem iFrame; ist der Inhalt grösser als der Rahmen, wird er abgeschnitten und zeigt Scroll-Leisten. Für Mobilgeräte empfiehlt Wix, den Desktop-Code auszublenden und eine mobilfreundliche Alternative einzusetzen (Wix-Hilfe). Das Beds24-Wiki ergänzt, dass Wix kein jQuery unterstützt, und rät dort zu Buttons oder Links (Beds24-Wiki).
• Jimdo: In Jimdo Creator fügen Sie Code über das Element Widget/HTML ein. Im Jimdo Website Builder („Dolphin“) geht das nicht: Laut Jimdo-Hilfe lassen sich dort weder eigener HTML-Code noch Skripte, iFrames oder externe Widgets einfügen (Jimdo-Hilfe). Dort bleibt ein Link oder Button zu Ihrer Buchungsseite.
• Squarespace: Nutzen Sie einen Code-Block. JavaScript und iframes in Code-Blöcken gibt es erst ab dem Tarif Core (sowie in einigen älteren Tarifen). Eingeloggt sehen Sie den Code womöglich nicht: Prüfen Sie die Seite in einem privaten Fenster.
• Jeder Baukasten: Ohne Element für eigenen Code verlinken Sie einen „Jetzt buchen“-Button auf eine Buchungsseite.

Ein Beds24-Buchungswidget im eigenen Design: zwei Zeilen Code

Unsere Buchungsmaschine für Beds24 bringt ein Script-Widget mit: reines JavaScript, ohne iframe, ohne jQuery, ohne Tracker, ohne Cookies und ohne Bibliotheken von Drittanbietern. Sobald Ihr Beds24-Konto verbunden ist, gibt Ihnen Ihr Dashboard zwei Zeilen wie diese:

<div class="db" data-tenant="ihr-hotel" data-fallback="https://beds24.com/booking2.php?propid=…"><a href="https://beds24.com/booking2.php?propid=…">Buchen</a></div>
<script src="https://…/embed/ihr-hotel.js"></script>

1. Beds24 verbinden: mit einem Einladungscode (Invite Code), der Zugriff auf Buchungen, Inventar und Unterkünfte gibt. Ein Beds24-Einladungscode gilt 24 Stunden und nur einmal.
2. Zimmer vorbereiten: echte Namen, Fotos, Beschreibungen, Farben. Die Diagnose zeigt jeden Zimmertyp, den Beds24 nicht verkaufen kann.
3. Website freigeben: Tragen Sie in Ihren Einstellungen die Adresse Ihrer Website unter Freigegebene Websites ein, mit und ohne www, falls beides genutzt wird.
4. Die zwei Zeilen einfügen: ins Code-Element Ihres Baukastens, dort, wo das Buchungsformular erscheinen soll, dann veröffentlichen.
5. Auf dem Handy testen: suchen, Zimmer und Rate wählen, Gesamtbetrag prüfen.

Ihre Gäste suchen, vergleichen Zimmer und Raten und buchen auf Ihrer Seite, auf Deutsch, Englisch, Französisch, Italienisch oder Spanisch (die Beds24-Widgets können mehr Sprachen). Verfügbarkeit und Preise kommen live aus Beds24 und werden bei der Buchung erneut geprüft. Die Buchung landet in Beds24, dessen Channel Manager das Zimmer auf Ihren anderen Kanälen schliesst. Die erste Zeile enthält bereits einen Buchungslink auf Ihre Beds24-Seite: Fällt unser Server aus, können Gäste dort buchen, und sobald das Widget geladen ist, ersetzt es den Link.

Auf Wix empfehlen wir die gehostete Buchungsseite hinter einem „Jetzt buchen“-Button. Das eingebettete Widget ist möglich, aber auf Ihrer Website zu testen: Wix führt HTML-Blöcke von einer eigenen Domain aus, tragen Sie also zuerst https://*.filesusr.com unter Freigegebene Websites ein.

Mit WordPress geht es ohne Code: Unser Beds24 WordPress-Plugin setzt dieselbe Buchungsmaske als Block oder Shortcode.

Widget auf der Website oder gehostete Buchungsseite?

Sie müssen sich nicht entscheiden. Zum Widget gehört eine gehostete Buchungsseite: ein Link, der funktioniert, ohne dass Sie Ihre Website anfassen.

• Das Widget gehört auf eine eigene Seite „Buchen“, wo Gäste suchen und buchen wollen.
• Der Link zur gehosteten Seite gehört hinter „Jetzt buchen“-Buttons, in Ihr Google-Unternehmensprofil, in E-Mails und soziale Netzwerke. Er ist auch unsere Empfehlung für Wix und den Jimdo Website Builder.
• Beides funktioniert nebeneinander, und Beds24 bleibt in jedem Fall Ihr PMS und Channel Manager.

Die Tarife finden Sie unter Preise. Und wenn Sie keinen Code anfassen möchten: Wir richten es für Sie ein. Sie senden uns einen Beds24-Einladungscode und Ihre Fotos, wir bereiten alles vor, und Sie geben die Seite frei, bevor sie online geht.

Häufige Fragen