Calendly:スケジュールポップアップまたは埋め込みカレンダーをWebサイトまたはWordPressサイトに埋め込む方法

CalendlySchedulingウィジェット

数週間前、私はあるサイトにいて、リンクをクリックして彼らとの約束をスケジュールしたときに、目的のサイトに連れて行かれなかったことに気づきました。 カレンダーに ポップアップウィンドウで直接スケジューラ。 これは素晴らしいツールです…あなたのサイトに誰かを留めておくことは、彼らを外部のページに転送するよりもはるかに良い経験です。

Calendlyとは何ですか?

カレンダーに あなたと直接統合します Googleワークスペース または他の予定表システムを使用して、美しく使いやすいスケジューリングフォームを作成します。 何よりも、カレンダーで誰かがあなたとつながる時間を制限することもできます。 例として、私はしばしば、外部の会議のために特定の日に数時間しか利用できません。

このようなスケジューラーを使用することも、フォームに入力するよりもはるかに優れたエクスペリエンスです。 私のために デジタルトランスフォーメーションコンサルティング会社、リーダーシップチームが会議に参加しているグループセールスイベントがあります。 また、Web会議プラットフォームをCalendlyに統合して、カレンダーの招待状にすべてのオンライン会議リンクが含まれるようにします。

Calendlyは、スケジュールフォームをページに直接埋め込んだり、ボタンから開いたり、サイトのフッターのフローティングボタンから開いたりするのに最適なウィジェットスクリプトとスタイルシートをリリースしました。 Calendlyのスクリプトはうまく書かれていますが、それをサイトに統合するためのドキュメントはまったく良くありません。 実際、Calendlyがさまざまなプラットフォーム用の独自のプラグインやアプリをまだ公開していないことに驚いています。

これは非常に便利です。 ホームサービスを利用していて、顧客が予約をスケジュールする手段を提供したい場合でも、ドッグウォーカー、訪問者にデモのスケジュールを設定してほしいSaaS企業、または複数のメンバーがいる大企業など、簡単にスケジュールする必要があります…Calendly埋め込みウィジェットは優れたセルフサービスツールです。

あなたのサイトにカレンダーを埋め込む方法

不思議なことに、これらの埋め込みの方向は、 イベントの種類 Calendlyアカウント内の実際のイベントレベルではなく、レベル。 右上のイベントタイプの設定のドロップダウンにコードがあります。

カレンダーに埋め込む

それをクリックすると、埋め込みの種類のオプションが表示されます。

ポップアップテキストを埋め込む

コードを取得してサイトの好きな場所に埋め込むと、いくつかの問題が発生します。

  • XNUMXつのページでいくつかの異なるウィジェットを呼び出したい場合…おそらくスケジューラー(ポップアップテキスト)を起動するボタンとフッターボタン(ポップアップウィジェット)があります…スタイルシートを追加し、いくつかのスクリプトを作成しますの時間。 それは不要です。
  • サイトで外部スクリプトとスタイルシートファイルをインラインで呼び出すことは、サービスをサイトに追加するための最適な手段ではありません。

ヘッダーにスタイルシートとJavascriptをロードしてから、サイト全体で意味のある他のウィジェットを使用することをお勧めします。

Calendlyのウィジェットのしくみ

カレンダーに サイトに埋め込むために必要なXNUMXつのファイル、スタイルシートとjavascriptがあります。 これらをサイトに挿入する場合は、HTMLのヘッドセクションに次を追加します。

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

ただし、WordPressを使用している場合、ベストプラクティスは のfunctions.php WordPressのベストプラクティスを利用してスクリプトを挿入するファイル。 したがって、私の子テーマには、スタイルシートとスクリプトをロードするための次のコード行があります。

wp_enqueue_script('calendly-script', '//assets.calendly.com/assets/external/widget.js', array(), null, true);
wp_enqueue_style('calendly-style', '//assets.calendly.com/assets/external/widget.css' );

これにより、これらがサイト全体に読み込まれます(そしてキャッシュされます)。 これで、ウィジェットを好きな場所で使用できます。

カレンドリーのフッターボタン

サイトのイベントタイプではなく特定のイベントを呼び出したいので、フッターに次のスクリプトをロードしています。

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/highbridge-team/sales', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

あなたは見るでしょう カレンダーに スクリプトは次のように分類されます。

  • URL –ウィジェットにロードしたい正確なイベント。
  • テキスト –ボタンに含めるテキスト。
  • –ボタンの背景色。
  • テキストの色 –テキストの色。
  • ブランド設定 –Calendlyブランドを削除します。

Calendlyのテキストポップアップ

また、リンクまたはボタンを使用して、これをサイト全体で利用できるようにしたいと思います。 これを行うには、でonClickイベントを利用します カレンダーに アンカーテキスト。 Mineには、ボタンとして表示するための追加のクラスがあります(以下の例には表示されていません)。

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>

このメッセージを使用して、3つのページに複数のオファリングを含めることができます。 埋め込みたいイベントがXNUMX種類あるかもしれません…適切な宛先のURLを変更するだけで、機能します。

Calendlyのインライン埋め込みポップアップ

インライン埋め込みは、クラスと宛先によって具体的に呼び出されるdivを利用するという点で少し異なります。

<div class="calendly-inline-widget" data-url="https://calendly.com/highbridge-team/sales" style="min-width:320px;height:630px;"></div>

繰り返しますが、これは、それぞれに複数のdivを持つことができるので便利です。 カレンダーに 同じページのスケジューラ。

補足:これが実装された方法をCalendlyに変更して、それほど技術的である必要がないようにしたいと思います。 クラスを作成してから、destinationhrefを使用してウィジェットをロードできれば素晴らしいと思います。 そのため、コンテンツ管理システム全体で直接コーディングする必要が少なくなります。 しかし…それは素晴らしいツールです(今のところ!)。 たとえば、ショートコードを使用したWordPressプラグインは、WordPress環境に最適です。 興味があれば、Calendly…私はあなたのためにこれを簡単に作ることができます!

Calendlyを始めましょう

免責事項:私はCalendlyのユーザーであり、システムのアフィリエイトでもあります。 この記事には、記事全体にアフィリエイトリンクがあります。