Calendlyの埋め込み方法【Webflow】

Webflow
Calendly
Web
日程調整
ノーコード
Embed

CalendlyをWebサイト内に埋め込むことで、サイトを見に来た人がミーティングの日程調整をそのページの中でできる機能を簡単に作れます。

これから学ぶこと:

  1. Calendlyのhtmlの出力方法
  2. Webflowへの埋め込み
  3. ダイナミックなデータの設定


CalendlyのHTMLの出力方法

まずは、Calendlyを開いて、カレンダーを設定しましょう。

アカウントを開いたら、登録されているイベントタイプ(Event Type)の設定ボタンを押して、「Add to Website」を押しましょう。


次に開く画面では、「Inline Embed」を選びましょう。


開いたら画面の右側に埋め込み用のHTMLコードが表示されます。そのコードをコピーしましょう。


Webflowへの埋め込み

Webflowでは、Calendlyを埋め込みしたいところに「HTML Embed」という要素を入れましょう。



開かれたコード編集ツールには、Calendlyからコピーしたコードを貼り付けましょう。


💡ヒント:

Calendlyを埋め込む際に、HTMLのStyleの高さを1000pxに設定しましょう。そうすると、埋め込みしたカレンダーが全部ページに入ってきて、スクロールなしで表示されます。


ダイナミックなデータの設定

CalendyをCMSページに埋め込みする場合、CMSデータに保存したURLをCalendlyに入れて、それぞれのCMSページに違うカレンダーを表示することができます。

そのために、「data-url」のパラメータにURLの代わりにCMSデータを入れましょう。そのために、データを埋め込むところをクリックして、「Add Field」を押して、使用したいデータ項目をクリックしてください。

そうすると、CMSページごとにそのURLのカレンダーが表示されます。

関連チュートリアル