WEB予約カレンダー(MTS Simple Booking)を設置する方法

mts-simple-booking-thumbnail

Web予約カレンダーを設置する方法を紹介します。

「MTS Simple Booking」の設置は任意です。
ほかのWeb予約システムをご利用の方は、そちらをご利用ください。

WordPressに無料でWEB予約システムを設置しよう

WordPressの「MTS Simple Booking」というプラグインを使うことで、
無料でホームぺージにWeb予約システムを導入することができます。

Healerには、すでにMTS Simple BookingのCSSを組み込んでいますので、
インストールして設定だけしていただければ、
すぐにこのようなデザインで設置することができます。

Web予約カレンダー

Web予約カレンダー

名前の通りデザインもシンプルでとても使いやすいです。

好きな日付をクリックすると、次は時間を選択します。

時間を選択

時間を選択

最後に情報を入力して送信するだけで簡単にWeb予約ができます。

入力フォーム

入力フォーム

MTS Simple Bookingの設置と使用方法

まずは下記リンクからプラグインをダウンロードしてください。

Download

ダウンロードしたら、
プラグインの新規追加から[インストール] ⇒ [有効化]します。

予約フォーム用の固定ページを作成する

上の画像のお客様情報を入力するページを作成します。

タイトル[予約フォーム]、パーマリンク[booking-form]とし、
記事の中身は空欄のまま公開します。

予約フォームページの作成

予約フォームページの作成

カレンダーで日時から選択してもらわないと意味のないページなので、
検索エンジンに見つからないようにしないといけません。

SEO設定の[インデックスしない(noindex)]にチェックを入れましょう。

SEO設定

SEO設定

各種設定

次に、予約システムの各種設定をしていきます。

予約システムの設定

予約システムの設定

まず、予約パラメータの一番上にある「予約の受付」です。

予約の受付にチェック

予約の受付にチェック

このチェックが外れていると予約機能がストップしますので、
必ずチェックを確認してください。

次の施設情報は赤で囲んだ部分が必須項目となります。

施設情報の入力

施設情報の入力

予約時のお客様への確認メールに表示されるものなので必ず記入してください。

次にお客様に予約時に入力してもらいたい情報を選択します。

お客様入力情報の項目設定

お客様入力情報の項目設定

ここでは上の3つを必須としています。

最後に予約時にお客様に送られる自動返信メールの中身を変更します。

自動返信メールの内容設定

自動返信メールの内容設定

%で囲まれた部分に施設情報とお客様が記入した情報が自動で入ります。

予約ができたことをお知らせできればいいので、
必要最小限なものに変更します。

例えば以下のような形です。
コピペして使っていただいて構いません。

メール前文

%CLIENT_NAME% 様
ご予約ID:%RESERVE_ID%

%NAME%をご利用いただき誠にありがとうございます。

以下の内容でご予約を承りました。

メール後文

このメールにお心当たりが無い場合、
以下へご連絡下さるようお願いいたします。

%NAME%
%POSTCODE%
%ADDRESS%
TEL: %TEL%
E-Mail: %EMAIL%
Webサイト: %WEB%

これで十分伝わるかと思います。

予約品目で時間割を設定

管理画面左メニューから[新規予約品目]を選択します。

予約品目の設定

予約品目の設定

タイトルは自由ですが、
ここでは[WEB予約]、パーマリンクは[reservation]としました。

予約品目の作成

予約品目の作成

予約時間割に予約可能時間帯を1つずつ設定します。
最短で10分単位で設定が可能です。

予約時間割の設定

予約時間割の設定

予約一件あたりの担当可能人数を設定します。

予約条件設定

予約条件設定

一人サロンなら全て一人でOKです。

最後に、上のURLのpost=のあとの数字をメモしておいてください。

post idの確認

post idの確認

カスタムショートコード用ウィジェットを作成する

カスタムショートコード用ウィジェットにMTSSB予約カレンダーを入れます。
1、2、3がありますが、好きなもので構いません。

Healer ver.3からWEB予約ウィジェットは廃止となりました。
「MTS Simple Booking」はカスタムショートコード用ウィジェットを使用してください。

IDの部分に先ほどの固定ページの数字を記入してください。

カスタムショートコードウィジェットにMTSSB予約カレンダーを移動

カスタムショートコードウィジェットにMTSSB予約カレンダーを移動

カスタムショートコード用ウィジェットの使い方は、
こちらで詳しく解説しています。

web-reservation-short-code-thumbnail
カスタムショートコード用ウィジェットを使っていただくことで、 記事内の好きなところにWeb予約カレンダーを表示することができます。

スケジュールの設定

スケジュールの設定で、営業日を設定します。

スケジュールの設定

スケジュールの設定

スケジュールは、チェックを付けた日が営業日になります。
一番上の曜日をクリックすると、週ごとに一括選択も可能です。

営業日の設定

営業日の設定

電話で予約が入った場合

電話で予約が入った場合は、
ブッキングを避けるために手入力で予約を埋めます。

予約の追加・編集

予約の追加・編集

追加・編集ページから予約を店舗側で入れることができます。

予約の新規追加

予約の新規追加

実際のWeb予約の流れ

それでは、実際のWeb予約の流れを確認してみます。

希望の日付を選択

カレンダーから希望の日付を選択します。

予約希望日を選択

予約希望日を選択

仮に20日を選択しました。

希望の時間を選択

日付を選択すると時間へと変わります。

予約希望時間を選択

予約希望時間を選択

15時を選択しました。

お客様情報の入力

一番初めに作成した固定ページに移動し、
お客様情報を入力するフォームが表示されます。

基本情報を入力

基本情報を入力

予約確認をクリックすると、
入力に間違いがないかの確認画面が表示されます。

入力の確認

入力の確認

予約がされると店舗側にメールが届き、
予約システム管理画面でお客様の情報を確認できます。

予約情報の確認

予約情報の確認

月ごとにソートも可能です。

予約された日付と時間はすぐに×マークが付いて予約ができなくなります。

埋まると×が付く

埋まると×が付く

時間選択からカレンダー表示への戻し方

時間選択画面で希望の時間が埋まっていた場合、
カレンダー画面に戻るにはブラウザを更新しなければなりません。

この辺りが少し不便に感じましたので、
カレンダー画面に戻るための更新ボタンの設置方法を記事にしました。

参考【MTS Simple Booking-C】時間選択からカレンダー表示に戻す方法 | Lognote

注意:フェイタルエラーが出た場合の直し方

PHPバージョンなどによって、
フェイタルエラー(致命的なエラー)が発生してしまうことがあるようです。

直し方をメインブログでシェアしておりますので、
もしエラーが出た際は参考にしてください。

参考【MTS Simple Booking-C】フェイタルエラー解決方法 – Lognote

mts-simple-booking-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。