Calendly:如何在您的網站或 WordPress 網站中嵌入計劃彈出窗口或嵌入式日曆

日曆安排小工具

幾週前,我在一個網站上,注意到當我點擊一個鏈接來安排與他們的約會時,我沒有被帶到目的地網站,有一個小部件發布了 Calendly 調度程序直接在彈出窗口中。 這是一個很棒的工具……讓某人留在您的網站上比將他們轉發到外部頁面要好得多。

什麼是日曆?

Calendly 直接與您的集成 谷歌工作區 或其他日曆系統來構建既美觀又易於使用的日程表。 最重要的是,您甚至可以限制讓某人在您的日曆上與您聯繫的時間。 例如,在特定日期,我通常只有幾個小時可用於外部會議。

使用這樣的調度程序也比僅僅填寫表格要好得多。 對於我的 數字化轉型諮詢公司, 我們有領導團隊參加會議的團體銷售活動。 我們還將我們的網絡會議平台集成到 Calendly,以便日曆邀請包含所有在線會議鏈接。

Calendly 推出了一個小部件腳本和样式表,它在將日程安排表單直接嵌入頁面、通過按鈕打開、甚至從網站頁腳中的浮動按鈕打開方面做得非常出色。 Calendly 的腳本寫得很好,但是將它集成到您​​的站點的文檔卻一點也不好。 事實上,我很驚訝 Calendly 還沒有為不同平台發布自己的插件或應用程序。

這非常有用。 無論您是從事家庭服務並希望為您的客戶提供一種安排預約的方式、遛狗者、希望訪客安排演示的 SaaS 公司,還是需要輕鬆安排多個成員的大型公司...... Calendly嵌入的小部件是一個很棒的自助服務工具。

如何在您的網站中嵌入日曆

奇怪的是,你只能找到這些嵌入的方向 事件類型 級別而不是您的 Calendly 帳戶中的實際事件級別。 您將在右上角的事件類型設置的下拉列表中找到代碼。

日曆嵌入

單擊它後,您將看到嵌入類型的選項:

嵌入彈出文本

如果您獲取代碼並將其嵌入您網站上任何您想要的位置,則會出現一些問題。

  • 如果你想在一個頁面上調用幾個不同的小部件......也許有一個按鈕來啟動調度程序(彈出文本)以及頁腳按鈕(彈出窗口小部件)......你將添加樣式表和腳本次。 那是不必要的。
  • 在站點中內聯調用外部腳本和样式表文件並不是將服務添加到站點的最佳方法。

我的建議是在您的標題中加載樣式表和 Javascript……然後在整個站點中使用其他小部件。

Calendly 的小部件如何工作

Calendly 有兩個文件需要嵌入您的網站,一個樣式表和 javascript。 如果您要將這些插入到您的網站中,我會將以下內容添加到您的 HTML 的 head 部分中:

<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' );

這將在我的整個站點中加載這些(並緩存它們)。 現在我可以在我喜歡的地方使用這些小部件。

Calendly 的頁腳按鈕

我想在我的網站上調用特定事件而不是事件類型,因此我在頁腳中加載以下腳本:

<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>

你會看到的 Calendly 腳本分解如下:

  • 網址 – 我想在我的小部件中加載的確切事件。
  • 文本 – 我希望按鈕具有的文本。
  • 顏色 – 按鈕的背景顏色。
  • 文字顏色 – 文本的顏色。
  • 品牌推廣 – 刪除 Calendly 品牌。

Calendly 的文本彈出窗口

我還希望使用鏈接或按鈕在我的整個網站上都可用。 為此,您可以在您的 Calendly 錨文本。 我的還有其他類可以將其顯示為按鈕(在下面的示例中看不到):

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

此消息可用於在單個頁面上提供多個產品。 也許您想要嵌入 3 種類型的事件……只需修改相應目的地的 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 同一頁面中的調度程序。

旁注:我確實希望 Calendly 修改它的實現方式,這樣它就不必太技術化了。 如果您可以只擁有一個類,然後使用目標 href 加載小部件,那就太好了。 這將需要更少的跨內容管理系統的直接編碼。 但是......這是一個很棒的工具(現在!)。 例如,帶有短代碼的 WordPress 插件非常適合 WordPress 環境。 如果你有興趣,Calendly……我可以很容易地為你構建這個!

開始使用日曆

免責聲明:我是 Calendly 的用戶,也是他們系統的附屬機構。 本文在整篇文章中都有附屬鏈接。