Use the Lodgify reservation system on an external website

You can use the Lodgify Booking Widget to integrate the Lodgify reservation system with an external website. For this, we offer three options: a Search Bar, 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. If you have a multiple rentals website, the guest will be redirected to your All Properties page. The Search Bar option 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: 

Generating the embed code

  1. Go to your Main Menu in the top left corner and select Websites.
  2. Click Edit and then Settings.
  3. Select the Widgets tab. In Widget Type, choose from the drop-down menu if you want to create a Search Bar, Book Button, a Book Now Box.
    💡 Note: If you have several rentals and want to use a Book Now Button 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.

    Search Bar

    💡Note: Recommended option for multiple rentals websites

    Search_Bar.png

    Learn how to seamlessly integrate the search box in your external website.

    💡Note: This is the only option that allows a seamless integration.

    Book button

    2018-01-26_1522.png

    Book Now Box
    if you have rental types
    2018-01-26_1524.png
    Book Now box
    if you don't have rental types
    2018-01-26_1528.png
    💡Note: The colors of the Book button and Book now box widget are by default tied to the colors of your Lodgify website. Learn how to amend the colors of your website.
  4. Select the rental, language and currency you want to use in the widget and then Generate the embed code.
  5. Copy the JavaScript code onto your clipboard and paste it into your external website (usually into some type of Raw HTML Widget).

💡 Note: If you want to use the booking widget on your WIX or Weebly website, you need to make some changes to the embed code before implementing the code into the HTML 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:
  • The src must start with https:
  • The entire code must be wrapped in <p></p>

See the code with the changes: <p><script type="text/javascript" async="async" class="embed-ldgfy-script-loader embed-ldgfy-book-script-loader" src="https://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></p>

Changes needed for implementation in Weebly

In order to make the code work in Weebly, you need to make the following change:

  • The entire code must be wrapped in <body> </body>

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 Bar on your external website

Seamlessly integrating the Search Bar 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 guest won't have the impression that he is redirected to another website but that he goes through the entire booking process on your external website.

💡 Note: The seamless integration option is best used for multiple rentals websites 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:

Create a subdomain

If you want your booking process to appear under a subdomain you need to set this up with your domain provider. 

  1. Go to your domain provider and into the DNS section of your account.
  2. There you can create a subdomain.
  3. 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.mydomain.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. 

  1. In Lodgify go to your Main Menu in the top left corner and select Websites.
  2. Choose the website you want to amend, click Edit and select Settings.
  3. Select the Domain tab and click Link existing domain.
  4. 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.2019-12-04_1248.png

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 while in the All properties/check-out page, he is redirected to your external website.2019-12-04_1418.png

To do so, you need to follow these steps:

  1. In Lodgify go to your Main Menu in the top left corner and select Websites.
  2. Choose the website you want to amend, click Edit and select Settings.
  3. Then select the Advanced tab and in Custom Logo URL add the link to the homepage of your external website.new_custom_logo.png

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

Was this helpful?
25 out of 48 found this helpful