よくある質問
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の標準フィールドを含むオブジェクトが渡されます。
独自のORDER_COMPLETEDデータを生成する
ORDER_COMPLETEDイベントのデータは自分で生成することができます。 そのためには、トリガーセクションに移動してください。 クライアント注文受領時に実行される自動トリガーを作成します。 トリガーにタスクを追加します。 その後、データをJSに渡すアクションを追加し、データテンプレート（JSON）フィールドにJSONテンプレートを入力します。例：
{
"orderNumber": "[bukza_order_number]",
"total": [bukza_total],
"phone": "[bukza_phone]"
}
"orderNumber": "[bukza_order_number]",
"total": [bukza_total],
"phone": "[bukza_phone]"
}
テンプレートには任意の注文パラメータを挿入できます。
ウィジェット内にコードを挿入する
場合によっては、イベントハンドラー付きのウィジェットコードを直接ページに追加できないことがあります。 これは、ウィジェットが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>
