BTA Appointment Booking App（旧 BookThatApp）のWidgetsの設定方法を解説します。
BTAを使用するには、最低限、
商品登録とWidgetsの登録が必要となります。
前の記事で商品登録を解説しましたので、今回はWidgetsの設定方法を解説していきます。
Widgetsとは。。。
商品や予約タイプごとに使用する予約フォームをイメージしてもらうとわかりやすいよ
予約時に日付や時間、商品バリエーションの選択ができるようにするなど、Booking Type（予約タイプ）にあわせた設定をおこないます。
ここで設定したWidgetと対象の商品・サービスを紐づけることで、商品ページに表示されます。
商品ページで使用できるWidgetは7種類です。
- Acrivities & tours
- Appointments
- Classes
- Courses
- Rentals
- Accommodation
- Events
商品ページ以外にも使用できるWidgetもありますが、今回は商品ページで使用できるWidgetの中からAppointmentsの設定について解説します。
Widgetの中から、最上段の中央にある「Appointments」を選び、
右下の「Add widget」をクリックします。
Widgetのsettings
Name
まずはこのWidgetの名前を決めます。管理しやすい名前をつけましょう。
注意書きにあるように、ほかのWidgetと同じ名前はつけられません。
ここではヘアカットのWidgetとして使用する想定なので、「hair-cut」とつけます。
Interface
ここではInterfaceの設定を解説します。
「Customize the widget’s look and feel in the Branding Configuration page.」については、いったんとばします。
Display mode
ここでは画面上に表示する方法を選べます。プルダウンメニューをクリックすると４つの選択肢が表示されます。
- Popupは、ボタンをクリックすると、カレンダーが表示される
- Inlineは、もともとカレンダーが表示される
- ButtonとEmbedは、コードを直接テーマファイルに記載する方法
個人的にはInlineが見やすくオススメなので、今回はInlineを選択します。
下の画像はInlineにしたときの表示イメージです。
カレンダーの日付をクリックすると、時間が選択できるようになります。Servicesで設定したLag timeの15分もしっかり反映されていますね。
Booking fields
Booking fieldsにチェックをいれることで、独自に作成したテキスト入力やチェックボックス、ラジオボックスなどを商品ごとに表示させることができます。
作り方の解説など少し長くなってしまうので、本記事では割愛します。
Swatches
商品のバリアントがある場合に表示デザインを切り替えることができます。
チェックなしの場合はプルダウンメニュー、チェックをいれるとボタン表示となります。
サイトのデザインやユーザーの使いやすさなどを考慮して選んでください。
バリアント（商品の種類）がない商品は、どちらを選んでも変更はありません
Make another booking
これはユーザーが予約作成後に、すぐ別の予約を作成できるようにします。
前提として、下記要件を満たしていることが必要です。
・予約時に決済されない（商品料金が０円で登録されている）
・User flow内の「Bypass Shopify checkout」にチェックが入っている
少しややこしくなるので、本記事では割愛して、チェック無しで進めます。
Remaining places
こちらにチェックをいれると予約の残数を表示させることができます。
英語なので少し分かりづらいかもですが、「5 Spaces Available」が残数表示となります。
表記は、「Translations」タブから変更することができます。
User flow
Redirect
ここでは予約ボタンをクリックしたあとの動きを調整することができます。
各項目の動きは以下の通り。
ストアの性質に合わせて、最適なものを選んでください。
Bypass Shopify checkout
ここでは決済ページを「とばす」かどうかを設定できます。
初期値では電話番号が必須になっていますが、Phone number is optionalにチェックを入れると電話番号なしでも予約申込みができるようになります。
Waitlist
こちらは予約が満席となった後、希望するユーザーが空きが出た場合に通知を受け取ることができるかを設定できます。
キャンセル待ちをイメージしてもらうとわかりやすいと思います。
Waitlistのチェックをいれることで、売り切れでも選択できるようになり、Add to Waitlistのボタンが表示されます。
またWaitlistにチェックをいれると、新たなチェックボックスが表示されます。
Display Phone Number Fieldは、電話番号を登録が必要かを設定できます。初期値では登録不要になっています。
Display Location Fieldは、Location選択ができるようにするかを設定できます。初期値はなしになっています。
Time
ここでは時間に関する表記や設定を調整できます。
Time format
ここでは時間表記を設定できます。
Casualは12時間制、24hoursは24時間制の表記となります。
お好みの表記を選んでください。
Time slot generation
ここでは、予約のタイムスロットをServicesの設定を優先にするか、Intervalで指定した間隔ごとにするかを選択できます。
Based on Intervalを選択すると、「Slot interval」欄があらわれ、時間間隔を入力できるようになります。
Based on durationではServicesで設定した通り、Durationが1時間とLag Time15分の設定が反映されています。
Based on IntervalはIntervalを10分で設定したため、予約開始時間から10分間隔で予約が取れるようになっています。
Intervalにした場合、Servicesの設定よりもIntervalで指定した間隔が優先されるので気をつけてください。
もしBased on Intervalを選択し、今回の60分＋Lag Time15分の間隔を取りたい場合は、75分（60分＋15分）で設定する必要があります。
Display Time Range
ここでは予約時間の範囲を表示するかが選べます。
チェックなしの場合では、予約開始時間のみが表示されます。
Booked-out time slots
こちらはすでに予約済みの枠を表示するかどうかを選べます。
個人的には予約済みの枠も表示している方が人気感が出て、購買意欲を高められるのでオススメです。
Timezone helper
こちらはユーザーのタイムゾーンを表示するかが選べます。
Location
ここではLocation（位置や場所）に関する設定を決めることができます。
前提として、Settings内のLocationsに情報が登録されている必要があります。
Location picker
こちらはLocationを設定していた場合に選択できるようにします。
チェックを入れるとLocationが選択できるプルダウンメニューが表示されます。
今回は店舗が新宿と渋谷にあると仮定して、Locationに登録したので、どちらか選べるようになりました。
今回は簡易的にLocationを作りましたが、このままでは新宿と渋谷の予約合算値がServicesで設定したCapacityに適用されてしまいます。
本番環境ではきちんと商品設計することが必要です。
Location map
ここにチェックをいれることで、カートページに遷移する前に確認ページを挟むことができます。
Settings内のLocationsに登録した住所が自動で表示されます。
Pricing
ここでは価格表示関する設定ができます。
Price
ここでは価格表示をするかが選べます。チェックを入れるとカレンダー右下に表示されていた価格表示が消えます。
Price format
ここでは通貨表示をするかが選べます。チェックをいれると表示されます。外国人のユーザーが多い、越境をおこなうなどサイトの特性に合わせて設定してください。
違いがわかりづらいので、該当部分に赤の下線を引いています。
Choices
ここでの設定は下記2点が前提条件となります。
・Settings内のResourcesに情報が登録されている
・Services内の設定で商品とResoucesの情報が紐づけが完了している
Resources
ここではServicesで紐づけたResourcesを選択するかが選べます。
今回はResourcesとStaff resourceにチェックを入れます。
resource選択画面で担当スタッフを選べるようになりました。
Quantity
ここでは商品ページで予約数量を増減できるかどうかを設定できます。
チェックをいれるとカレンダーのうえに増減ボタンが表示されます。
これでSettingsタブの設定は終了です。お疲れ様でした。
Services
つぎにServicesとの紐づけをおこないます。
この設定自体はWidgets内のServicesのことで、紐づけるServicesに登録されている商品・サービスというのは、商品登録時に使用したServicesのことです。
同じServicesという表記となり、すこしややこしいので注意してください。
商品・サービスの登録時に設定したBooking typeが同じもののみ適用されます。
今回はAppointmentのWidgetを作成していますので、ServicesでのBooking typeがAppointmentになっている商品・サービスのみ対象となります。
Selected services onlyを選んだ場合は、ServicesでのBooking typeが一致するもののみ選択できます。
Translations
最後は表記の変更をおこないます。「Translations」のタブをクリックしてください。
初期値では英語表記となりますので、必要な部分を日本語に変更していきます。
今回は試しに、Priceを「料金」と入力して保存します。
これまでの「Price」という表記が、「料金」に変わりましたね。
ここでは少し手間ですが、必要な箇所をひとつずつ日本語でわかりやすい表記に変更していきます。
文字検索などを活用して効率的に進めましょう。
もし間違って編集して戻せなくなったというときは、新しくAppointmentのWidgetsを作成し、該当部分の文字をコピーすれば大丈夫です！
まとめ
お疲れ様でした。これでWidgetsの設定は完了です。
BTAは高機能な反面、たくさんの設定項目があるので、最初は難しく感じることも多いと思います。
ひとつひとつはそれほど複雑ではないので、ゆっくりと確認しながら進めていってください。
コメント