![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2023/04/cl-4.jpg?resize=1024%2C576&ssl=1)
今回はCalendly(カレンドリー)のスケジュール予約画面を外部サイトに埋め込む方法について解説します。
Calendly(カレンドリー)公式サイトはこちら
https://calendly.com/
前回の記事はこちら
メニュー画面のイベント一覧でShare(シェア)を押す
「My Calendly」の画面で表示されている公開したいイベントの「Share」を押下します。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2023/03/%E7%84%A1%E9%A1%8C-73-edited.png?resize=935%2C588&ssl=1)
Calendlyの予約ページをサイトに埋め込む方法の種類
右側にある「Add to website」(アドトゥウェブサイト)を選択すると3種類の方法が表示されますが、まず上から「Inline Embed」(インラインエンベッド)とはページ中に直接埋め込む方法です。(こちらが最も一般的で基本的な方法です)
真ん中にある「Popup Widget」(ポップアップウィジェット)はポップアップ表示です。
最下の「Popup Text」(ポップアップテキスト)は、テキストリンクを入れてクリックするとポップアップ表示される設定です。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2023/03/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2023-03-12-17.52.44.png?resize=1024%2C654&ssl=1)
Inline Embed(画面にカレンダーを直接埋め込む)の方法
まずは「Inline Embed」(インラインエンベッド)の設定方法です。
「Inline Embed」を選択し右下の「Continue」を押下します。
画面が切り替わりますが、左側に表示される設定として「Hide Event Type Details」は、オンにすると詳細や説明が省かれてしまいますので、こちらはチェックを入れないようにしましょう。
下の「Hide Cookie Banner」は余計なCookie情報などを排除する意味ではチェックを入れて隠しておくことをお勧めします。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/11/%E7%84%A1%E9%A1%8C-81.png?resize=1024%2C635&ssl=1)
実際にサイトに埋め込む方法
右側にHTMLコードが表示されているので、例えば弊社で利用しているサイト作成ツールのClickfunnels(クリックファネル)のページ内に貼り付けたい場合は、Clickfunnelsの該当ページで「Add New Element」(アッドニューエレメント)を押下し、右側に表示されるメニューの一番下にある「Custom HTML」を押下します。
次に、「OPEN CODE EDITOR」(オープンコードエディター)を押下してHTMLコードを貼り付けてClickfunnels上でSAVEすると設定が反映されます。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/11/%E7%84%A1%E9%A1%8C-76.png?resize=1024%2C653&ssl=1)
ちなみにKajabi(カジャビ)でサイトを作成する場合は、ページ編集画面の一番下に表示される「Custom CODE」を押下して同様にHTMLを貼り付ければ完了です。
ポップアップウィジェットとしてサイトに埋め込む場合
次に「Popup Widget」(ポップアップウィジェット)設定を解説します。
こちらは「Botton Text」(表示されるボタンの文言)を日本語にして、ページの貼り付けは「Inline Embed」の設定方法と同じ手順を踏めばポップアップを設定することができます。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2023/03/%E7%84%A1%E9%A1%8C-84-edited.png?resize=1031%2C639&ssl=1)
画像のようにサイトの右下などに表示させたい場合にはお勧めの方法です。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/11/%E7%84%A1%E9%A1%8C-78.png?resize=1024%2C653&ssl=1)
「ポップアップテキスト」としてサイトに埋め込む場合
最後は「Popup Text」(ポップアップテキスト)ですが、こちらも同様に「Link Text」を日本語表記にして「Inline Embed」(インラインエンベッド)の設定方法と同じ手順を踏めば設定することができます。
![](https://i0.wp.com/philipptarohiltl.com/wp-content/uploads/2022/11/%E7%84%A1%E9%A1%8C-85.png?resize=1024%2C635&ssl=1)
こちらは表示される面積が小さいのであまりお勧めではありません。
このように、面談ページを埋め込んで公開することでページに来ていただいたお客様を直接誘導することができ、商品のクロージングなどにも役立つのでぜひ設定方法を覚えてください。
以上が、Calendlyで作成した予約ページを自分のサイトに埋め込む方法です。
予約ページを自分のサイトに埋め込みたい方はぜひご活用ください!
Calendly(カレンドリー)公式サイトはこちら
https://calendly.com/