Skip to content
English - United States
  • There are no suggestions because the search field is empty.

How to add the booking engine to another page of your hotel website

Simple steps to integrate your search engine across multiple pages and increase your bookings

Key points:

  • You can place your booking engine on any page of your hotel website.
  • Integration is done using a code or link provided by your service provider.
  • The method differs depending on whether the search engine is displayed as an integrated widget or via external redirection.
  • Everything can be easily configured from the Webflow Editor or Designer.

Displaying your booking engine across multiple pages—for example, “Rooms,” “Special Offers,” or “Weddings”—is an excellent strategy for encouraging direct booking at any point in the customer journey. Here’s how to add this engine smoothly and efficiently.

1. Identify the type of integration used on your site

Before adding the engine to another page, determine the existing integration method:

  • External link (redirection): the “Book” button opens the search engine in a new tab.
  • Integrated widget (iframe or script): the engine is displayed directly on the page.

💡 You can check this in Webflow: if your engine is contained in an Embed block (</>), it is an embedded widget; if it is in a button with a simple link, it is an external redirect.

2. Copy the code or link from your booking engine

From your service provider (e.g., D-Edge, Reservit, Amenitiz, Mirai, etc.):

  • Open the integration settings.
  • Copy the embed code (HTML/iframe/script) if the engine is embedded.
  • Or copy the direct booking link (starting with https://) if it's a redirect.

💡 Tip: Test the link or code in a new tab before adding it to check that the page opens correctly.

3. Add the engine to the new page from Webflow

If it's a booking link:

  1. Open the desired page in Webflow Editor or Designer.
  2. Add a "Book" button in the desired location.
  3. In Link Settings, choose External URL and paste the link from the search engine.
  4. Enable “Open in new tab” to open the engine in a new tab.

If it's an embedded widget (code):

  1. In Webflow Designer, open the page where you want to display the engine.
  2. Drag an Embed block (</>) to the desired location (main section or footer).
  3. Paste the engine code into the integration window.
  4. Click Save & Close, then Publish to put it online.

💡 You can adjust the width and height of the block to harmonize the design with the rest of the page.

4. Check the rendering and functionality

Once the search engine is added and the site is published:

  • Reload the page to test the engine loading.
  • Verify that the redirection or widget works correctly on desktop and mobile.
  • Also try opening the engine from another browser (Chrome, Safari, Firefox) to confirm that nothing is blocked.

💡 If the search engine does not appear, make sure that your site's domain is properly authorized in the search engine settings (on the provider's side).

5. Optimize the engine's visibility on this new page

Remember to include clear calls to action:

  • “Book a room now”
  • “See availability”
  • “Take advantage of this exclusive offer”

💡 Place your search engine or button at the end of inspiring content (room presentation, gallery, seasonal offers) to maximize click-through rates.

Conclusion

Adding the booking engine to a new page is a simple yet strategic operation. Whether you use an external link or an integrated widget, a few clicks in Webflow are all it takes to boost the visibility of your offers and streamline the booking process on your hotel website.