よくある質問
arrow_back_ios
ウィジェットのイベント時にカスタムJavaScriptコードを実行できますか？
はい、JavaScriptを使ってさまざまなウィジェットイベントに対応できます。 そのためには、ウィジェット設定内のウィジェットコードパネルに移動し、＋イベント処理ボタンをクリックしてください。 これにより、イベントハンドラーのコードがウィジェットコードに追加されます。
このコードは、さまざまなウィジェットイベントが発生した際にコンソールへメッセージを出力します。
必要に応じて、これらのイベントハンドラーを自分のコードに置き換えてください。
利用可能なイベントは以下の通りです：
- INITIALIZED — ウィジェットが読み込まれたときに発火します。
- RESOURCE_GROUP_OPENED — カタログ内でグループが開かれたときに発火します。nameとresourceGroupIdのパラメータが渡されます。
- RESERVATION_STARTED — リソースが予約のために開かれたときに発火します。nameとresourceIdのパラメータが渡されます。
- RESERVATION_SAVED — 予約画面から注文画面に進んだときに発火します。nameとresourceIdのパラメータが渡されます。
- INDIRECT_ORDER_STARTED — 支払いフォームが表示され、支払いが保留中のときに発火します。
- ORDER_COMPLETED — 注文が正常に完了したときに発火します。orderNumber、total、depositのパラメータが渡されます。
ウィジェット内にコードを挿入する
場合によっては、イベントハンドラー付きのウィジェットコードを直接ページに追加できないことがあります。 これは、ウィジェットがSNS上に設置されている場合や、顧客にウィジェットへの直接リンクを提供する場合などです。 そのような場合、内部フレームを使ってウィジェット内で直接コードを実行できます。
そのためには、コールバック処理に内部フレームを使用するチェックボックスを有効にしてください。
次に、2つの方法があります。ご自身のサイトに処理コードを設置しページURLを指定するか、ページソースコードを直接ウィジェットに挿入するかです。
最初の方法が推奨されます。ご自身のドメインからコードが実行され、ブラウザ内のユーザーデータへアクセスできます。 これにより、ユーザーの特定が可能となり、分析システムなどで役立ちます。
2つ目の方法は、ウェブサイトをお持ちでない場合に適しています。この場合、ウィジェットページのすべてのURLパラメータが内部フレームに渡されます。 たとえば、ウィジェットリンクのUTMタグを処理する必要がある場合などに有効です。
内部フレーム用のソースコード
下記のコードを内部フレームでご利用ください。 これもウィジェットイベント発生時にコンソールへメッセージを出力します。
<html>
<script>
window.addEventListener('message', function (e) {
if (e && e.origin && e.origin.indexOf('bukza.com') !== -1)
var message = JSON.parse(e.data);
switch (message.event) {
case 'INITIALIZED':
console.log('widget opened');
break;
case 'RESOURCE_GROUP_OPENED':
console.log('entered to group ' + message.data.name);
break;
case 'RESERVATION_STARTED':
console.log('started for ' + message.data.name);
break;
case 'RESERVATION_SAVED':
console.log('saved for ' + message.data.name);
break;
case 'INDIRECT_ORDER_STARTED':
console.log('waiting for payment');
break;
case 'ORDER_COMPLETED':
console.log('order completed #' + message.data.orderNumber);
break;
}
}, false);
</script>
</html>
<script>
window.addEventListener('message', function (e) {
if (e && e.origin && e.origin.indexOf('bukza.com') !== -1)
var message = JSON.parse(e.data);
switch (message.event) {
case 'INITIALIZED':
console.log('widget opened');
break;
case 'RESOURCE_GROUP_OPENED':
console.log('entered to group ' + message.data.name);
break;
case 'RESERVATION_STARTED':
console.log('started for ' + message.data.name);
break;
case 'RESERVATION_SAVED':
console.log('saved for ' + message.data.name);
break;
case 'INDIRECT_ORDER_STARTED':
console.log('waiting for payment');
break;
case 'ORDER_COMPLETED':
console.log('order completed #' + message.data.orderNumber);
break;
}
}, false);
</script>
</html>
