日程の希望を添えて申し込むサービスだと、「いったいいつが空いてるんだろう?私の都合が全部ダメかもしれないし…」と躊躇してしまうことがありますよね。
そんなふうにお客様を戸惑わせないために、予約申し込みページに予約可能な日程が一目でわかるカレンダーを掲載してみませんか?
イベント管理システムなどを有料で契約しなくても、Googleカレンダーを活用するだけで無料で設定が可能です。
こんな感じで、「✖︎」は予約不可な日、時間が入っているのはその時間内の予約が可能というカレンダーを作って、予約申し込みページに設定してみましょう!
まずはGoogleカレンダーで色分けしたカレンダーを作ろう
Googleカレンダー初期の状態だと、このようにマイカレンダー欄にはログインアカウントの初期カレンダー(とTodoリスト・リマインダー・誕生日)しかありません。
カレンダーをワードプレスに掲載して、誰でも見れるようにするには、カレンダーを一般公開する必要があります。
なので、もしかして個人的・仕事で今後使うかもしれない初期カレンダーは、そのまま置いておいて、新しく予約用のカレンダーを作りましょう。
右上の歯車マークをクリックし、表示されたメニューから『設定』をクリックします。
設定画面が開いたら、左側のメニューの『カレンダーを追加』をクリックしてメニューを開き、その中から『新しいカレンダーを作成』をクリックします。
新しいカレンダーを作成画面が表示されるので、名前欄にご自身がわかりやすく短い名前を入力して、『カレンダーを作成』ボタンを押します。
予約OKと予約NGの色分けをして、視覚的にわかりやすく見せたいので、同様にしてもう一つ新しいカレンダーを作成しましょう。
このように二つのカレンダーができていることを確認します。そして、左上の矢印を押して、一旦、カレンダー画面に戻りましょう。
カレンダー画面に戻ったら、予約OKと予約NGのカレンダーを入力しましょう。表示のさせ方はお好みでOKですが、私は予約NGの時は終日入力で「✖︎」とだけ入れていて、予約OKの時は終日入力で空いている時間帯(例えば「10:00-12:00」のように)を入れています。
カレンダーを新しく作ると、自動で色分けされていますが、その色を別の色にしたい場合は、カレンダー名の横にある3つのポチポチをクリックすると、色を選択する画面が表示されます。そこで色を変えてください。
ワードプレスに貼り付ける前にカレンダーの見え方を調整します
右上の歯車マークをクリックし、表示されたメニューから『設定』をクリックします。
左側メニューの中から、新しく作成したカレンダー名のどちらかをクリックします。
『予定のアクセス権限』の項目まで画面をスクロールし、『一般公開して誰でも利用できるようにする』にチェックを入れます。
もうひとつのカレンダーも同じように一般公開の設定をしてください。
一般公開の設定をしましたら、その画面のまま下にスクロールして、『カレンダーの統合』のところまで移動して、『カスタマイズ』ボタンを押します。
埋め込むカレンダーの設定の画面が表示されるので、左側の設定項目を調整していきます。ここはお好みで…になりますが、よかったら私の設定を参考になさってください。
そして、重要なポイント…!表示するカレンダーを選択して、不要なカレンダーのチェックは外してください。
設定が終わりましたら、画面上部にスクロールして、『埋め込みコード』をコピーします。コード右側のコピーボタンを押すだけでコピーは完了です。
ワードプレスに埋め込みましょう
ワードプレスにログインして、カレンダーを埋め込みたいページを開きます。さらに、カレンダーを埋め込みたい箇所に『+』を押してブロック一覧を開きます。
ウィジェット欄から『カスタムHTML』をクリックします。
カスタムHTMLブロックが挿入されるので、『HTMLを入力…』のところに、先ほどコピーしたカレンダーコードを貼り付けます。
貼り付けるとこのような表示になります。
これでGoogleカレンダーのワードプレスへの埋め込みは完了です。プレビューして画面表示を確認し、問題なければ公開(か、更新)ボタンを押してください。