You can use the Lodgify Booking Widget to integrate Lodgify's booking engine on an external website. For this, we offer three options: a Search Box, a Booking box, a Book Button, and a Book Now Box.
If you have a single rental website (with or without room types), the external widgets will redirect the guest to your Lodgify check-out page. If you have a multiple rentals website, the guest will be redirected to your All Properties page. 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.
Read about:
- Available widget options
- Generating the embed code
- Seamlessly integrating the Search Box on your external website
Available widget options
Lodgify offers 4 different options to link the Lodgify reservation system to an external website.
💡 Note: If you are using the legacy feature of room/rental types, the Book Now Box has a different look. See below.
|
Search Box ⭐ Recommended option as this is the only option that allows seamless integration. |
In case you have several rentals, the Search Box will show a possibility to filter by location. If you only offer one rental, guests can search by available dates and number of guests. Learn how to seamlessly integrate the search box on your external website. |
|
Booking box |
This widget can be generated per rental. It contains an availability calendar and the price for the dates selected. |
|
Book button |
This is a simple way of connecting a website if you only have one rental. In case you have a website with multiple rentals where each rental has its separate page, you can also create a button for every single rental. |
|
Book Now box |
We recommend this option for single rental websites, however, if you have a website with multiple rentals where each rental has its separate page, you can also integrate a Book Now box for every single rental on their respective page. 💡 Note: Whilst you can have more than one of these widgets across various pages of your website, you can add only these widgets per page. 💡 Note: In case you use our legacy feature of room types the Book Now box will display each room type like this: |
💡 Note: If you are choosing the Search box or the Booking box, you will be able to choose the design of the button and you will have the option to auto-update to your widget, so the product updates for bug resolutions can be sent automatically.
Generating the embed code
You can use a Book Button, a Booking box or a Book Now Box on your external website if you offer one rental only (no matter if this rental has room types, or not). When the guest clicks the book button, they 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:
- Go to your Main Menu in the top left corner and select Website builder.
- Now go to External Widgets.
- In Widget Type, choose from the drop-down menu if you want to create a Book Button, a Booking box or a Book Now Box.
💡 Note: If you have several rentals and want to use a Book Button, a Booking box or a Book Now 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. - Select the rental, language, and currency you want to use in the widget and then Generate the embed code / Generate code.
💡 Note: The colors of the Book Now button widget can be changed from the Advanced options. The colors of the Book Now box widget must be changed via CSS. - Copy the JavaScript code onto your clipboard and paste it into your external website (usually into some type of HTML Widget).
💡 Note: If you want to use these widgets on your WIX or Weebly website, you need to make some changes to the embed code before implementing the code into the Code widget.
| Modification Instructions | |
|---|---|
| Standard embed code from Lodgify | <script type="text/javascript" async="async" class="embed-ldgfy-script-loader embed-ldgfy-book-script-loader" src="//static.lodgify.com/themes/ shared/v3/assets/latest/embed-ldgfy-book.min.js" data-website-id="136710" data-website-slug="helloberlin" data-domain="lodgify.com" data-protocol="https" data-property-id="166013" data-culture="en" data-culture-iso="en-US" data-currency="EUR" data-token= "QFUKS2e8hURoYyUZWpqjqsJngOBpeu gCmlo3BOyMb6HDz2wvMELUEZ2Ng4xvDEiI"></script> |
| Changes needed for implementation in WIX | In order to make the code work in WIX you need to make the following changes:
See the code with the changes: |
| Changes needed for implementation in Weebly |
In order to make the code work in Weebly, you need to make the following change:
See the code with the change: <body><script type="text/javascript" async="async" class="embed-ldgfy-script-loader embed-ldgfy-book-script-loader" src="//static.lodgify.com/themes/ shared/v3/assets/latest/embed-ldgfy-book.min.js" data-website-id="136710" data-website-slug="helloberlin" data-domain="lodgify.com" data-protocol="https" data-property-id="166013" data-culture="en" data-culture-iso="en-US" data-currency="EUR" data-token= "QFUKS2e8hURoYyUZWpqjqsJngOBpeu gCmlo3BOyMb6HDz2wvMELUEZ2Ng4xvDEiI"></script></body> |
Seamlessly integrating the Search Box on your external website
The search bar 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.
➡ You can find an example of the seamless integration of the widget on a Squarespace website here.
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:
- Go to your Main Menu in the top left corner and select Website builder.
- Now go to External Widgets.
- In Widget Type, select Search Box from the drop-down menu and choose the language.
- 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.
💡 Note: 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. - Then Generate the embed code / 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 process to appear under a subdomain you need to set this up with your domain provider.
- Go to your domain provider and into the DNS section of your account.
- There you can create a subdomain.
- Now set up the two A-Records of your subdomain:
💡 Note: The name of the A-Records should be the subdomain you want the booking flow to appear on. For example, if the booking flow should appear under booking.yourdomain.com, set the name of the A-Records to "booking".- Set up the first A-Record as booking.yourdomain.com pointing to the IP address to 104.155.59.202.
- Set up the second A-Record as www.booking.yourdomain.com also pointing to the IP address to 104.155.59.202.
Link the subdomain to your Lodgify website
Once you have configured the subdomain in your domain provider you need to link it to your Lodgify website.
- In Lodgify go to your Main Menu in the top left corner and select Website builder.
- Now select Settings.
- Select the Domain tab and click Link existing domain.
- A new pop-up window will appear where you need to fill in the name of your subdomain and tick the check-box that you are linking a subdomain.
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:
- In Lodgify go to your Main Menu in the top left corner and select Website builder.
- Now select Styles
- Scroll to the very bottom and click Logo.
- 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.