Webサイト連携の機能をお使いいただくことで、自社のWebサイトに待ち情報を表示することができます。
Webサイト連携とは、店舗で運用されているWebサイトに、「待ち組数」「待ち時間」等を表示することができる機能です。
60秒ごとに自動更新されますので、リアルタイムな情報の表示が可能です。
この機能は、有料プランをご契約されている方を対象としております。
ご契約、有料プランに関しては、下記のページをご確認ください。
Webサイト連携について
特徴
店舗で運用されているWebサイトに「待ち組数」「待ち時間」「呼出中の最大番号」などを表示することができます。
仕様
- 店舗名、待ち組数、待ち時間、呼出中の最大番号のリアルタイムな情報を取得できます。
- 60秒ごとに自動更新されます。
-
事前に申請いただいたドメイン上のみで動作します。
- サブドメイン上では動作しません。
申請方法
ヘルプデスクまでお問い合わせください。その際、AKRコードが必要になります。
ヘルプデスクまでAKRコードをお知らせいただくと、該当店舗で利用できる指定コードとAPIキーを発行いたします。
- AKRコード
-
各店舗に割り振られたAKRから始まるコードです。（例：AKR0000000000）
- AKRコードは、設定画面内の基本情報から店舗基本情報設定をタッチしていただくとご確認いただけます。
動作環境
下記のブラウザに対応しております。
パソコン
| Windows | Microsoft Edge / Firefox / Google Chrome |
|---|---|
| Mac | Safari / Google Chrome |
スマートフォン、タブレット
| Android | Android 4.4.4以上 | 標準ブラウザ / Google Chrome |
|---|---|---|
| iOS | iOS 18 / iPadOS 18以上 | Safari / Google Chrome |
- Safari、Google Chromeについては最新版をサポートしております。
iOS 18 / iPadOS 18未満をご利用の場合はサポート対象外となりますので、OSのアップデートをお願いいたします。
表示設定方法
STEP1.サイトソース内の挿入位置
申請いただいたドメインのWebサイト内にある、htmlソース内の</body>の直前に<script>～</script>をコピーしてペーストします。
<html>
<head>
<meta charaset="UTF-8">
<title>設定方法</title>
</head>
<body>
<!-- ↓↓↓ここからコピー↓↓↓ -->
<script src="https://airwait.jp/js/corporate/airwait.js" data-airwait="key:" enable-log charset="utf-8"></script>
<!-- ↑↑↑ここまでコピー↑↑↑ -->
</body>
</html>
STEP2.APIキーを入力する
<script>内にあるdata-airwait="key:"に、発行されたAPIキーを追記します。
<script src="https://airwait.jp/js/corporate/airwait.js" data-airwait="key:" enable-log charset="utf-8"></script>
↓ APIキーを追記
<script src="https://airwait.jp/js/corporate/airwait.js" data-airwait="key:APIキー" enable-log charset="utf-8"></script>
STEP3.表示したい場所に要素を追加する
待ち組数等の情報を表示したい場所に下記のコードをコピーしてペーストし、指定コードのところを、申請時に発行された指定コードに変更してください。
<div data-airwait="storeId:指定コード"></div>
- 同じAPIキーに複数店舗紐づけている場合、指定コードは同一ページ内で最大50店舗まで指定することができます。
STEP4.表示したい要素を追加する
STEP3.で追加したdivタグの中に、下記のように表示したい内容を追記します。
<div data-airwait="storeId:指定コード">
<span data-airwait="storeName">--</span><br>
待ち組数：<span data-airwait="waitCount">--</span>組<br>
待ち時間：<span data-airwait="waitTime">--</span><br>
呼出中の最大番号：<span data-airwait="maxCallingNumber">--</span>番<br>
</div>
- 「--」はそれぞれ取得したデータに切り替わります。削除しても問題なく、変更することも可能です。
| storeName | 店舗名を表示 |
|---|---|
| waitCount | 待ち組数を表示（単位「組」等は表示されない） |
| waitTime | 待ち時間を表示（「約○○分」「○○分以上」の単位も表示される） |
| maxCallingNumber | 呼出中の最大番号を表示（数字のみ） |
- 単位を除いて表示したい場合は、ご自身でプログラムを書いていただく必要があります。
STEP5.表示されるか確認する
ここまでの入力が完了すると、下記のような構造になります。
実際に表示されているか確認します。
<html>
<head>
<meta charaset="UTF-8">
<title>設定方法</title>
</head>
<body>
<!-- ↓↓↓以下表示部分↓↓↓ -->
<div data-airwait="storeId:指定コード">
<span data-airwait="storeName">--</span><br>
待ち組数：<span data-airwait="waitCount">--</span>組<br>
待ち時間：<span data-airwait="waitTime">--</span><br>
呼出中の最大番号：<span data-airwait="maxCallingNumber">--</span>番<br>
</div>
<!-- ↑↑↑以上表示部分↑↑↑ -->
<script src="https://airwait.jp/js/corporate/airwait.js" data-airwait="key:" enable-log charset="utf-8"></script>
</body>
</html>
表示をカスタマイズする
待ち項目ごとに表示をする
下記のようにhtmlソースをカスタマイズすることで、待ち項目ごとの表示にすることができます。
- サンプルソースは、待ち項目が「カウンター席」「テーブル席」に設定されている場合のものです。
<html>
<head>
<meta charaset="UTF-8">
<title>設定方法</title>
</head>
<body>
<!-- ↓↓↓以下表示部分↓↓↓ -->
<div data-airwait="storeId:指定コード">
<div data-airwait-type="カウンター席">
<span>カウンター席</span><br>
待ち組数：<span data-airwait="detailedWaitCount">--</span>組<br>
待ち時間：<span data-airwait="detailedWaitTime">--</span><br>
</div>
<div data-airwait-type="テーブル席">
<span>テーブル席</span><br>
待ち組数：<span data-airwait="detailedWaitCount">--</span>組<br>
待ち時間：<span data-airwait="detailedWaitTime">--</span><br>
</div>
</div>
<!-- ↑↑↑以上表示部分↑↑↑ -->
<script src="https://airwait.jp/js/corporate/airwait.js" data-airwait="key:" enable-log charset="utf-8"></script>
</body>
</html>
実際の表示イメージ
- 表示の組み合わせ
-
アプリの設定により、表示パターンは下記のどちらかになります。
- 最も早く呼び出される待ち項目の待ち時間
- 最も遅く呼び出される待ち項目の待ち時間
設定方法は全体の待ち時間の表示方式をご確認ください。
オンライン受付のリンクを表示する
Airウェイト アプリで「オンライン順番予約を利用する」が「オン」になっている場合、店舗詳細ページから予約を受け付けることができます。
<a>タグにdata-airwait-href="storeUrl"を追記し、リンクとして表示したい文字を記載してください。
<div data-airwait="storeId:指定コード">
<a data-airwait-href="storeUrl">店舗詳細はこちら</a>
・
・
・
</div>
「待ち組数」「待ち時間」「呼出中の最大番号」が表示されない場合
待ち組数、待ち時間を表示するためには、Airウェイト アプリ側の設定が必要になります。
待ち組数が表示されない
「待ち組数」の「ウェブの店舗詳細ページ」が「オン」になっているか確認します。
- 「オフ」の場合は、タッチして「オン」に設定してください。
待ち時間の表示が更新されない
「待ち時間」の「ウェブの店舗詳細ページ」が「オン」になっているか確認します。
- 「オフ」の場合は、タッチして「オン」に設定してください。
待ち項目ごとの待ち組数と待ち時間が表示されない
「待ち項目ごとに順番を管理する」が「オン」になっているか確認します。
- 「オフ」の場合は、タッチして「オン」に設定してください。
- 「待ち項目ごとに順番を管理する」は「待ち項目を選択させる」を「オン」にすると表示されます。
待ち組数、待ち時間、呼出中の最大番号が「-」（ハイフン）になっている
下記の原因が考えられます。ご確認ください。
- 本日、受付の発券が行われていますか？
- 受付がまだ行われていない場合は表示されません。受付実施後、待ち組数、待ち時間が表示されるかご確認ください。
- Airウェイト アプリ側で「本日の発券を停止」または「店舗サービスを停止」設定が「オン」になっていませんか？
- いずれかの設定が「オン」になっている場合は発券が停止されています。Airウェイト アプリの設定をご確認ください。詳しくは、下記のページをご確認ください。
- 営業時間外ではありませんか？
- 営業時間内に受付実施後、ご確認ください。営業時間は申請時に設定した時間です。
- 「呼出中」または「呼出済」の番号はありますか？
- 呼出前、割込み受付をした受付データは表示されません。呼出後に表示されるかご確認ください。
エラー内容の確認の方法
エラー内容確認のサポート機能として、ご利用のブラウザのデベロッパーツール(開発者ツール)のConsoleにエラーログが出るようになっています。
STEP1.デベロッパーツールを表示させる
Google Chromeの場合
- ブラウザ上で右クリック
- 検証を選択
- タブの中からConsoleを選択
画像のような赤い字が表示されている場合はエラーが起こっています。
STEP2.エラー内容を確認する
| エラー文言 | 対処法 |
|---|---|
| data-airwait="key:"APIキーを設定してください。 | APIキーが入力されていません。表示設定方法 STEP2を参考に、APIキーを入力してください。 |
| 指定されたキーがドメインに紐づいていません。 |
入力されたAPIキーがドメインと紐付けられているものとは異なります。 入力内容が正しいかご確認の上、担当営業、またはヘルプデスクまでお問い合わせください。 |
| data-airwait="storId:"指定コードを設定してください。 | 指定コード(data-airwait="storeId:")が設定されていません。表示設定方法 STEP3を参考に、指定コードを入力してください。 |
| data-airwait="storeId:" 指定コードが異なります。 |
入力された指定コードがAPIキーと紐付けられているものとは異なります。 入力内容が正しいかご確認の上、担当営業、またはヘルプデスクまでお問い合わせください。 |
| data-airwait="storeId:"指定コードの指定は、最大50店舗までです。 | 同じAPIキーに複数店舗を紐付けている場合、指定コードを複数指定できますが、同一ページ内で最大50店舗です。50店舗以内に変更してください。 |
エラーログを出力しないようにするには、表示設定方法 STEP1ではり付けた<script>タグを修正することで非表示設定ができるようになります。
<script src="https://airwait.jp/js/corporate/airwait.js" data-airwait="key:12345ABCDE" enable-log charset="utf-8"></script>
↓ enable-log を削除
<script src="https://airwait.jp/js/corporate/airwait.js" data-airwait="key:12345ABCDE" charset="utf-8"></script>