今回は、SuperSaaSスケジュールの適切な場所にユーザーをできるだけ少ないステップで誘導する方法についてご説明します。これをマスターすれば、予約プロセスを効率化し、顧客がスケジュールを操作するのにかかる時間を短縮できます。
SuperSaaSを使って予約プロセスを効率化し始めると、顧客はスケジュールの適切なナビゲート方法についてガイダンスが必要になる場合があります。スケジュールへのリンクを送るだけでも便利ですが、必要なクラス、リソース、またはサービスを見つけられない顧客もいるかもしれません。顧客が適切な時間枠や日付を楽に見つけられるよう、適切なクラス、リソース、またはサービスをあらかじめ選択した「ディープリンク」を提供することをお勧めします。
方法をいくつかご紹介します。
1. ユーザーを特定のクラス、リソース、またはサービスに誘導する
デフォルトでは、SuperSaaSスケジュールはスケジュール内の最初の空き状況で開きます。しかし、スケジュールリンクを変更することで、特定の月、週、または日に顧客を送ることができます。スケジュールの種類によって、手順が少し異なる場合があります。
キャパシティスケジュール：スロットIDをリンクに追加する
キャパシティスケジュール内の特定のクラスやスロットに直接リンクしたい場合は、スロットIDをリンクに追加することで実現できます。スロットIDを見つけるには、管理者ダッシュボードに移動し、スケジュール名の横にある「監視」をクリックします。
ページが読み込まれたら、リンクしたいクラスの横にある虫眼鏡（拡大鏡）アイコンをクリックします。開いたページには、末尾にスロットIDが付いたスロットへのディープリンクが直接表示されます。
例えば、カップケーキワークショップのデモでは、「Cupcake Mania」というスロットには次のリンクがあります：
supersaas.com/schedule/jpdemo/Cupcake_Workshop/12320083
リソースまたはサービススケジュール：リソースまたはサービスの名前をリンクに追加する
スケジュール内の特定のリソースまたはサービスにユーザーを誘導するには、スケジュールリンクの末尾にリソース名を追加するだけです。リソース名に通常スペースが含まれる場合、リンク内ではアンダースコア（「_」）に置き換えられることに注意してください。
会議室デモの場合、次のようなリンクになります：
supersaas.com/schedule/jpdemo/会議室/Meeting_Room_1
サービススケジュールを使用している場合は、同じパターンで特定のサービスのタイトルをスケジュールリンクの末尾に追加できます。サービスにスペースが含まれる場合も同じルールが適用されます。アンダースコアに置き換えてください。セラピストデモの「Long treatment」サービスへの完全なリンクは次のようになります：
supersaas.com/schedule/jpdemo/セラピスト/Long_treatment
2. URLの拡張子を追加して特定のスケジュールページやクラスを表示する
特定の日付にユーザーを誘導する
URLの末尾に?day=X&month=Xを追加し、Xを希望の日/月に置き換えると、ユーザーをその日付に直接送ることができます。例えば、?day=25&month=12を追加すると、ユーザーはクリスマスに誘導されます。他の拡張子として?year=Xや?week=Xもあります。これらのオプションは単独でも組み合わせても使用できます。
これらのURL拡張子を組み合わせる場合、後続の疑問符をアンパサンド（「&」）に置き換える必要があることに注意してください。例えば、次のリンクはクリスマスにカレンダーを開きます：
supersaas.com/schedule/jpdemo/会議室?month=12&day=24
キャパシティスケジュール：特定の色のクラスにユーザーを誘導する
キャパシティスケジュールを使用している場合、URL拡張子を使って特定の色のタイムスロットを表示することもできます。
例えば、初級クラスすべてを緑色、上級クラスすべてを赤色にすることができます。
そのためには、スケジュールURLの末尾に?color=Xを追加します。
Xは、タイムスロットに選択した色の番号に置き換えることができます。これらの番号は色選択メニューの順序に基づいて割り当てられるため、青は0、赤は1、などとなります。
supersaas.com/schedule/jpdemo/フィットネスクラブ?color=0
このリンクはスケジュールを読み込みますが、URLで指定した色のタイムスロットのみが表示されます。このURL拡張子を他のものと組み合わせて、ユーザーに表示されるタイムスロットをさらに絞り込むこともできます。
URL拡張子の詳細や他のオプションについては、こちらをクリックしてください。
3. カラーキーまたはドロップダウンメニューでリソースをフィルタリングする
リソーススケジュールをお持ちで、URL拡張子を使用したくないが、ユーザーが適切なリソースで時間を予約しやすくしたい場合は、利用可能なリソースをフィルタリングできるようにすると良いでしょう。
スケジュール内のリソースを表示する方法は2つあります。ドロップダウンメニューを使用する方法：
またはカラーキーを提供する方法：
カラーキーの色はスケジュール全体のリソースの色、そして結果としてそのリソースに既に予約された予約の色と一致します。スケジュール内の予約をフィルタリングするには、ユーザーはいずれかのボタンをクリックして、一致するリソースの予約のみを表示します。
4. より多くの可能性のために統合ウィジェットを使用する
以前のブログ投稿でも述べましたが、私たちは自社のウィジェット統合をとても誇りに思っています。それには十分な理由があります！私たちのウィジェットをあなたのウェブサイトに統合することもできるので、顧客はウェブサイトを離れることなくシームレスな予約体験ができます。 それでも十分シームレスでない場合は、ウィジェットに表示する特定のクラス、リソース、またはサービスをあらかじめ選択することもできます。これにより、顧客が誤ってスケジュール内の別のクラス、リソース、またはサービスに登録してしまうことを防げます。このオプションはウィジェットを生成するJavaScriptスニペットに少しテキストを追加するため、ある程度の技術的な知識が必要ですが、JavaScriptを使ったことがない方でも十分対応できるはずです。
各SuperSaaSスケジュールのウィジェットスニペットを見つけるには、ウィジェット統合ページをご覧ください。このページでは、ウィジェットの全般的な外観も設定できます。
以下の手順を使って、ウィジェットに表示（および予約可能に）したいクラス、リソース、またはサービスをあらかじめ選択できます。他のクラス、リソース、およびサービスは、ユーザーが最初にウィジェットを表示したときには表示されません。
キャパシティスケジュール：クラスまたはワークショップをあらかじめ選択する
1つのキャパシティスケジュールに複数のワークショップがあり、特定のものをウィジェットで強調したい場合は、監視ページで目的のスロットの虫眼鏡アイコンをクリックしてスロットIDを見つけます。スロットIDをコピーし、select:slotIDとしてコードスニペットに追加します。ウィジェットがそのスロットを開くことを確認するため、コードスニペットにview: "free"も含めます。
カップケーキワークショップデモの標準コードスニペットは次のとおりです：
<script class="supersaas-widget">var supersaas = new SuperSaaS("jpdemo", "Cupcake_Workshop", {"widget_type": "frame", "menu": "show"})</script>
選択されたスロットを開くスニペットは代わりに次のようになります：
<script class="supersaas-widget"> var supersaas = new SuperSaaS("jpdemo", "Cupcake_Workshop", {"widget_type": "frame", "view": "free", select:12320083}) </script>
リソーススケジュール：リソースをあらかじめ選択する
リソーススケジュールのウィジェットスニペットでは、リソース名を渡してその特定のリソースをあらかじめ選択できます。この追加により、ユーザーは選択したリソースの空き状況のみを表示します。ただし、予約を確定する際にリソースを変更することは可能です。
標準コードスニペットは次のとおりです：
<script class="supersaas-widget">var supersaas = new SuperSaaS("jpdemo", "会議室", {"widget_type": "frame", "menu": "show"})</script>
会議室1の空き状況のみを表示するには、コードスニペットは次のようになります：
<script class="supersaas-widget">var supersaas = new SuperSaaS("jpdemo", "会議室", {"widget_type": "frame", "menu": "show", select:"Meeting Room 1"})</script>
サービススケジュール：サービスをあらかじめ選択する
サービススケジュールの場合、スニペットへの変更はリソーススケジュールの場合とよく似ています。select:とあらかじめ選択したいサービスの名前を追加します。ユーザーはセレクターでサービスを切り替えることも可能です。
セラピストデモの標準コードスニペットは次のとおりです：
<script class="supersaas-widget">var supersaas = new SuperSaaS("jpdemo", "セラピスト", {"widget_type": "frame", "menu": "show"})</script>
「Long treatment」サービスを特にあらかじめ選択したい場合は、次のようにします：
<script class="supersaas-widget">var supersaas = new SuperSaaS("jpdemo", "セラピスト",{"widget_type": "frame", "menu": "show", select:"Long treatment"})</script>
ページに異なるクラス/リソース/サービスを持つ複数のウィジェットを追加したい場合はもちろん可能です。例えば、ウェブサイトのさまざまなページに異なるバージョンのウィジェットを追加することもできます。
JavaScriptの設定については、デベロッパーウィジェットドキュメントをご覧ください。その他ご質問がある場合は、サポートチームがお手伝いします。