Use Lodgify's booking widget on an external website

You can use the Lodgify Booking Widget to integrate Lodgify's booking engine on an external website. For this, we offer several options: a Search Box and a Booking box.

The Search Box option is our recommended option, as it is the only one that can seamlessly integrate the booking flow into your external website. This way the guest will never knowingly leave your external website.

💡 Note: Lodgify widgets are compatible with standard WordPress, Squarespace, and Wix versions. Layout and theme variations may impact compatibility. For embedding questions, please contact your developer or website builder provider.

Read about: 

• Available widget options
• Generating the embed code
• Seamlessly integrating the Search Box on your external website
• Seamlessly integrating the Search Box on Wordpress
• Adding Lodgify's booking widget on Wix
• Linked Resources

Available widget options

Lodgify offers 2 different options to link the Lodgify reservation system to an external website. 

💡 Note: Older versions of widgets are still available here, but will be deprecated shortly. To find out more, see the end of the article.

Generating the embed code

You can use the two widgets on your external website if you offer one rental only (no matter if this rental has legacy room types, or not). Guests will be redirected directly to your Lodgify check-out page where they can select the room type in case you have one. To generate and embed the code of the external widget, follow these steps:

1. Go to your left-hand menu and select Website builder.
2. Now go to External Widgets.
   
   
3. In Widget Type, choose from the drop-down menu if you want to create a Booking box or a Search Box.
4. You will be able to choose:
   
   • To show or hide the location dropdown from the search bar (only applies to the Search box),
   • To show or hide the guest count breakdown,
   • To show or hide the base price on rental listings (only applies to the Booking box),
   • Whether to enable auto-updates for your widget, so product updates and bug fixes are applied automatically,
   • The design of the widget.
     
5. Here are some settings for the Booking box:
   
   • You can choose whether to display the "from" price on the widget before selecting the dates:
     
   • You can choose a fixed display currency for all guests on the widget or set the currency to match your guests' IP addresses:
     
   • If you have several rentals and want to use a Booking box, you need to create a widget for each specific rental or create a button on your external website which links to your All properties page.
6. Select the rental and language you want to use in the widget and then Generate code.
7. You will see a code area with two code inputs. First, copy and paste the first code where you want to embed it. Then, add the second code right below the first one.
   
   Here are some instructions for different scenarios:
   • Adding multiple widgets to the same page: Copy and paste the first code for each widget you want to add, then add the second code once.
   • Adding widgets to separate pages of your website: For each page, copy and paste the first code followed by the second code.
   • Adding different options of widgets to the same page (e.g., booking box and search box): Copy and paste both the first and second codes for each widget option on the same page.

If the external widget is not displaying correctly, please ensure that both code snippets have been copied correctly.
Next, check whether the widget works on a third-party website, such as onecompiler.com/html. If the widget works on other websites but not on your own, it's likely that another piece of code on your website is interfering with the proper display of the Lodgify widget. In this case, we recommend contacting your external website provider’s support team or your web developer for further assistance.

Seamlessly integrating the Search Box on your external website

The search box is the recommended option if you have multiple rentals on your website. Seamlessly integrating the Search Box on your external website means that you can connect Lodgify to a subdomain of your external website (e.g. search.yourdomain.com or booking.yourdomain.com). This way, the pages of the booking process will show up under your subdomain and the guests won't have the impression that they are redirected to another website, but that they go through the entire booking process on your external website.
💡 Note: The seamless integration option is best used for websites with multiple rentals because, on single-rental websites, the search button will always automatically redirect to the check-out page.

To set this up, you need to complete 4 steps:

• Generate the embed code to integrate the Search Box widget on your external website
• Create a subdomain in your domain provider
• Link the subdomain to your Lodgify account
• Fill in a Custom Logo URL

Generate the embed code for the Search Box widget

To generate the embed code, you need to follow these steps:

1. Go to your left-hand menu and select Website builder.
2. Now go to External Widgets.
   
   
3. In Widget Type, select Search Box from the drop-down menu and choose the language.
4. Now you can select if you want the widget to open in a new window or the same window, and select the color of the search button.
   💡 Notes:
   • If you want to embed the widget on a WIX website, you have to select the option Open in new window, as otherwise, the widget will not be able to work properly on WIX.
   • While the color of the text inside the widget’s button and the color of the button itself can be customized in Website Builder > External Widget, the number of guests will always display in black unless overridden by CSS on the user’s external website.
5. Then Generate code, copy the JavaScript code onto your clipboard and paste it into your external website (usually into some type of HTML Widget).
   💡 Note:  External website configurations can vary, however, in most cases, the Search Box widget will work without any further configuration by pasting the generated code into a code widget of your external website builder.
   

Create a subdomain

If you want your booking module to appear under a subdomain, you need to link your domain and update the DNS settings for that subdomain. To do so, follow the steps provided in this article.

Fill in a Custom Logo URL

Once guests click the search button they are redirected to your All properties page in Lodgify (or the check-out page if you only have one rental). In order to make the integration as seamless as possible, you want to make sure that when a guest clicks on the Logo or any of the menu items from the All properties/check-out page, they are redirected to your external website.

To do so, follow these steps:

1. In Lodgify go to your left-hand menu and select Website builder.
2. Now select Styles
3. Scroll to the very bottom and click Logo.
   
4. Then, scroll to the very bottom, in Logo URL add the link to the homepage of your external website.

💡 Note: You should set up the menu bar exactly as it is on your external website. Simply go to the pages setup of your website builder and create a link for each menu item that leads to the corresponding page on your external website. Learn how to create a link on your Lodgify menu.

💡 Note: You can use CSS to match the look of your Lodgify menu to the one of your external website. Learn more about custom code in Lodgify.

Seamlessly integrating the Search Box on Wordpress

You can easily add the search box widget to your WordPress website using the Lodgify plugin. Once set up, you can quickly and effortlessly add it to multiple locations across your site.

To integrate the search box widget on WordPress with the Lodgify plugin, follow these steps:

1. Log in to your Wordpress account and navigate to Plugins.
2. Search Lodgify and select the plugin Booking Engine by Lodgify:
3. In your Lodgify account, go to your left-hand menu and select Website builder.
4. Now go to External Widgets.
   
   
5. In Widget Type, choose Search Box.
6. Next, generate the code, copy the JavaScript code and paste it into the plugin page on WordPress. Then click Save.
7. To add the plugin to a specific page, go to your WordPress pages, edit the page where you want the plugin to appear, and when you add a new block, you’ll see the plugin listed as Lodgify Search Widget:
   

Adding Lodgify's booking widget on Wix

If you're using Wix, do not add Lodgify’s booking widget inside an <iframe> element, as this may cause the widget to display incorrectly. According to Wix’s documentation, adding the widget using the Embed HTML or Embed a Site options can break the responsiveness of the widget and any other code added that way.

Instead, you should use the Wix Custom Element option, which allows the widget to be embedded without affecting responsiveness. You can find detailed instructions from Wix here.