今回はClickFunnelsでファネル内にCalendarを入れていきます。CalendlyとかGoogle Calendarとかです。先に答えを言ってしまうと、使うElementはCustom JS/HTMLのElementになります。
今回お届けするノウハウはこちら
Step1. CalendlyとGoogle Calendar の違いを理解しておく
今回やっていくのはCalendlyとGoogle Calendar、あとはCustom JS/HTMLのElementを使うので、こういうJavaScriptとかHTMLの埋め込みコートがあれば、他のサービスでも全然できます。サービスによっては埋め込みが有料というものもありますので、注意してください。調べた限りだとCalendlyとGoogle Calendarは無料でした。ということでやっていきましょう。
編集画面にいく前に、これは幅の狭いところに埋め込んだものです。こちらを見てください。これは何もタグをいじっていません。Calendlyは結構うまいことやっていて、このスペースの左右の中央に配置してくれるようになっています。Google Calendarは、ここの左端にくっついてしまっていて中央に持ってきてくれていません。
これも一緒です。幅の狭いところに埋め込んだのですが、Calendlyは何も指定しなくてもこの幅通りにフィットを変えてくれています。そしてGoogle Calendarの方は、後で設定のところにいけば分かりますが、確かこれは600×800で勝手に縮尺とかを変えてはくれません。こういう違いもあるので、サービスごとに特色を理解しながらやってみてください。
Step2. 「CUSTOM JS/HTML」を挿入する
今回はAdd New Elementで、一番下にあるCustom JS/HTMLをクリックします。そしてCUSTOM JAVACRIPT/HTMLをduplicateしておきましょう。コピーして2つ作っておきましょう。
Step4. Calendlyを設定する
まずCalendlyをいきましょう。もうアカウントを取得してセットアップが終わっているということにしましょう。デモのカレンダーを入れてきて、Add to Websiteというところをクリックしてください。この歯車マークのところです。歯車マークのところからAdd to Websiteです。これは中に入ってしまうとうまくできないので、歯車マークからAdd to Websiteにいってください。
そして今回はぱっと見えるような感じがいいので、Inline Embedにします。Continue。そしたら本当に簡単に、コードをコピーしてやるだけなんです。設定もいらなくてCalendlyは本当にすごく良かったです。
僕ら「いしこん」のオフィスアワーでも、毎週土曜日のミーティングの時間をお客さんに選んでもらう時にCalendlyを使っていて、無料でもいろんな機能が使えるのですごくいいです。上の「CUSTOM JAVACRIPT/HTML」に入れました。
Step5. Google Calendarを設定する
Google Calendarをいきましょう。Google Calendarは、ここの設定からSetting＆sharingですね。
そしてCustomizeの方を先にいきましょう。そうするといろいろCustomizeの項目があります。ここのところでさっき言った大きさを指定しますが、このアスペクト比はどうやら変えてくれないみたいです。ちょっと不親切かなという感じがしますね。
あとはこのMonthlyのViewじゃなくても、WeekとかのViewにすると時間帯が見やすいので少しやってみましょう。今回はこのコードをコピーしてきます。
そしてこの下の「CUSTOM JAVACRIPT/HTML」に入れましょう。閉じてSave。そしてPreviewにいってみましょう。必ずSaveが終わったところでPreviewをしましょう。
読み込みに若干時間がかかるみたいです。Google Calendar はきれいに出ていて、どこが空いているかがすぐ視覚的に分かるようになっています。
Calendlyの方は、Google Calendarみたいに週ごとのどこの時間が空いてるというのを、一覧でぱっと見れるところがないんですね。例えばこういうふうに日を指定して、その日に入って空いている時間帯を見るような感じになります。僕はCalendlyの方がきれいでいいなと思う反面、こういうWeeklyのViewがないので、Google Calendarの方が便利だと思います。用途によって決めてみてください。ということで今回は以上です。使ってみてください。
