Verwenden Sie die Buchungs-Widget von Lodgify auf einer externen Webseite

Sie können das Lodgify Buchungs-Widget verwenden, um die Buchungs-Engine von Lodgify auf einer externen Webseite zu integrieren. Dafür bieten wir mehrere Optionen: eine “Suchen” -box und eine “Buchen” -box.

Die “Suchen” -box Option ist unsere empfohlene Option, da sie die einzige ist, die den Buchungsablauf nahtlos in Ihre externe Webseite integrieren kann. Auf diese Weise wird der Gast Ihre externe Webseite nie wissentlich verlassen.

💡 Hinweis: Lodgify-Widgets sind kompatibel mit den Standardversionen von WordPress, Squarespace und Wix. Layout- und Themenvariationen können die Kompatibilität beeinflussen. Bei Einbettungsfragen wenden Sie sich bitte an Ihren Entwickler oder Website-Builder-Anbieter.

Springen Sie zum Abschnitt: 

• Verfügbare Widget-Optionen
• Erstellen des Embed-Codes
• Nahtlose Integration der “Suchen” -box auf Ihrer externen Webseite
• Nahtlose Integration der “Suchen” -box auf WordPress
• Das Buchungs-Widget von Lodgify zu Wix hinzufügen
• Weiterführende Ressourcen

Verfügbare Widget-Optionen

Lodgify bietet 2 verschiedene Optionen, um das Lodgify-Reservierungssystem mit einer externen Webseite zu verknüpfen. 

💡 Hinweis: Ältere Versionen der Widgets sind noch verfügbar hier, werden jedoch bald eingestellt. Um mehr zu erfahren, sehen Sie das Ende des Artikels.

Erstellen des Embed-Codes

Sie können die beiden Widgets auf Ihrer externen Webseite verwenden, wenn Sie nur eine Unterkunft anbieten (unabhängig davon, ob diese Unterkunft alte Zimmertypen hat oder nicht). Gäste werden direkt auf Ihre Lodgify Check-out-Seite weitergeleitet, wo sie den Zimmertyp auswählen können, falls Sie einen haben. Um den Embed-Code des externen Widgets zu erstellen und einzubetten, folgen Sie diesen Schritten:

1. Gehen Sie in das Menü auf der linken Seite und wählen Sie Homepage-Gestalter.
2. Gehen Sie jetzt zu Externe Widgets.
   
   
3. Wählen Sie im Widget-Typ aus dem Dropdown-Menü, ob Sie eine “Buchen” -box oder eine “Suchen” -box erstellen möchten.
4. Sie können Folgendes auswählen:
   • Ob das Dropdown-Menü für den Standort in der Suchleiste angezeigt oder ausgeblendet werden soll (das Standort-Dropdown gilt nur für die “Suchen” -box),
   • Um die Anzeige der Aufschlüsselung der Gästeanzahl ein, oder auszublenden,
   • Um den Basispreis in den Unterkunftslisten ein- oder auszublenden (gilt nur für die “Buchen” -box),
   • Ob automatische Updates für Ihr Widget aktiviert werden sollen, damit Produktaktualisierungen und Fehlerbehebungen automatisch übernommen werden,
   • Das Design des Widgets.
     
5. Hier sind einige Einstellungen für das “Buchen” -box:
   • Sie können wählen, ob der "Ab"-Preis im Widget vor der Auswahl der Daten angezeigt wird.
   • Sie können eine feste Währung für alle Gäste im Widget festlegen oder die Währung entsprechend der IP-Adresse Ihrer Gäste einstellen.
     
   • Wenn Sie mehrere Unterkünfte haben und eine “Buchen” -box verwenden möchten, müssen Sie für jede spezifische Unterkunft ein Widget erstellen oder einen Button auf Ihrer externen Webseite erstellen, der zu Ihrer Alle Unterkünfte Seite verlinkt.
6. Wählen Sie die Unterkunft, Sprache, die Sie im Widget verwenden möchten und klicken Sie dann auf Code generieren.
7. Sie werden einen Bereich mit Code sehen, der zwei Code-Einträge enthält. Kopieren Sie zunächst den ersten Code und fügen Sie ihn an der Stelle ein, wo Sie ihn integrieren möchten. Fügen Sie dann direkt unterhalb den zweiten Code hinzu.
   
   Hier sind einige Anweisungen basierend auf verschiedenen möglichen Szenarien:
   • Um mehrere Widgets auf derselben Seite hinzuzufügen: Kopieren und fügen Sie den ersten Code für jedes Widget ein, das Sie hinzufügen möchten, und fügen Sie dann einmal den zweiten Code hinzu.
   • Um Widgets auf verschiedenen Seiten Ihrer Website hinzuzufügen: Kopieren und fügen Sie für jede Seite den ersten Code gefolgt vom zweiten Code ein.
   • Um verschiedene Widget-Optionen auf derselben Seite hinzuzufügen (zum Beispiel “Buchen” -box und “Suchen” -box): Kopieren und fügen Sie sowohl den ersten als auch den zweiten Code für jede Widget-Option auf derselben Seite ein.

Wenn das externe Widget nicht korrekt angezeigt wird, stellen Sie bitte sicher, dass beide Code-Snippets richtig kopiert wurden.
Prüfen Sie anschließend, ob das Widget auf einer Drittanbieter-Website funktioniert, z. B. onecompiler.com/html. Wenn das Widget auf anderen Websites funktioniert, aber nicht auf Ihrer eigenen, stört vermutlich ein anderer Code auf Ihrer Seite die korrekte Anzeige des Lodgify-Widgets. In diesem Fall empfehlen wir, den Support Ihres externen Website-Anbieters oder Ihre Webentwickler zu kontaktieren.

Nahtlose Integration der “Suchen” -box auf Ihrer externen Webseite

Die “Suchen” -box ist die empfohlene Option, wenn Sie mehrere Unterkünfte auf Ihrer Webseite haben. Die nahtlose Integration der “Suchen” -box auf Ihrer externen Webseite bedeutet, dass Sie Lodgify mit einer Subdomain Ihrer externen Webseite verbinden können (z.B. suchen.ihredomain.com oder buchen.ihredomain.com). Auf diese Weise werden die Seiten des Buchungsvorgangs unter Ihrer Subdomain angezeigt und die Gäste haben nicht den Eindruck, dass sie auf eine andere Webseite weitergeleitet werden, sondern dass sie den gesamten Buchungsvorgang auf Ihrer externen Webseite durchlaufen.
💡 Hinweis: Die nahtlose Integrationsoption wird am besten für Webseiten mit mehreren Unterkünften verwendet, da auf Webseiten mit einer einzigen Unterkunft der Suchbutton immer automatisch zur Check-out-Seite weiterleitet.

Um dies einzurichten, müssen Sie 4 Schritte ausführen:

• Erstellen Sie den Embed-Code um das Suchbox-Widget auf Ihrer externen Webseite zu integrieren
• Erstellen Sie eine Subdomain bei Ihrem Domain-Anbieter
• Verlinken Sie die Subdomain mit Ihrem Lodgify-Konto
• Füllen Sie eine benutzerdefinierte Logo-URL aus
  •  

Erstellen Sie den Embed-Code für das Suchbox-Widget

Um den Embed-Code zu erstellen, müssen Sie diese Schritte ausführen:

1. Gehen Sie in das Menü auf der linken Seite und wählen Sie Homepage-Gestalter.
2. Gehen Sie jetzt zu Externe Widgets.
   
   
3. Wählen Sie im Widget-Typ “Suchen” -box aus dem Dropdown-Menü und wählen Sie die Sprache aus.
4. Jetzt können Sie auswählen, ob das Widget in einem neuen Fenster oder im selben Fenster geöffnet werden soll, und die Farbe des Suchbuttons auswählen.
   💡 Hinweise:
   • Wenn Sie das Widget auf einer WIX-Webseite einbetten möchten, müssen Sie die Option In neuem Fenster öffnen auswählen, da das Widget sonst auf WIX nicht ordnungsgemäß funktioniert.
   • Obwohl die Farbe des Textes im Button des Widgets und die Farbe des Buttons selbst im Homepage-Gestalter > Externes Widget angepasst werden können, wird die Anzahl der Gäste immer in Schwarz angezeigt, es sei denn, sie wird per CSS auf der externen Webseite des Nutzers überschrieben.
5. Dann Code generieren, kopieren Sie den JavaScript-Code in Ihre Zwischenablage und fügen Sie ihn in Ihre externe Webseite ein (normalerweise in eine Art HTML-Widget).
   💡 Hinweis:  Externe Webseitenkonfigurationen können variieren, jedoch wird das Suchbox-Widget in den meisten Fällen ohne weitere Konfiguration funktionieren, indem der generierte Code in ein Code-Widget Ihres externen Webseiten-Builders eingefügt wird.
   
   1.  

Erstellen Sie eine Subdomain

Wenn Ihr Buchungsmodul unter einer Subdomain erscheinen soll, müssen Sie Ihre Domain verknüpfen und die DNS-Einstellungen für diese Subdomain aktualisieren. Folgen Sie den Schritten in diesem Artikel.

Füllen Sie eine benutzerdefinierte Logo-URL aus

Sobald Gäste auf den Suchbutton klicken, werden sie auf Ihre Alle Unterkünfte-Seite in Lodgify weitergeleitet (oder zur Check-out-Seite, wenn Sie nur eine Unterkunft haben). Um die Integration so nahtlos wie möglich zu gestalten, sollten Sie sicherstellen, dass Gäste, wenn sie auf das Logo oder eines der Menüelemente von der Alle Unterkünfte/Check-out-Seite klicken, zu Ihrer externen Webseite weitergeleitet werden.

Gehen Sie dazu wie folgt vor:

1. Gehen Sie in Lodgify und dann in das Menü auf der linken Seite und wählen Sie Homepage-Gestalter.
2. Wählen Sie jetzt Stile.
3. Scrollen Sie ganz nach unten und klicken Sie auf Logo.
   
4. Scrollen Sie dann ganz nach unten und fügen Sie unter Logo-URL den Link zur Homepage Ihrer externen Webseite hinzu.
   1.  

💡 Hinweise:

• Sie sollten die Menüleiste genauso einrichten, wie sie auf Ihrer externen Webseite ist. Gehen Sie einfach zum Seiteneinrichtungsbereich Ihres Homepage-Gestalters und erstellen Sie einen Link für jedes Menüelement, das zur entsprechenden Seite auf Ihrer externen Webseite führt. Erfahren Sie hier mehr über das Erstellen eines Links in Ihrem Lodgify-Menü.
• Sie können CSS verwenden, um das Erscheinungsbild Ihres Lodgify-Menüs an das Ihrer externen Webseite anzupassen. Erfahren Sie hier mehr über benutzerdefinierten Code in Lodgify.

Nahtlose Integration der “Suchen” -box auf WordPress

Sie können das Suchbox-Widget ganz einfach mit dem Lodgify-Plugin zu Ihrer WordPress-Webseite hinzufügen. Nach der Einrichtung können Sie es schnell und mühelos an mehreren Stellen auf Ihrer Seite hinzufügen.

Um das Suchbox-Widget mit dem Lodgify-Plugin auf WordPress zu integrieren, folgen Sie diesen Schritten:

1. Loggen Sie sich in Ihr WordPress-Konto ein und navigieren Sie zu Plugins.
2. Suchen Sie nach Lodgify und wählen Sie das Plugin Booking Engine by Lodgify:
3. Gehen Sie in Lodgify und dann in das Menü auf der linken Seite und wählen Sie Homepage-Gestalter.
4. Gehen Sie jetzt zu Externe Widgets.
   
   
5. Wählen Sie unter Widget-Typ die Option “Suchen” -box.
6. Erzeugen Sie als Nächstes den Code, kopieren Sie den JavaScript-Code und fügen Sie ihn auf der Plugin-Seite in WordPress ein. Klicken Sie dann auf Speichern.
7. Um das Plugin auf einer bestimmten Seite hinzuzufügen, gehen Sie zu Ihren WordPress-Seiten, bearbeiten Sie die Seite, auf der das Plugin erscheinen soll, und wenn Sie einen neuen Block hinzufügen, wird das Plugin als Lodgify-Such-Widget angezeigt:
   

Das Buchungs-Widget von Lodgify zu Wix hinzufügen

Wenn Sie Wix verwenden, fügen Sie das Buchungs-Widget von Lodgify nicht innerhalb eines <iframe>-Elements hinzu, da dies dazu führen kann, dass das Widget nicht korrekt angezeigt wird. Laut der Dokumentation von Wix kann das Hinzufügen des Widgets über die Optionen HTML einbetten oder Website einbetten die Responsivität des Widgets und jedes anderen auf diese Weise hinzugefügten Codes beeinträchtigen.

Stattdessen sollten Sie die Option Benutzerdefiniertes Element in Wix verwenden, mit der das Widget eingebettet werden kann, ohne die Responsivität zu beeinträchtigen. Detaillierte Anleitungen von Wix finden Sie hier.