コンテンツにスキップ

今すぐ予約ボタン

BOOK NOW(今すぐ予約)ボタンは、宿泊業界で広く使われている用語で、ホテルが自社の空室状況や料金を把握し、旅行者が部屋を予約できるプロバイダーと連携するためのものです。このボタンは、ホテルが自社のウェブサイトで自分たちの条件で部屋を販売するための最も簡単な方法です。

多くのホテルはチャネルマネージャーに付属する予約エンジンを利用していますが、特定の予約エンジンに決める前に、ネイティブ予約エンジンを比較検討することをお勧めします。

この記事は主に、無料で高いコンバージョン率を誇る予約エンジンを自社サイトに導入したいホテル向けです。 しかし、当社の技術を自社サイトで活用したい方にも有益な内容です。

最も簡単な連携方法として、Shareable Linkの利用を推奨します。

手順は以下の通りです:

  1. https://extranet.wink.travel にアクセス
  2. 右上の Sign-In / Register をクリックし、ユーザーアカウントでログイン
  3. 左上のドロップダウンから操作したい物件を選択
  4. ナビゲーションバーの Booking engine をクリック
  5. ページにリンクが表示されます
  6. このリンクをウェブマスターに渡し、BOOK NOW ボタンに使用してください
  7. 完了 ✅

リンクには、選択した customization に基づく旅程がURLに組み込まれています。 リンクをさらにカスタマイズするには:

  • 選択したカスタマイズを変更するか
  • 旅程を上書きする

この記事では後者に焦点を当てます。これにより、旅行者が自社サイトで旅程を選択し、それをWinkの予約エンジンに渡す自由度が高まります。

URLに旅程を渡す方法は以下の通りです。

有効なリクエストパラメータ:

  • sd チェックイン日を追加:sd=2024-08-24
  • n 宿泊数を追加:n=1 または
  • ed チェックアウト日を使用:ed=2024-08-25
  • rc 宿泊人数:rc=a2(大人2名)
  • l 表示言語の指定:l=es
  • c 表示通貨の指定:c=EUR
  • p プロモーションコードの追加:p=ABC123

URL例:

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

より高度な利用例として、+ 記号を使って複数の部屋構成を指定することも可能です:

例:

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

  • 部屋タイプ1 = 大人2名、子供2名(16歳+8歳)
  • 部屋タイプ2 = 大人2名

BOOK NOW ボタンのHTMLサンプル:

このサンプルは、主要なCSSライブラリとしてBootstrapを使用していることを想定しています。

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

当社のリンクを book now ボタンとして使うことには他にも利点があります。

  • ソーシャルフレンドリー リンクはSNSで簡単に共有でき、選択した画像の上に 動的価格表示 がされます。
  • 短縮URL URLが非常に共有しやすく、InstagramのプロフィールURLなどにも利用可能です。

より多機能で深い連携を望むホテル向けに、Cardを自社サイトに埋め込む例を紹介します。

手順は以下の通りです:

  1. https://studio.wink.travel にアクセス
  2. 右上の Sign-In / Register をクリックし、ユーザーアカウントでログイン
  3. 左上のドロップダウンから操作したい物件を選択
  4. メインナビバーの Search をクリック
  5. 物件名を入力し、検索ボタンをクリック
  6. 検索結果カードの Actions リンクをクリックし、Create > Make a Card を選択
  7. カードが作成されます
  8. 右上にカードが準備できた旨のメッセージが表示され、さらにカスタマイズするか尋ねられます
  9. メインナビバーの Tools > Cards をクリックし、新しいカードを確認
  10. カードの Actions リンクをクリックし、Embed を選択
  11. 新しいウィンドウが開き、コピー可能なHTMLコードが表示されます
  12. Client-ID を取得するには Applications にアクセス
  13. Configuration-ID を取得するには Customization にアクセス
  14. 完了 ✅

埋め込みカードのHTMLサンプル:

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

上記HTMLサンプルにはWinkのCSSおよびJavascriptは含まれていません。カードのみです。

カードプレビュー
空室状況が表示された正面向きの部屋タイプカード

予約者は動的価格を確認でき、旅程を変更し、自社サイト上で直接予約できます。予約ボタンはWinkの物件ランディングページに遷移し、支払いを完了します。