ウェブサイトのからのお問い合わせをもっとカジュアルに受け付けられるように、オンラインミーティングを気軽に申し込めるオンライン相談フォームを導入しました。
今回使用していない機能・設定についての解説は省略しています。
環境
- HubSpot Starter Customer Platform
- Googleカレンダーを連携するGoogleアカウント(HubSpotユーザーと同じEメールアドレスに繋がったもの)
HubSpotミーティングを作成する
HubSpotにログインし、営業タブのミーティング日程調整から作成します。今回はデフォルトのミーティングを編集して使用しました。
概要を設定する

ミーティングタイプ
1対1、グループ、持ち回り(ラウンドロビン)が選択できます。こちらは1対1に設定。ミーティング公開後は変更できないため注意してください。
内部名
内部管理のための名前です。「Webサイトからの相談」など、識別しやすい名前をつけます。
主催者名
HubSpotに登録している自分の名前をプルダウンで選択。
イベントタイトル
任意のイベントタイトルを設定します。こちらは「株式会社シロクロ無料オンライン相談」に設定しました。
場所
場所にはzoomを選択し、連携プロセスを行いました。zoomの他にも、Microsoft TeamsやGoogle Meetとの連携も可能です。
スケジュール設定

右のフォームプレビューを確認しながら、必要な項目の設定を進めます。
日程設定ページのリンク
日程調整フォームを表示するリンクです。こちらをWebサイトにリンクして使用します。
スケジュールタブ:スケジュール設定のタイトル
ミーティング日程調整フォームに表示されるタイトルを設定します。
スケジュールタブ:期間オプション
ミーティング所要時間の選択肢を指定します。今回は30分のオプションのみに設定しました。
スケジュールタブ:自分のタイムゾーン
こちらは日本に合わせるためにソウル・東京に設定。
スケジュールタブ:空き状況ウィンドウ
会社の営業日や担当者の状況に合わせて、ミーティングを受け付ける曜日・時間帯を設定します。イレギュラーは後ほどのGoogleカレンダーとの連携で設定します。
追加設定

フォームの細かい挙動を設定します。
- 当日以降の予約受付
- 選択できる時間帯は1時間刻み
という条件にしたかったので、最小通知時間を1日、予備時間を30分、開始時刻の増分を60分に設定しました。
HubSpotミーティングとGoogleカレンダーを連携する

HubSpotミーティング日程調整を利用するにあたって、任意のカレンダーサービスと連携が必須です。フォームから予約を受け付けたり、イレギュラーな予定とのバッティングを防いだりすることができます。今回はGoogleカレンダーと連携しました。
注意点として、接続するGoogleカレンダーのアカウントはミーティングツールに使用するEメールアドレスと同じEメールアドレスにつながっている必要があります。
Googleカレンダーのデフォルトカレンダー以外を作成します。名前は「HubSpotタスク」としました。
HubSpotの設定>全般>カレンダーから、「カレンダー同期」にチェックをいれ、先ほど作成したカレンダー「HubSpotタスク」を選択します。
ミーティングを受け付けられない時間帯に予定がある場合、Googleカレンダーのメインカレンダーに記入していきます。先ほど作成した「HubSpotタスク」に入力してもフォームに反映されないので注意してください。
これでHubSpotミーティングから予約を受け付ける準備ができたので、Webサイト内のバナーにリンクしてオンライン相談フォーム実装が完了です。
実際の挙動
実際にカレンダーに予定を入れて、その時間帯がフォームから選択できなくなっているかを確認します。
メインカレンダーの22日に10:00~16:00までの予定が入っています。

ミーティング予約フォームで22日を選択すると、16:00以前の項目が非表示になっています。

まとめ
HubSpotミーティング日程調整を利用したオンライン相談フォームの実装を解説しました。とくにつまずきやすい、
- カレンダーとの連携が必須
- 予定のある時間帯を選択不可にしたい場合、連携したカレンダーのメインカレンダーに記入
というポイントを押さえれば、簡単にミーティング日程の調整・予約フォームが導入できます。
Webサイト運用のことならシロクロへお問い合わせください

