The Book Now Button

The BOOK NOW button is a ubiquitous term 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.

via Link

For the simplest integration, we recommend using a Links.

Here are the steps to do this:

1. Go to https://app.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 from the top left dropdown.
4. Click on Channels > Book now button in the main nav bar.
5. The page will show you your Book Now link.
6. Give this link to your webmaster and use it for your BOOK NOW button.
7. You are ✅.

Note

You can use this link on your own website, and the booking engine can also run on your own domain (see Booking Engine features). Google free booking link traffic is different: it always lands on book.wink.travel. See Get Listed on Google.

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=2027-03-14
• n To add number of nights: n=1 OR
• ed Use end date: ed=2027-03-15
• 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=2027-03-14&n=1&rc=a2&l=es&c=EUR

The same parameters work on a hotel page link, https://book.wink.travel/hotel/<urlName>?client-id=...&configuration-id=.... They override the defaults from your customization. A link can’t pre-select a room or a rate; the traveler picks the room on the hotel page.

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

Example:

https://trvl.as/abc123?sd=2027-03-14&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 bookable widget into their website straight from the Book now button page.

Here are the steps to do this:

1. Go to https://app.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 from the top left corner.
4. Click on Channels > Book now button from the main nav bar.
5. Under Add to your website, click the copy button to copy the HTML snippet.
6. Paste the snippet where you want your Book Now button to appear on your website.
7. To retrieve your Client-ID, go to Applications.
8. To retrieve your Configuration-ID, go to Customization
9. You are ✅.

Sample embedded HTML (the snippet you copy from Portal may differ):

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

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.