Add a “Best Price Guaranteed” banner next to the booking button

Why add a banner next to the button?

Key points:

• It reassures visitors and reduces cancellations before booking.
• Highlights a strong direct sales argument.
• It integrates easily into the existing design of the hotel website.

The “Best Price Guarantee” tagline is a powerful tool in hotel marketing. Displayed next to the “Book Now” button, it strengthens the credibility of your official website and encourages visitors to book directly rather than through an OTA (Booking.com, Expedia, etc.). When well-positioned, this banner improves conversion rates while reinforcing your establishment's trustworthiness.

Steps to add the banner

1. Create a visual block next to the button

1. Open your Webflow Designer.
2. Select the container where the “Reserve” button is located.
3. Set the container to Display: Flex, direction Row.
4. Add a Div Block right next to the button.
5. In this new block, insert text or an icon with the message: “Best Rate Guarantee” or “Meilleur tarif garantie” depending on the website's language.

💡 Tip: Use a small shield or check icon to reinforce the notion of security and reliability.

2. Style the banner

• Colour: choose a contrasting but harmonious shade that matches your brand guidelines (often green or gold).
• Typography: clear and legible, slightly smaller than the button text.
• Spacing: Add 8 to 16px of margin between the banner and the button.
• Alignment: Center vertically for a balanced result.

💡 Design tip: if the button is wide, you can place the banner just below it for better readability on mobile.

3. Make the banner responsive

1. Switch to Mobile mode in the Designer.
2. If the banner and button don't fit side by side, change the flex direction to Column.
3. Center the banner below the button and reduce the text size.
4. Test on different screens to ensure smooth playback.

4. Add a multilingual version (if applicable)

If your site is bilingual or trilingual:

• Create a translated version of the banner (“Best Rate Guarantee”, “Mejor tarifa garantiezada”).
• Apply the same language conditions as for the “Book” button.

5. Option: Add a light animation

To attract attention without being distracting, you can:

• Add a fade-in effect to the banner's appearance.
• Or a slight movement while hovering.

Best practices

• Don't clutter the action area: the banner should remain discreet and elegant.
• Maintain a visual contrast between the button and the label to avoid any confusion.
• Check readability on light and dark backgrounds.
• Test the display on desktop, tablet, and mobile before publishing.

Conclusion

Adding a “Best Price Guaranteed” banner next to the “Book Now” button is a simple yet strategic improvement for your hotel website. This small visual element builds trust, enhances your direct offer, and optimizes conversions without cluttering the design.