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

mts-simple-booking-thumbnail

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

面倒なCSSデザインもHealerにはすでに組み込んでいますので、
すぐに以下のようなデザインのWEB予約カレンダーが設置可能です。

WEB予約カレンダー

WEB予約カレンダー

予約希望日と時間を選択し、

日付と時間を選択します

日付と時間を選択します

情報を入力して送信するとWEB予約の完了です。

お客様が情報を入力するフォームです

お客様が情報を入力するフォームです

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

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

MTS Simple Bookingの設定方法

それでは、MTS Simple Bookingの設定をしていきます。

MTS Simple Bookingは管理画面のプラグイン検索では出てこないので、
公式サイトから直接ダウンロードします。

「MTS Simple Booking」のDownload

WordPress管理画面からプラグイン > 新規追加と進みます。

ページ上部のプラグインのアップロードからMTS Simple Bookingをアップロードしてインストール > 有効化しましょう。

MTS Simple Bookingをアップロードします

MTS Simple Bookingをアップロードします

1.予約フォームページを作成する

お客様情報を入力する固定ページを作成します。

タイトルを「予約フォーム」、スラッグを「booking-form」にして、
記事の中身は空欄のまま公開します。

予約フォームページを作成します

予約フォームページを作成します

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

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

SEO設定のインデックスしない(noindex)にチェックを入れます

SEO設定のインデックスしない(noindex)にチェックを入れます

2.予約システムの設定をする

次に、予約システムの設定をします。

WordPress管理画面から予約システム > 各種設定と進んでください。

各種設定をします

各種設定をします

まず、予約パラメータの一番上にある「予約の受付」です。
このチェックが外れていると予約機能がストップしまいます。

予約の受付にチェックを入れます

予約の受付にチェックを入れます

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

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

施設情報は赤枠が必須項目です

施設情報は赤枠が必須項目です

次にお客様に予約時に入力してもらいたい情報を選択します。
ここでは上の3つを必須としています。

お客様入力情報の項目を設定します

お客様入力情報の項目を設定します

最後に予約時にお客様に送られる自動返信メールの中身を変更します。
%で囲まれた部分に施設情報とお客様が記入した情報が自動で入る仕組みです。

自動返信メールの内容を設定します

自動返信メールの内容を設定します

デフォルトの文章はやたら丁寧に書かれていますが、
予約ができたことが伝わればいいので簡単に書き替えましょう。

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

メール前文

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

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

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

ここに予約内容が自動で入ります。

メール後文

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

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

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

3.予約品目で時間割を設定する

次に、営業の時間割を設定します。

WordPress管理画面から予約品目 > 新規予約品目と進んでください。

予約品目を設定します

予約品目を設定します

タイトルは自由です。
ここでは「WEB予約」、スラッグは「reservation」としました。

予約品目ページを作成します

予約品目ページを作成します

少し下にスクロールすると予約時間割があります。

予約可能にしたい時間帯を1つずつ設定してください。
最短で10分単位で設定が可能です。

予約時間割を設定します

予約時間割を設定します

さらに下にスクロールすると予約条件設定があります。

予約一件あたりの担当可能人数を設定してください。
一人サロンなら全て一人でOKです。

対応可能人数を設定します

対応可能人数を設定します

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

post idの確認しておきます(あとで使います)

post idの確認しておきます(あとで使います)

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

そろそろラストスパートです。

WordPress管理画面から外観 > ウィジェットと進んでください。

一番右端にカスタムショートコード用ウィジェットというのがあります。
ここにMTSSB予約カレンダーを入れてください。

IDの部分に先ほど作成した予約品目ページの数字を入力します。

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

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

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

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

5.スケジュールの設定をする

次に、営業日を設定します。

WordPress管理画面から予約システム > スケジュールと進んでください。

スケジュールの設定をします

スケジュールの設定をします

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

チェックを入れた日が営業日になります

チェックを入れた日が営業日になります

以上で「MTS Simple Booking」の設定は終了です。

実際のWeb予約の流れ

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

1.希望の日付を選択

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

予約希望日を選択します

予約希望日を選択します

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

2.希望の時間を選択

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

予約希望時間を選択します

予約希望時間を選択します

15時を選択しました。

3.お客様情報の入力

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

基本情報を入力します

基本情報を入力します

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

入力の確認をします

入力の確認をします

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

予約情報の確認をする

予約情報の確認をする

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

予約が埋まると×が付きます

予約が埋まると×が付きます

電話で予約が入った場合

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

WordPress管理画面から予約システム > 追加・編集と進んでください。

予約の追加・編集をします

予約の追加・編集をします

ここから予約を店舗側で入れることができます。

追加・編集から手動で予約が入れられます

追加・編集から手動で予約が入れられます

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

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

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

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

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

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

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

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

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

Twitterで

コメントを残す

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