返回支援 內容和媒體 區塊 Calendly 區塊

Calendly 區塊

Calendly 是一款簡單、有效率的熱門排程工具,如果你希望網站訪客直接在你的網站日曆上預約虛擬和實體會議的時間,這個工具非常實用。Calendly 與你的個人日曆整合,可以避免錯過會議或重複預約,

Calendly 提供免費和付費版本,你可以視所需功能在網站上使用任一版本。

此功能適用於 WordPress.com Explorer、Creator 和 Entrepreneur 方案以及舊有專業版方案的網站。若是採用免費和 Starter 方案的網站,只要升級方案,即可存取此功能。

開始使用之前

你需要擁有 Calendly 帳號,才能使用 Calendly 區塊。如果沒有帳號,請在此處註冊

新增 Calendly 區塊

你可以在 WordPress.com 網站的任何頁面或文章中新增 Calendly 區塊。按一下 + 區塊插入工具圖示,然後搜尋 Calendly。

或者在新的一行輸入 /calendly,然後按 Enter。

內嵌 Calendly 連結

新增區塊後,會看到 Calendly 連結方塊。以下是取得連結的方法:

  1. 登入 Calendly 帳號
  2. 按一下右上角的藍色按鈕,前往「我的帳號」。
  3. 在開啟的活動頁面上,在你想嵌入網站的活動中按一下左下方的「複製連結」按鈕:
  1. 回到你的網站,將連結貼入 Calendly 區塊,新增方式如上所示。

自訂 Calendly 區塊

你可以在兩個位置,自訂 Calendly 區塊的每項設定:

請務必注意,視你想要自訂的內容而定,你必須在 Calendly 帳號或網站的區塊設定中進行變更。

變更 Calendly 內嵌類型

Calendly 可以在文章或頁面上顯示完整的日曆、按鈕或彈出視窗。

  1. 當作內嵌日曆或按鈕

內嵌日曆按鈕兩種模式可供切換,位置就在頂端區塊情境選單中的樣式選項:

或在右側面板中:

2. 當作浮動按鈕

本節指引適用於 WordPress.com Creator 或 Entrepreneur 方案,以及舊有專業版方案的網站。若是採用免費、Starter 和 Explorer 方案的網站,只要升級方案,即可存取此功能。

  1. 前往 Calendly 帳號
  2. 按一下藍色的「分享」按鈕
  3. 按一下「新增至網站」分頁
  4. 選取「小工具彈出視窗」,然後按一下「繼續
  5. 按一下「複製程式碼」按鈕
  6. 前往「外觀」→「小工具」,選取任一個小工具區域
  7. 插入自訂的 HTML 區塊
  8. 將程式碼貼入區塊,然後按一下右上角的「更新」。

這會在所有頁面上顯示浮動按鈕。如果只希望在指定頁面上顯示浮動按鈕,可以在頁面或文章底端新增浮動按鈕,方法如下:

  1. 按一下文章或頁面右上角的 3 個點
  2. 選取「程式碼編輯器
  3. 在文章區域中,向下捲到底
  4. 在文章或頁面的最後 (在現有程式碼的最後一行之後) 新增 Calendly 的程式碼片段
  5. 返回 3 個點,然後重新選取「視覺化編輯器
  6. 發表更新頁面。

浮動按鈕應出現在畫面左下角,並應隨捲動操作移動。

調整 Calendly 區塊在頁面上的位置

若要在文章或頁面中上下移動 Calendly 區塊,可以使用區塊頂端情境選單中的箭號:

若要對齊 Calendly 區塊:新增 Calendly 內嵌區塊時 (實際上是內嵌在頁面中),無論是顯示完整日曆還是按鈕,都能在頁面或區塊所在容器中將它們對齊。

注意:浮動小工具的位置無法透過設定變更。

變更 Calendly 內嵌的外觀和風格

若要變更 Calendly 內嵌的外觀和風格 (樣式、顏色、形狀、大小),包括內嵌、按鈕或彈出視窗:

  1. 前往 Calendly 帳號,選取要編輯的日曆
  2. 按一下「分享」,然後選取「新增到網站」→「內嵌」→「繼續
  3. 你可以在左側編輯背景顏色、文字顏色、按鈕和連結顏色
  4. 重新複製程式碼,並如上所示嵌入程式碼

你也能在右側面板中僅變更 Calendly 按鈕的顏色。並使用以下選項操作:

  • 樣式:選擇按鈕樣式:實心或空心:

  • 顏色:選擇按鈕背景及文字的顏色。
  • 使用區塊頂端的情境選單,可以進一步自訂字型 (粗體或斜體)。
  • 如果想在按鈕上混用兩種顏色 (如下圖所示),可以使用「漸層」選項:
漸層按鈕 Calendly 區塊 WordPress.com
  • 形狀:使用邊框半徑控制項,可以變更按鈕的形狀:
  • 大小:選擇按鈕寬度設定中的選項,可以變更按鈕的大小。
Copied to clipboard!