Einbetten des Guesty Booking Engine Widgets in eine externe Website

Die Guesty Booking Engine dient als statisches Buchungsportal, über das Gäste Verfügbarkeit einsehen und Aufenthalte buchen können, ohne auf Drittanbieterplattformen zugreifen zu müssen. Durch die Einbettung dieses Portals als Widget auf einer persönlichen Website, beispielsweise Wix, WordPress oder Squarespace, gewährleisten Sie ein einheitliches Markenerlebnis und vermeiden die Präsenz von Drittanbietern.

Wenn Sie über eine eigene Domain verfügen, können Sie diese mit Ihrer Guesty Booking Engine verbinden und Ihre Website-Adresse verwenden.

Voraussetzungen

Das Such-Widget der Guesty Booking Engine benötigt JavaScript. Stellen Sie sicher, dass Ihre Website-Plattform und Ihr Abonnementplan JavaScript oder die Einbindung von benutzerdefiniertem Code unterstützen, bevor Sie das Widget einbetten. Squarespace beispielsweise erfordert mindestens den Business-Plan, um JavaScript-Einbindungen nutzen zu können.

Binden Sie Ihre Guesty Booking Engine ein.

Folgen Sie den nachstehenden Anweisungen, um Ihr Guesty Booking Engine-Widget in eine externe Website einzubetten.

Schritt für Schritt:

1. Melden Sie sich in Ihrem Guesty Konto an.
2. Klicken Sie im seitlichen Navigationsmenü auf Marketing und Vertrieb, um das Dropdown-Menü zu öffnen.
3. Wählen Sie unter Kanal die Option Veröffentlichung aus.
4. Klicken Sie auf das Vorschaubild der Guesty Booking Engine.
5. Klicken Sie in der entsprechenden Zeile der Booking Engine auf .
6. Wählen Sie im Dropdown-Menü die Option „Mit Ihrer eigenen Website verbinden“.
7. Klicken Sie auf , um den Codeausschnitt zu kopieren und ihn auf Ihrer externen Webseite einzufügen.

Widget-Styling und Farbverhalten

Das Such-Widget der Guesty Booking Engine unterstützt einen color zur Steuerung der Hervorhebungs- und Auswahlfarben für Designelemente. Diese Farbe wird automatisch anhand Ihrer Einstellungen für die Booking Engine festgelegt.

Sie können den color im Einbettungscode manuell bearbeiten, um ein individuelles Branding zu ermöglichen.

Empfohlenes Format für den Einbettungscode

Für eine einheitliche Farbgestaltung verwenden Sie bitte immer den aktuellsten Einbettungscode. Der Einbettungscode sieht in etwa so aus wie im folgenden Beispiel (Ihr Code enthält Ihre spezifischen Einstellungen):

<div id="search-widget_IO312PWQ">
  <script>
    !function(e,t,a,n,c,r){
      function s(t){e.console.log("[Guesty Embedded Widget]:",t)}
      var i,d,l,o,y,m,g,h,p,u;
      n&&(i=n,d=t.getElementsByTagName("head")[0],
      (l=t.createElement("link")).rel="stylesheet",
      l.type="text/css",l.href=i,l.media="all",d.appendChild(l)),
      o=function(){
        try{e[a].create(r).catch(function(e){s(e.message)})}
        catch(e){s(e.message)}
      },
      h=!1,y=c,
      m=function(){h||this.readyState&&"complete"!=this.readyState||(h=!0,o())},
      (g=t.createElement("script")).type="text/javascript",
      g.src=y,g.async="true",g.onload=g.onreadystatechange=m,
      p=g,(u=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,u)
    }(
      window,
      document,
      "GuestySearchBarWidget",
      "https://s3.amazonaws.com/guesty-frontend-production/search-bar-production.css",
      "https://s3.amazonaws.com/guesty-frontend-production/search-bar-production.js",
      {
        "siteUrl":"libelulahomes.guestybookings.com",
        "color":"#e2c2a1"
      }
    );
  </script>
</div>

Fehlerbehebung