Skip to content
Wink Logo Academy

The Book Now Button

The BOOK NOW button is a ubiqutous terms in the hospitality industry that refers to the hotel’s own integration with a provider that knows about the property’s availability and prices and can let travelers book a room. The button is the simplest way for hotels to be able to sell rooms on their own website and on their own terms.

Many hotels use the bundled booking engine that’s offered by their channel manager. We do recommend that hotels do some research and compare native booking engines before committing to any particular one.

Audience

This article is mainly for hotels who want to install our free, high-conversion, booking engine on their website. But… it is also beneficial reading for anyone wanting to use our technologies on their websites.

For the simplest integration, we recommend using a Shareable Link.

Here are the steps to do this:

  1. Go to https://extranet.wink.travel
  2. Click Sign-In / Register in the top-right corner and log in with your user account.
  3. Select the property you want to work with and click Manage button.
  4. From the Dashboard, scroll down to the Social sharing box and click on the Start button.
  5. This will redirect you to your property’s affiliate account on Wink Studio.
  6. Find your property among the search results.
  7. Click the Actions link on your search result card and select Create > Make a Link.
  8. This will create a Shareable Link using your default Customization.
  9. A message will appear in the top-right corner telling you your link is ready and if you want to further customize it.
  10. Click on Tools > Links from the top navigation bar and you will see your new link.
  11. Click on the Actions link on your link card and click on Copy.
  12. This copies the link URL to your clipboard. e.g. https://trvl.as/abc123
  13. Give this link to your webmaster and use it for your BOOK NOW button.
  14. You are ✅.

Advanced

The link already comes with an itinerary baked into the URL, that originates from your chosen customization. You can customize your link further by:

  • Changing the selected customization OR
  • Override the itinerary

In this article, we will focus on the latter as it gives you more freedom to let travelers select an itinerary on your website and forward it to Wink’s booking engine.

Here’s how you pass your own itinerary along with the URL.

Valid request parameters:

  • sd To add a start date: sd=2024-08-24
  • n To add number of nights: n=1 OR
  • ed Use end date: ed=2024-08-25
  • rc Guests: rc=a2 (Adults: 2)
  • l Request a display language: l=es
  • c Request a display currency: c=EUR
  • p Add a promotion: p=ABC123

The URL would look like this:

https://trvl.as/abc123?sd=2024-08-24&n=1&rc=a2&l=es&c=EUR

For more advanced use cases, you can also request multiple room configurations using the + sign:

Example:

https://trvl.as/abc123?sd=2024-08-24&n=1&rc=a2-ca16q1-ca8q1+a2&l=es&c=EUR

  • Room type 1 = Adults: 2, Children: 2 = 16 years + 8 years of age.
  • Room type 2 = Adults: 2.

Example

Sample BOOK NOW button HTML:

This sample assumes you are using Bootstrap as your primary CSS library.

<a
  href="https://trvl.as/abc123"
  target="_blank"
  class="btn btn-lg btn-primary"
  title="Book a room"
>
BOOK NOW
</a>

Other benefits

There are other benefits to using one of our links as your book now button.

  • Social-friendly The link can be easily shared on social media and it displays dynamic pricing on top of the image you selected.
  • Short The URL is very shareable and you can use it in places like your Instagram Bio URL.

via Embed

Some hotels want a bit more functionality, and a deeper integration, for their website. This example will cover embedding a Card into their website.

Here are the steps to do this:

  1. Go to https://extranet.wink.travel
  2. Click Sign-In / Register in the top-right corner and log in with your user account.
  3. Select the property you want to work with and click Manage button.
  4. From the Dashboard, scroll down to the Booking engine box and click on the Start button.
  5. This will redirect you to your property’s affiliate account on Wink Studio.
  6. Find your property among the search results.
  7. Click the Actions link on your search result card and select Create > Make a Card.
  8. This will create a Card.
  9. A message will appear in the top-right corner telling you your card is ready and if you want to further customize it.
  10. Click on Tools > Cards from the top navigation bar and you will see your new card.
  11. Click on the Actions link on your link card and click on Embed.
  12. This opens a new window with sample HTML code you can copy.
  13. To retrieve your Client-ID, go to Applications.
  14. To retrieve your Configuration-ID, go to Customization
  15. You are ✅.

Sample embedded card HTML:

<wink-content-loader
  layout="GUEST_ROOM"
  id="09d7cca4-6ff6-11ef-949b-42004e494300"
></wink-content-loader>

The HTML sample above does not include the required Wink CSS and Javascript; just the card.

Card preview
Front-facing room type card with availability

A booker now sees dynamic pricing, can change itinerary and click to book directly on your website. The book button takes you to your Wink property landing page to finalize payment.