ShopifyストアにMindbody予約ウィジェットを追加する方法

お客様がオンラインであなたのスタジオを見つけ、Shopifyストアにアクセスして10回分のクラスパックを購入しました。素晴らしいですね。では、次はどうしましょうか？多くのシステムでは、ここで顧客体験が停滞してしまいます。お客様は支払いを済ませましたが、実際にクラスを予約する方法が明確ではなく、数分後には「Mindbody」という聞いたこともない会社から、分かりにくいパスワードが記載されたメールが届きます。

このガイドでは、両方の問題を解決します。まず、Mindbodyの予約ウィジェットをShopifyストアに直接追加して、顧客が数クリックで予約できるようにする方法を解説します。次に、Mindbodyの決済処理が利用できない場合でもShopifyで販売する方法、そしてShopConnectがどのようにして2つのシステムをバックグラウンドで連携させるのかを説明します。

開発者である必要はありません。Shopifyでページを編集できる方なら、すべて可能です。

---

パート1：ShopifyストアにMindbody予約ウィジェットを追加する

ここでの目標はシンプルです。Shopifyストアに「今すぐ予約」ページを作成し、そこにMindbodyの最新のスケジュールを表示することで、顧客がサイトを離れることなく予約できるようにすることです。

まず必要なもの

• あなたの心と体 ブランドウェブ ウィジェットのコードスニペット（これはMindbodyアカウントから取得できます）
• オンラインストア付きのShopifyプラン（ベーシック、グロウ、アドバンスト、プラス）
• Shopifyストアへの管理者アクセス
• オンラインストア2.0テーマ（Dawnのような）

それら全てが揃っていれば、準備は万端です。

ステップ1：ページを作成する

Shopifyの管理画面で、 オンラインストア → ページ → ページを追加.

「今すぐ予約」のようなタイトルを付けてください。そのタイトルがページのウェブアドレスも生成します。必要に応じてコンテンツボックスに短い紹介文を追加し、クリックしてください。 保存.

ステップ2：カスタムテンプレートを作成する

ページを編集している間は、右側を見てください。 テンプレート ドロップダウン。クリックして選択 テンプレートを作成する.

テンプレートにページ名を付け（例：「book-now」）、 デフォルトページ ベースとして。クリック 保存.

これにより、予約ページ専用のテンプレートが作成されるため、ストアの他の部分に影響を与えることなくウィジェットを挿入できます。

ステップ3：カスタムLiquidセクションにウィジェットコードを追加します

さあ、次は オンラインストア → テーマ そしてクリック カスタマイズ ライブテーマで。

上部のページドロップダウンを使用して、作成したばかりの新しいページとテンプレートを選択します。左側のパネルで、 セクションを追加 → カスタム液体.

Mindbodyの予約ウィジェットコードをボックスに貼り付けてください。コードは以下のようになります。

<div class="mindbody-widget" data-widget-type="Schedules" data-widget-id="XXXXXXXXXXX"></div>
<script async src="https://brandedweb.mindbodyonline.com/embed/widget.js"></script>

交換する XXXXXXXXXXX MindbodyのウィジェットIDを使用してクリックします。 保存すると、予約ウィジェットのプレビューがすぐに表示されます。

ステップ4：ページを表示する

戻る オンラインストア → ページ そして、あなたのページを開いてください。

セット 可視性 → 可視次にクリックします 保存ウィジェットが読み込まれ、スケジュールが表示されることを確認するには、該当ページのウェブアドレスにアクセスしてください。

ステップ5：ページをストアメニューに追加する

最後のステップ：ページを見つけやすくする。 オンラインストア → ナビゲーション そしてあなたの メインメニュー.

クリック メニュー項目を追加「今すぐ予約」という名前を付けて、作成したページにリンクします。 追加、 それから 保存.

以上です。お客様はあなたのストアから直接予約できるようになりました。

オプション：登録ページも追加できます

登録ページも作成したい場合は、手順1～4を以下の登録ウィジェットコードを使用して繰り返してください。

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script>
<healcode-widget data-type="registrations" data-widget-partner="object" data-widget-id="XXXXXXXXXXX" data-widget-version="0"></healcode-widget>

次に、顧客が予約ページと登録ページ間を簡単に移動できるように、2つのページを相互リンクさせます。

---

パート2：Mindbody Payment Processingを使用せずにShopifyで販売する方法

地域によっては、Mindbodyの決済処理機能が利用できないため、Mindbody経由で直接支払いを受け付けることはできません。ただし、Shopifyでサービス、パッケージ、メンバーシップを販売することは可能で、すべての取引はMindbodyに正しく反映されます。ただし、注文の流れが「先に購入、次に予約」というように少し変更されます。

フローの仕組み

1. 顧客があなたのShopifyストアでサービス、パッケージ、またはメンバーシップを購入しました。
2. ショップコネクト Mindbodyの顧客レコードを作成または照合し、購入を記録することで、顧客の信用情報が既にMindbodyに登録されているようにします。
3. 顧客はその後、Mindbodyにログインして、実際の予約やレッスンを予約します。

ShopConnectは、この2つのシステムをつなぐ役割を果たします。顧客がShopifyで支払いを行うと、ShopConnectは、あなたが何も再入力することなく、その購入情報がMindbodyの適切な顧客に紐づけられるようにします。

唯一の難点、そしてそれをどう改善するか

準備を怠ると、顧客を混乱させてしまう瞬間があります。Shopifyストアで支払いを済ませた後、Mindbodyからパスワード確認メールが送信されます。Mindbodyを知らない顧客にとって、そのメールはスパムメールのように見え、無視してしまうかもしれません。そして、自分のクラスはどこにあるのかと疑問に思うのです。

解決策はコミュニケーションです。ドキュメントでは、単一の マスターメッセージ 購入後に顧客が受け取るメール全体で再利用する内容：

「この度は弊社のオンラインストアをご利用いただき、誠にありがとうございます！弊社のオンライン予約システムからパスワードが記載されたメールが送信されますので、ご確認ください。」 マインドボディオンラインパスワードを設定したら、クリックしてください。 ここ 予約またはレッスンの予約をするには、こちらをクリックしてください。

「ここ」という単語は、予約ページ（パート1で作成したShopifyの「今すぐ予約」ページ、または他のウェブサイト上の同等のページ）へのリンクです。

メッセージの送信先：3つのメール

購入後に顧客が受け取る3通のメールには、すべて同じマスターメッセージが反映されます。

メール1：Shopifyの注文確認メール。 Shopifyで、 設定 → 通知 → 注文確認メールの冒頭、注文概要の上にメインメッセージを追加してください。こうすることで、顧客がチェックアウトを完了し、まだ注意を払っている段階で、期待値を伝えることができます。

メール2：Mindbodyの「ログイン情報を忘れた場合」メール。 これは共有の自動メールなので、完全に置き換えることはできません。代わりに、既存のコンテンツの後に条件付きブロックを追加してください。

“弊社のオンラインストアで商品をご購入されましたか？ 上記の情報でログインした後、クリックしてください。 ここ ご予約またはご購入いただいたレッスンの予約については、お客様のご購入情報は既に登録されています。

これはMindbody Businessの自動メール設定にあります。顧客にログイン情報を提供すると同時に、購入履歴と紐付けます。

メール3：Mindbodyからのウェルカムメール。 ShopConnectはビジネスモードでクライアントを作成するため、ビジネスモード版を編集してください。同じ種類のブロックを追加します。

“弊社のオンラインストアで商品をご購入されましたか？ アカウントにログインしてから、クリックしてください。 ここ ご予約またはご購入いただいたレッスンの予約については、お客様のご購入情報は既に登録されています。

これはMindbody Businessの自動送信メールにも含まれています。オンボーディング時の予約手順を改めて確認するものです。

「ここ」リンクが指すべき場所

各「こちら」リンクをクリックすると、MindbodyブランドのWeb予約ウィジェットが埋め込まれたページに顧客が移動するように設定する必要があります。選択肢は2つあります。

• Shopifyのページ （ベーシックプラン以上が必要です。スタータープランではご利用いただけません。）これはパート1の「今すぐ予約」ページと全く同じです。
• 外部ウェブサイト。 予約ページがSquarespace、Wix、WordPress、またはその他のプラットフォームにある場合は、ウィジェットをそこに埋め込み、リンクをそのページに設定してください。

どちらにしても、パート1の最後に表示されたページと同じです。上部に説明文があり、下部に予約ウィジェットがあります。

知っておく価値のある場所

ShopConnectには Send_mbo_password_reset_email ShopConnectがMindbodyのパスワードリセットメールを自動的に送信するかどうかを制御する設定です。この設定を知っておくと、メールの内容と実際に送信されるメールの内容を一致させることができるので便利です。

---

なぜこれが重要なのか

予約ウィジェットと編集済みのメール3通だけ聞くと、大したことないように思えるかもしれません。しかし、これらを組み合わせることで、フィットネスやウェルネスサービスをオンラインで販売する際に最もよくあるギャップ、つまり「支払い完了」から「予約完了」までの瞬間を埋めることができます。このギャップこそ、顧客が混乱したり、諦めたり、レッスンがどこに行ったのか問い合わせのメールを送ってきたりする瞬間なのです。

予約ウィジェットをShopifyストアに直接設置することで、担当者間のやり取りが不要になります。購入後のメールを事前に準備することで、顧客が驚くような事態を防ぐことができます。さらに、ShopConnectは中間段階の手作業を省き、購入情報を適切なMindbodyクライアントに自動的に紐付けることで、2つのシステムを手動で調整する必要がなくなります。

要点

• 予約ウィジェットは、Shopifyの5つのステップからなるタスクです。 ページを作成し、テンプレートを適用し、Custom Liquid を介して Mindbody ウィジェットのコードを挿入し、表示を有効にして、メニューに追加します。
• Mindbodyの決済処理機能を使わなくても、Shopifyで販売できます。 流れは「まず購入、次に予約」となり、ShopConnectは各購入を自動的に適切なMindbodyクライアントに紐付けて記録します。
• 支払い処理を伴わないフローにおいては、コミュニケーションがすべてを左右する。 3通のメールに共通して使用されるマスターメッセージは、「このMindbodyのパスワードメールは何だろう？」という混乱を防ぐ。
• 「こちら」リンクと予約ウィジェットは同じページに設置してください。 一度構築すれば、あらゆる場所からリンクできます。

ShopConnectをご利用中で、ShopifyストアとMindbodyの連携設定でお困りですか？APIANTチームまでお気軽にお問い合わせください。喜んでお手伝いさせていただきます。