BuchungsmaschineMotorkonfiguration

Ein Buchungs-Widget auf Ihrer Website einbinden

Fünf Widget-Typen, sieben Sprachen und eine Zeile Code. So wählen Sie die Form aus, die zu Ihrer Website passt, passen das Design entsprechend an und fügen das Widget dort ein, wo es die meisten Direktbuchungen generiert.

Wo Sie es finden können
Booking EngineWebsite Widgets
Genehmigung erforderlich
booking-engine.widget.edit
Zuletzt überprüft
15. August 2026

Die meisten Gäste, die direkt bei Ihnen buchen, beginnen auf Ihrer eigenen Website, nicht auf Ihrer Buchungsseite. Das Widget verbindet beide: eine Datumsauswahl oder einfach nur eine Schaltfläche, die auf Ihrer Website platziert ist und den Gast zu Ihrer Prostay-Buchungsseite weiterleitet, wobei die Daten bereits vorausgefüllt sind. Auf dieser Seite können Sie das Widget erstellen und erhalten die eine Codezeile, mit der es installiert wird.

Was das Widget eigentlich ist

Es handelt sich um ein einzelnes Skript-Tag. Sie fügen es einmal in Ihre Website ein, und es rendert das Widget an der Stelle, an der Sie es platzieren. Alles, was Sie auf diesem Bildschirm auswählen, wird in dieser einen Zeile übertragen, was zwei nützliche Vorteile mit sich bringt: Ihr Webentwickler hat fast nichts zu tun, und wenn Sie das Widget später ändern möchten, müssen Sie lediglich eine neue Zeile kopieren, anstatt etwas neu erstellen zu müssen.

Das Widget nimmt selbst keine Buchungen entgegen. Es erfasst Termine und leitet den Gast auf Ihre Buchungsseite weiter – diese gestalten Sie bei der Anpassung des Erscheinungsbilds Ihrer Buchungsmaschine . Beide Elemente werden separat eingerichtet, und es lohnt sich, sie einheitlich zu gestalten.

Aufbau des Bildschirms

Der Bildschirm „Website Widgets“. Ein Widget mit der Auswahl „type“ (Sprache), eingestellt auf „Horizontal“, befindet sich neben einem Widget mit der Auswahl „Preferred Widget Language“ (Land), eingestellt auf „English“, darunter stehen „Customize button text“ und „Button Color“. Ein Bereich „Preview Style“ zeigt eine Leiste für „Check-in“ und „Check-out“ mit einer goldenen Schaltfläche „Check availability“. Darunter befinden sich das generierte Script-Tag und die Frage „Open booking page in a new window?“ (Welchen Tag möchten Sie verwenden?), eingestellt auf „Yes“.
Jedes Steuerelement auf diesem Bildschirm wird letztendlich in der einzigen Codezeile unten untergebracht.
  1. Widget-Typ. Die Form des Widgets. Fünf Auswahlmöglichkeiten – und die einzige Entscheidung auf diesem Bildschirm, die wirklich zählt.
  2. Bevorzugte Widget-Sprache. Die Sprache, in der das Widget selbst geschrieben ist.
  3. Vorschau-Stil: Das Widget, wie es erscheinen wird – es wird bei jeder Änderung neu gezeichnet.
  4. Der Einbettungscode. Klicken Sie darauf, um ihn zu kopieren. Dieser Code wird auf Ihrer Website eingebunden.

Die fünf Widget-Typen

Wählen Sie danach aus, wo es Platz finden muss, und nicht danach, was auf diesem Bildschirm am besten aussieht. Ein Widget, das in eine schmale Spalte gequetscht werden muss, sieht schlechter aus als eines, das für den verfügbaren Platz ausgewählt wurde.

Das Bedienfeld „Vorschau-Stil“ mit dem Widget „Horizontal“: ein Feld „Check-in Date“ mit dem Eintrag „22.08.2026“, ein Feld „Check-<span translate="no">out Date</span>“ mit dem Eintrag „25.08.2026“ und eine goldfarbene Schaltfläche „Check availability“, alles in einer Zeile.
Horizontal. Eine Reihe – daher passt es in einen Kopfbereich, aber nicht in etwas Schmaleres.
TypWas es ist und wo es hingehört
Horizontal Sowohl Datumsfelder als auch die Schaltfläche in einer Zeile. Die Standardeinstellung und die richtige Wahl für einen breiten Bereich: unter einem Hero-Bild oder am oberen Rand einer Startseite.
Stacked Die gleichen Felder vertikal angeordnet. Für eine Seitenleiste, eine schmale Spalte oder überall dort, wo die horizontale Version zu eng würde.
Floating bar Ein Streifen in Ihrer Markenfarbe, der neben den Daten eine kurze Botschaft trägt. Es ist der einzige Typ mit eigener Botschaft und eigenem Hintergrund, was ihn zur idealen Wahl für eine Kampagne macht: kostenlos parken, direkt buchen, dritte Nacht zum halben Preis.
Large Button Eine Schaltfläche und sonst nichts. Keine Daten: Der Gast wählt diese auf der Buchungsseite aus. Verwenden Sie diese Variante dort, wo ein Datumswähler störend wirken würde, beispielsweise auf einer Zimmerbeschreibungsseite.
Small Button Das Gleiche, nur kleiner. Konzipiert für eine Navigationsleiste, neben Ihrer Telefonnummer.
Das Vorschau-Stil-Fenster mit dem Widget „Floating bar“: ein blauer Balken mit der Aufschrift „Direkt buchen und kostenlos parken“, ein Feld für „Check-in Date“, ein Feld für „Check-<span translate="no">out Date</span>“ und eine goldene Schaltfläche „Check availability“.
Die schwebende Leiste ist die einzige Variante mit eigener Botschaft und eigener Hintergrundfarbe.
Das Vorschau-Stil-Fenster mit dem Widget „Large Button“: eine einzelne goldene Schaltfläche mit der Aufschrift „Check availability“, ohne Datumsfelder.
Die beiden Schaltflächentypen verzichten auf die Datumsangabe und leiten den Gast direkt zur Buchungsseite weiter.

Die Auswahl der Sprache

Preferred Widget Language legt die Sprache der eigenen Texte des Widgets fest: die Feldbezeichnungen und die Schaltfläche. Es stehen sieben Sprachen zur Auswahl: Englisch, Deutsch, Spanisch, Französisch, Italienisch, Portugiesisch und Thailändisch, und die Auswahl wird im Einbettungscode als zweistelliger Code übermittelt.

Pro Widget ist nur eine Sprache zulässig; passen Sie diese daher eher an die Seite an, auf der es platziert ist, als an Ihre Besucher. Wenn Ihre Website eine englische und eine deutsche Seite enthält, verwenden Sie den Code zweimal – jeweils mit einer der beiden Sprachen – und fügen Sie den passenden Code auf jeder Seite ein.

Anpassung an das Design Ihrer Website

Die Feldzeile mit dem ausgewählten Widget „Floating bar“: Customize text mit dem Text „Book direct and park free“, Customize button text mit dem Text „Check availability“, ein Feld „Brand Color“, das auf „#1643E0“ eingestellt ist, und ein Feld „Button Color“, das auf „#CD9744“ eingestellt ist, jeweils mit einem Farbfeld und einer Schaltfläche zum Zurücksetzen.
Für die schwebende Leiste erscheinen zwei zusätzliche Felder, die wieder verschwinden, wenn Sie den Typ wechseln.
FeldWas es ändert
Customize button text Der Text auf der Schaltfläche. Für jeden Typ verfügbar. „Check availability“ ist eine sicherere Standardformulierung als „Book now“, da sie weniger verspricht und bereits in einer früheren Entscheidungsphase zutrifft.
Customize text Nur bei der schwebenden Leiste. Die Meldung neben den Datumsangaben. Beschränken Sie sich auf wenige Wörter: Sie teilt sich einen einzigen Bereich mit zwei Datumsfeldern und einer Schaltfläche.
Brand Color Nur bei der schwebenden Leiste. Der Hintergrund des Streifens. Wird auf „#1643E0“ zurückgesetzt. Da die Beschriftungen auf der Leiste weiß sind, würde eine blasse Farbe hier deren Lesbarkeit beeinträchtigen.
Button Color Die Schaltfläche, bei jedem Typ. Wird auf „#CD9744“ zurückgesetzt. Dies ist die einzige Farbe auf Ihrer Website, die sich nicht in den Hintergrund einfügen sollte.

Klicken Sie auf ein Farbfeld, um eine Farbauswahl zu öffnen, oder geben Sie einen Hex-Wert ein. Das Quadrat daneben zeigt die Farbe an, und die blaue Schaltfläche setzt sie auf den Standardwert zurück.

Neues Fenster oder dasselbe

Open booking page in a new window? entscheidet darüber, ob die Buchungsseite Ihre Website im Tab des Gastes ersetzt oder daneben geöffnet wird.

Yes lässt Ihre Website hinter der Buchung geöffnet, was weniger verbindlich wirkt und einen Gast, der die Buchung abbricht, auf Ihrer Website hält, anstatt dass er sich irgendwo anders befindet. „No “ behält alles in einem Tab bei, was auf einem Smartphone übersichtlicher ist, da dort ein zweiter Tab leicht aus den Augen verloren wird. „Ja“ ist die gängigere Wahl für ein Publikum, das vorwiegend Desktop-Computer nutzt, und der Unterschied ist in beiden Fällen gering.

Der Einbettungscode

Der generierte Einbettungscode unter der Überschrift „Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre Website ein“: ein einzelnes Script-Tag mit src https://app.prostay.com/widget/load/demo-hotel/ horizontal?lang=en&newWindow=1, mit einem Kopiersymbol am Ende der Zeile.
Ein Skript-Tag. Das Objekt-Objekt, der Widget-Typ, die Sprache und die Option „Neues Fenster“ sind alle in der URL enthalten.

Ein Klick auf die Zeile kopiert sie. Es lohnt sich, sich diese 30 Sekunden Zeit zum Lesen zu nehmen, denn alles darin haben Sie selbst ausgewählt:

  • demo-hotel ist Ihr Objekt-Schlüssel, anhand dessen das Widget erkennt, wessen Zimmer angezeigt werden sollen.
  • horizontal ist der Widget-Typ.
  • lang=en ist die Sprache.
  • newWindow=1 ist die Angabe zur neuen Fenster-Option, wobei 1 für „Ja“ und 0 für „Nein“ steht.

Wo Sie es auf Ihrer Website platzieren sollten

Fügen Sie die Zeile in den HTML-Code Ihrer Seite ein, und zwar genau an der Stelle, an der das Widget erscheinen soll. In den meisten Website-Baukästen bedeutet dies, einen HTML- oder Einbettungsblock hinzuzufügen. Das Widget wird an der Stelle angezeigt, an der sich der Tag befindet; ein Tag in der Fußzeile sorgt also dafür, dass das Widget in der Fußzeile erscheint.

  1. Wählen Sie hier den Typ, die Sprache und die Farben aus und klicken Sie anschließend auf „Save“.
  2. Klicken Sie auf den Code, um ihn zu kopieren.
  3. Fügen Sie in Ihrem Website-Editor einen HTML- oder benutzerdefinierten Code-Block an der Stelle ein, an der das Widget erscheinen soll.
  4. Fügen Sie die Zeile ein und veröffentlichen Sie die Seite.
  5. Öffnen Sie die Seite so, wie es ein Gast tun würde – sowohl auf einem Smartphone als auch auf einem Desktop – und führen Sie eine echte Suche durch.

Das Einzige, was Sie gründlich testen sollten, ist der Übergang. Wählen Sie Termine im Widget aus, folgen Sie dem Link zur Buchungsseite und überprüfen Sie, ob die Termine übernommen wurden und ob die angezeigten Zimmer Ihren Erwartungen entsprechen. Das ist die eigentliche Aufgabe des Widgets, und es ist der einzige Teil, bei dem ein Gast bemerken würde, wenn etwas schiefgeht.

Häufig gestellte Fragen

  • Benötige ich einen Entwickler, um dies zu installieren?

    In der Regel nicht. Jeder Website-Baukasten mit einem HTML- oder Einbettungsblock unterstützt dies, was WordPress, Squarespace, Wix und die meisten Anbieter von Hotel-Websites umfasst. Wenn Ihre Website individuell erstellt wurde, benötigt Ihr Entwickler eine Zeile HTML und etwa eine Minute.

  • Ich habe hier die Farben geändert. Warum hat sich meine Website nicht geändert?

    Da die Einstellungen in dem von Ihnen eingefügten Code enthalten sind, kopieren Sie bitte die neue Zeile von diesem Bildschirm und ersetzen Sie die alte auf Ihrer Website. Alles, was im Einbettungscode erscheint – der Typ, die Sprache und die Option „Neues Fenster“ – funktioniert auf dieselbe Weise.

  • Kann ich verschiedene Widgets auf verschiedenen Seiten platzieren?

    Ja. Richten Sie eines ein, kopieren Sie den Code, ändern Sie dann die Einstellungen und kopieren Sie erneut. Jede eingefügte Zeile ist unabhängig, sodass ein gestapeltes Widget in einer Seitenleiste und eine kleine Schaltfläche in der Navigation auf derselben Website vorhanden sein können. Auf diesem Bildschirm wird nur der zuletzt von Ihnen gespeicherte Satz angezeigt.

  • Verlangsamt das Widget meine Website?

    Es handelt sich um ein kleines Skript, das nach dem Laden Ihrer Seite geladen wird. Achten Sie dabei nicht auf die Geschwindigkeit, sondern auf das Layout: Auf einem schmalen Bildschirm wird ein horizontales Widget umgebrochen; sehen Sie sich daher jede Seite, die ein solches Widget enthält, auf einem Smartphone an, bevor Sie das Projekt als fertiggestellt betrachten.

  • Die Daten in der Vorschau beziehen sich auf nächste Woche. Woher stammen sie?

    Sie dienen lediglich zur Veranschaulichung, damit in der Vorschau kein leeres Feld angezeigt wird. Es wird keine Suche mit ihnen durchgeführt, und das Widget auf Ihrer Website öffnet sich, ohne dass Daten ausgewählt wurden.

War dieser Artikel hilfreich?

Verwandte Artikel

Haben Sie immer noch Schwierigkeiten?

Der Support beantwortet Ihre Anfragen auch direkt in der App. Wenn Sie also bereits angemeldet sind, erhalten Sie dort schneller eine Antwort. Andernfalls teilen Sie uns bitte den Namen der Immobilie mit und beschreiben Sie, was Sie versucht haben.