Embedding the Booking Engine widget in an external website

The Guesty Booking Engine serves as a static booking portal that allows guests to browse availability and finalize stays without navigating third-party platforms. By embedding this portal as a widget on a personal website, such as Wix or WordPress, you maintain a consistent brand experience and eliminate third-party distribution fees. 

 If you have your own domain, you can connect it to your Guesty Booking Engine and use your website address.

Embed your Guesty Booking Engine

Follow the instructions below to embed your Guesty Booking Engine widget in an external site.

Step by step:

1. Sign in to your Guesty account.
2. In the top navigation bar, click the mode selector and select Growth mode.
3. Click Distribution.
4. Click the Guesty Booking Engine thumbnail.
5. In the relevant Booking Engine row, click .
6. From the dropdown menu, select Connect to your own website.
7. Click to copy the snippet, and paste it to your external website.

Widget styling & color behavior

The Guesty Booking Engine search widget supports a color parameter to control highlight and selection colors for design elements. This color is automatically set based on your Booking Engine Design settings. 

You can manually edit the color value in the embed code for custom branding.

Recommended embed code format

For consistent color styling, always use the latest embed code. The embed code will look similar to the example below (your code will contain your specific settings):

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

Troubleshooting