自社のWebサイトに待ち情報を表示したい

Webサイト連携という機能をお使いいただけます。
Webサイト連携とは、店舗で運用されているWebサイトに、「待ち組数」「待ち時間」等を表示することができる機能です。
60秒毎に自動更新されますので、リアルタイムな情報の表示が可能です。
(下記は表示イメージです)
 

※この機能をご利用になる際には、ヘルプデスクまでお問い合わせください。

 

Webサイト連携について

Webサイト連携には、下記が必要になります。

申請が必要なもの

待ち時間、待ち組数を表示するためには、店舗IDとAPIキーが必要になります。
ヘルプデスクまでお問い合わせください。

店舗ID
各店舗に割り振られた「KR」から始まるコードです。(例:KR00000000)

APIキー
申請いただいたドメインに対して発行される英数字の文字列です。
APIキーには、複数の店舗IDが紐付けできます。

 

仕様

・ 店舗名、待ち組数、待ち時間のリアルタイムな情報を取得できます。
・ 60秒毎に自動更新されます。
・ 事前に申請いただいたドメイン上のみで動作します。(サブドメイン上では動きません)

 

推奨環境 

下記ブラウザ上での表示を推奨しております。

■PC

Windows

IE8~11, Edge, Firefox, Chrome

Mac

Safari, Chrome

■スマートフォン、タブレット

Android

OS 4.1以上

標準ブラウザ, Chrome

iOS

iOS 8以上

Safari, Chrome

※HTML5(sectionやarticleなど)のタグを使用されている場合は、IE8では正常に動作しない場合があります。 

 

設定手順

設定手順は、下記になります。

1. 申請いただいたドメイン内にある、表示したいhtmlの</body>の手前に下記コードをコピーしてはり付けます。

<script src="https://airwait.jp/js/corporate/airwait.js" data-airwait="key:" enable-log charset="utf-8"></script>

【記載後イメージ】

 

2. 【1】ではり付けた1行目にある、「"key:"」の「:」(コロン)の後ろに、こちらより指定したAPIキーを追記してください。

data-airwait="key:"

data-airwait="key:APIキー"

 

3.  待ち組数等の情報を表示したい場所の任意の要素に「data-airwait="storeId:店舗ID"」をコピーしてはり付けていただき、「店舗ID」をこちらより指定した店舗IDに変更してください。
(下記サンプルは、要素<div>に追加しています)

<div data-airwait="storeId:店舗ID"></div>

※同じAPIキーに複数店舗紐づけている場合、店舗IDは同一ページ内で最大50店舗まで指定することができます。

 【ここまでの記載イメージ】 ※新規ページに表示する場合のサンプルイメージです。

 

4.  【3】ではり付けた<div data-airwait="storeId:店舗ID"></div>の内側に、表示したい情報に応じて下記を追記してください。

<span data-airwait="storeName">--</span><br>
待ち組数:<span data-airwait="waitCount">--</span>組<br>
待ち時間:<span data-airwait="waitTime">--</span><br>

※「--」はそれぞれ取得したデータに切り替わります。削除しても問題なく、変更することも可能です。

待ち組数は数字のみの表示となるため、単位「組」等を追記してください。
待ち時間は、単位(「約〇〇分」「〇〇分以上」)含めて表示されます。

storeName : 店舗名を表示
waitCount : 待ち組数を表示(単位「組」等は表示されない)
waitTime : 待ち時間を表示(「約〇〇分」「〇〇分以上」の単位も表示される)

 【記載後イメージ】

 

ここまで行うと、下記のような画面が完成します。

【記載イメージ】
 

 待ち項目毎の表示をする

【4】と同様に、店舗IDを指定したタグの内側に、下記のように記述することで、待ち項目ごとの待ち組数、待ち時間の情報が取得できます。待ち項目名は直接記載してください。

任意の要素に「data-airwait-type=“待ち項目名”」をいれ、登録している待ち項目名を入力します。
待ち項目名は、半角/全角等の入力間違えに注意してください。

 

<div data-airwait-type="待ち項目名">
<span>待ち項目名</span><br>
待ち組数:<span data-airwait="detailedWaitCount">--</span>組<br>
待ち時間:<span data-airwait="detailedWaitTime">--</span>
</div>

 

下記の場合、待ち項目は「カウンター席」、「テーブル席」をいれています。

【待ち項目毎の項目を追加した場合の表示イメージ】

【ソースの記載イメージ】
 

店舗詳細ページへのリンクを表示する

店舗詳細ページへのリンクをはることができます。
店舗詳細ページでは、待ち組数、待ち時間の表示の他にも、オンライン受付の設定がONの場合、店舗詳細画面から受け付けることができます。

 【3】ではりつけた<div data-airwait="storeId:店舗ID"></div>の内側に下記をコピーしてはり付けると、店舗詳細ページへのリンクができます。
(「店舗詳細はこちら」は自由に変更してください)

<a data-airwait-href="storeUrl">店舗詳細はこちら</a>

待ち時間、待ち組数が表示されない場合

アプリ側の設定について

待ち時間、待ち組数を表示するためには、まずアプリ側での設定が必要になります。
「待ち時間・待ち組数の表示」からボタンをタッチして、表示がONになっているかご確認ください。

待ち項目・待ち時間


 

取得データの表示について

当日の受付状況やアプリ側の設定状況で表示が異なります。
下記を参照の上、ご確認ください。

■待ち組数、待ち時間が「-」(ハイフン)になっている

下記、4パターンの原因が考えられますので、ご確認ください。

1.本日まだ1枚も受付の発券が行われていない。
→ 受付実施後、待ち組数、待ち時間が表示されるかご確認ください。

2.アプリ側で「本日の発券を停止」がONになっている。
→ アプリの設定をご確認ください。※設定は、こちらをご覧ください。

3.アプリ側で「店舗サービスを停止」がONになっている。
→ アプリの設定をご確認ください。※設定は、こちらをご覧ください。

4.営業時間外
→ 営業時間内に受付実施後、ご確認ください。営業時間は申請時に設定した時間です。

 

■待ち組数の表示が更新されない

アプリ側で「待ち組数」の「ウェブの店舗詳細ページ」がOFFになっています。
アプリの設定をご確認ください(設定については当ページ内のアプリ側の設定について、をご覧ください)。
※オンライン受付をご利用の場合、OFFにしても待ち組数は表示されます。

 

■待ち時間の表示が更新されない

アプリ側で「待ち時間」の「ウェブの店舗詳細ページ」がOFFになっています。
アプリの設定をご確認ください(設定については当ページ内のアプリ側の設定について、をご覧ください)。

 

■待ち項目ごとの待ち時間と待ち組数の表示が更新されない

アプリ側で「待ち項目ごとに順番を管理する」がOFFになっています。
アプリの設定をご確認ください(設定については当ページ内のアプリ側の設定について、をご覧ください)。

 

デベロッパーツールの活用について

上記以外の原因については、ご使用ブラウザのデベロッパーツールを使用すると、エラー内容が確認できます。 

※下記画面は、GoogleChromeでのデベロッパーツール上のエラーサンプルです。

エラー文言 対処法

data-airwait="key:"APIキーを設定してください。

APIキーが入力されていません。【2】を参考に、APIキーを入力してください。

指定されたキーがドメインに紐づいていません。

入力されたAPIキーがドメインと紐付けられているものとは異なります。
入力内容が正しいかご確認の上、担当営業、またはヘルプデスクまでお問い合わせください。

data-airwait="storId:"店舗IDを設定してください。

店舗ID(data-airwait="storeId:")が設定されていません。
【3】を参考に、店舗IDを入力してください。

data-airwait="storeId:" 店舗IDが異なります。

入力された店舗IDがAPIキーと紐付けられているものとは異なります。
入力内容が正しいかご確認の上、担当営業、またはヘルプデスクまでお問い合わせください。

data-airwait="storeId:"店舗IDの指定は、最大50店舗までです。

同じAPIキーに複数店舗紐付けている場合、店舗IDを複数指定できますが、同一ページ内で最大50店舗です。50店舗以内に変更してください。

【1】ではり付けたコード内の1行目にある「enable-log」を削除すると、デベロッパーツール等でエラーログを出力しないようになります。

<script src="https://airwait.jp/js/corporate/airwait.js" data-airwait="key12345ABCDE:" enable-log charset="utf-8">

<script src="https://airwait.jp/js/corporate/airwait.js" data-airwait="key12345ABCDE:" charset="utf-8">