BTA Widgetについて解説（Appointment Booking App(旧 BookThatApp)）

BTAを使うためには、Servicesの登録とWidgetsの登録が必要になります。この記事ではWidgetsの役割と設定方法を解説します。

WdgetsはBookingTypeごとに最適化されてるので、それぞれ特徴が異なります。

この記事を読むことで、商品にあわせた最適なWidgetsを設定し、自社サイトに訪れたユーザーが迷うことなく予約ができるようになります。

ぜひ最後まで読んで参考にしてください。

Widgetとは

Widgetsとは、Servicesで登録した商品を、どのようなフォームで予約を受付けるかの設定になります。

商品によっては上記画像のように時間選択が必要なものもあれば、ロケーション（店舗）や日数選択が必要なものもあります。

最適なWidgetsを選択、設定することで、ユーザーは予約がスムーズにできるようになり、管理者は必要な情報が取得できるようになります。

Widgetの選び方

WidgetsとServices。この両方を適切に設定することで、BTAが予約アプリとして機能します。それだけ重要な設定になりますので、それぞれの違いを把握していきましょう。

WidgetsはServices同様、タイプにより設定できる内容が異なります。まずは製品・サービスの予約に際し、どのような情報が必要か、どの情報が欲しいかを精査してください。

そのうえで、どのWidgetsが最適かを判断していきましょう。

もし取り扱っているのが物理的な商品だったとしても、BookingTypeとWidgetsがAppointmentsのほうがあうなら、Appointmentsで登録してしまうのもありです。

BookingTypeとWidgetsの分類は、あくまで使いやすいようにBTA側が目安として区切っているだけなので、運用にあう形を探してみてください。

Widgetの種類

ここからはWidgetsの種類について解説していきます。

Widgetsは全部で11種類あり、商品ページで使えるものとサイト全体で使えるものに分類され、商品ページで使えるのは7種類、サイト全体で使えるのは4種類あります。

Product page(商品ページ)のWidget

ここでは商品ページで使えるWidgets7種類について解説します。

Activities & tours

Booking TypeをActivities & toursで登録した商品に紐づけられます。アプリ内のガイドによると以下のようなサービスへの用途としてあげられています。

• ツアーオペレーター
• ガイド付きウォーキング
• 自転車ツアー
• 文化体験
• 脱出ゲーム
• ゴーカートコース
• ワインテイスティング

特徴としては、日付、時間、場所をユーザーが任意で選択できる点です。

あらかじめ開催日時、所要時間、開催場所が決まっているサービスに適しています。

設定できる項目は以下の7種類。複雑な設定はほとんどないので、扱いやすいWidgetsです。

• Name
• Interface
• User flow
• Time
• Location
• Pricing
• Choices

Appointments

Booking TypeをAppointmentsで登録した商品に紐づけられます。アプリ内のガイドによると以下のようなサービスへの用途としてあげられています。

• ヘアサロン
• 美容院
• ネイルサロン
• 理髪店
• 予約無料

特徴としては、日付、時間、場所をユーザーが任意で選択できる点ですが、Activities & toursと異なるのは、ユーザーが開始時間を選択できる点です。

設定できる項目は以下の7種類。項目数自体はActivities & toursと変わらないのですが、各項目でより詳細な設定ができるのも特徴です。

• Name
• Interface
• User flow
• Time
• Location
• Pricing
• Choices

たとえば、美容室の予約などで「予約時点では決済をせず、予約のみにする」といったことも設定可能です。

Classes

Booking TypeをClassで登録した商品に紐づけられます。アプリ内のガイドによると以下のようなサービスへの用途としてあげられています。

• ヨガ教室
• アート教室
• 語学教室
• 成人向け学習コース
• 料理教室
• 音楽レッスン

〇〇教室や〇〇レッスンといった用途ですね。

設定できる項目は以下の7種類。　こちらも複雑な設定はほとんどないので、扱いやすいWidgetsです。

• Name
• Interface
• User flow
• Time
• Location
• Pricing
• Choices

あらかじめ開催日時、所要時間、開催場所が決まっているサービスに適しているという点、Settingsで設定できる内容はActivities & toursと同じですが、「Translationsタブ」の中で設定できる項目が違います。

これらの項目はBookingTypeごとに最適化されているので、〇〇教室や〇〇レッスンのようなサービスを展開されているのであれば、まずはClasses Widgetsを使ってみてください。

その後どうしてもあわないようなら、Activities & toursでの運用を検討するのもありです。

Courses

Booking TypeをCourseで登録した商品に紐づけられます。アプリ内のガイドによると以下のようなサービスへの用途としてあげられています。

• 定期レッスン
• 複数日イベント
• 教育コース
• 子供向けキャンプ
• シーズンパス 定期予約

ClassとCourseの違いは単発か複数かの違いで、塾の夏期講習や冬期講習のように、期間、開催スケジュール、回数が決まっているサービスにはCourseが適しています。

設定できる項目は以下の7種類。　こちらも複雑な設定はほとんどないので、扱いやすいWidgetsです。

• Name
• Interface
• User flow
• Time
• Location
• Pricing
• Choices

Rentals

Booking TypeをProductもしくはRoomで登録した商品に紐づけられます。アプリ内のガイドによると以下のようなサービスへの用途としてあげられています。

• ドレスレンタル
• スポーツ用品レンタル
• 工具レンタル
• 自転車レンタル
• 映画セットレンタル
• レジャー用品レンタル

何らかの貸出サービスを行なう場合にはこちらのWidgetsが第一候補になります。

設定できる項目は以下の7種類。　こちらも複雑な設定はほとんどないので、扱いやすいWidgetsです。

• Name
• Interface
• User flow
• Time
• Location
• Pricing
• Choices

予約は時間単位、日単位、週単位もしくは複数の組み合わせ設定が可能なので、その分、Interfaceではより詳細な設定ができるようになっています。

Accommodation

Events

Booking TypeをActivityもしくはClassで登録した商品に紐づけられます。

Events、Activity、ClassのWidgetsを比較すると、

• 予約可能数の表示ができない（一定数を下回ったときにのみ表示できる）
• 複数開催のイベントの場合、一覧表示できる
• 日時表示を調整できる

といった違いしかありません。

ActivityやClassとEventsを違いを、どう定義するかもなかなか難しところですね。

基本的にはBookingTypeにあわせたWidgetsを使用。困ることがあればEventsの活用を検討するといった流れでをおすすめします。

Store wide(店舗全体)のWidget

Search

Searchはその名の通り、指定した期間で条件にあてはまる商品やサービスを検索できるWidgetsです。

このWidgetsを使用するためには、下記条件がありますので注意してください。

このWidgetsは、指定のコードをテーマファイルに貼り付けることで表示されます。

表示させたいページのテーマファイルを編集するか、カスタムLiquidなどのブロックを活用して貼り付けるかなどが必要になります。

Upcoming Events

Class、Course、Activity&tourに登録されたイベントが表示されます。設定画面で対象のサービスのみを指定することも可能です。

ポップアップで表示する方法とページに埋め込む方法のいずれかで設定ができます。

ページに埋め込む場合はブロックでの表示かリストでの表示を選ぶことができます。

Event Calendar

Class、Course、Activity&tourに登録されたイベントをカレンダー形式で表示されます。

Event Calendarは他のWidgetsはすこし異なり、メニューに追加する仕様となっています。

そのためEvent CalendarのWidgetボタンをクリックしたときに表示されるURLをメニューに追加してください。

inline Appointments

こちらのWidgetsは、「ストア内の任意のページにインラインフォームを追加して予約を受けることができる」となっています。

さまざま検証してみましたが、思うように表示させることができなかったです。

アプリの不具合なのか、設定が間違えているのか判断できないので、なにかご存じの方がいらっしゃいましたら、共有いただけますと幸いです。

Widgetsを反映させるためには

ここで落とし穴なのですが、Widgetsを設定しただけでは各ページには表示されません。

ストアのカスタマイズ画面から、アプリブロックを有効化する必要があります。初めての場合、ハマりやすいポイントなので忘れずに設定してくださいね。

アプリブロックで反映

カスタマイズ画面からApp embedsとすすみ、Booking Widgetsを有効化してください。

Store wideのWidgetsも使用したい場合には、Upcomming Eventsを有効化し、表示させたいWidgetsと表示場所を選択してください。

コード埋め込み

もうひとつのパターンはコードの埋め込みです。コードを埋め込むには、以下の2つの方法があります。

• テーマファイルの編集
• カスタムLiquidを活用

簡単なのは、カスタムLiquidのセクションを活用することですね。

ストアカスタマイズ画面から任意のページを開き、カスタムLiquidを追加。Liquidコード内に、コードを貼り付けてください。

まとめ

いかがでしたでしょうか。

Widgetsの設定自体はそこまで複雑ではないのですが、慣れない場合には英語表記であったり、この設定がどのように変化するのかがわかりずらいので、少しとっつきづらいかと思います。

ただ一度設定してしまえば、同じBookingTypeの製品・サービスには、流用して使えますので、一度気合を入れて設定しきってください！

Translationsについては、全部を変更しようとすると大変なので、見た目や動作を設定し終わった後、必要な部分のみ翻訳することをおすすめします。