技術文件目前產品線:Fluent Booking 預約

FluentBooking 串接 Google Calendar/Meet 完整教學

更新日期
閱讀時間
約 10 分鐘
來源狀態
generated-draft

本篇說明

本篇說明如何在 FluentBooking 外掛中串接 Google Calendar 與 Google Meet,共有兩種方式:使用官方預設已驗證的 App,或自行在 Google Cloud Console 建立專屬 App。串接後可讓預約事件自動同步到 Google Calendar,並可啟用 Google Meet 視訊連結。

適合誰使用

使用 FluentBooking 外掛管理預約系統,需要將預約事件同步到 Google Calendar 或使用 Google Meet 的 WordPress 網站管理者

開始前準備

  • 需要有可登入的 Google 帳號(host 帳號),才能連接 Remote Calendar
  • 若選擇自建 App 方式,需要能存取 Google Cloud Console 並建立專案

教學內容

方式一:使用預設已驗證的 App(Default Verified App)

FluentBooking 提供官方已驗證的 App,是與其他 WordPress 預約外掛不同的內建功能

官方建議的快取時間為 5 分鐘,但可自行設定其他時長

  1. 到後台 Settings 切換至 Google Calendar/Meet 分頁
  2. 選擇 Default Verified App 並設定快取時間

    fluentbooking google calendar integration
    官方文件介面截圖:fluentbooking google calendar integration

  3. Calendars 區塊選擇要同步預約事件的 host
  4. 進入該 host 的 Host Settings > Remote Calendar,點選 Connect with Google Calendar/Meet
  5. 加入該 host 的 Google 帳號以同步 FluentBooking 事件

    fluentbooking google calendar integration
    官方文件介面截圖:fluentbooking google calendar integration

  6. 授權 FluentBooking 所需權限後點選 Continue

    fluentbooking google calendar permissions
    官方文件介面截圖:fluentbooking google calendar permissions

    conflict checking
    官方文件介面截圖:conflict checking

方式二:使用自建 App(Own App,官方不建議)

若不使用 Google Workspace 而選擇 External 使用者類型,App 可能在一到兩週內導致與 FluentBooking 的整合失效

  1. 前往 Google Cloud Console 建立新專案或選擇既有專案

    Create or Select Project 官方介面截圖
    官方文件介面截圖:Create or Select Project 官方介面截圖

    Create or Select Project 官方介面截圖
    官方文件介面截圖:Create or Select Project 官方介面截圖

    Create or Select Project 官方介面截圖
    官方文件介面截圖:Create or Select Project 官方介面截圖

    Create or Select Project 官方介面截圖
    官方文件介面截圖:Create or Select Project 官方介面截圖

  2. 進入 APIs & Services,選擇 OAuth consent screen

    Configuring 0Auth Consent 官方介面截圖
    官方文件介面截圖:Configuring 0Auth Consent 官方介面截圖

  3. 選擇 Internal 使用者類型並點選 Create(若非 Google Workspace 則選 External

    Configuring 0Auth Consent 官方介面截圖
    官方文件介面截圖:Configuring 0Auth Consent 官方介面截圖

  4. 填寫 App name、User Support Email、Authorized domain、Developer Contact,之後三步驟可直接 Save and Continue

    Configuring 0Auth Consent 官方介面截圖
    官方文件介面截圖:Configuring 0Auth Consent 官方介面截圖

  5. 完成後點選 Publish App 發布應用程式

    Configuring 0Auth Consent 官方介面截圖
    官方文件介面截圖:Configuring 0Auth Consent 官方介面截圖

  6. Library 搜尋並啟用 Google Calendar API

    Enabling Google Calendar API 官方介面截圖
    官方文件介面截圖:Enabling Google Calendar API 官方介面截圖

    Enabling Google Calendar API 官方介面截圖
    官方文件介面截圖:Enabling Google Calendar API 官方介面截圖

  7. 到專案中選擇 Create Credentials > OAuth client ID,並建立 Web application

    Create Credentials 官方介面截圖
    官方文件介面截圖:Create Credentials 官方介面截圖

    Create Credentials 官方介面截圖
    官方文件介面截圖:Create Credentials 官方介面截圖

  8. 到 FluentBooking 的 Settings > Google Calendar 複製 Authorized redirect URL,貼到 Google Cloud Console 的對應欄位後點 Create

    Create Credentials 官方介面截圖
    官方文件介面截圖:Create Credentials 官方介面截圖

    Create Credentials 官方介面截圖
    官方文件介面截圖:Create Credentials 官方介面截圖

  9. 從彈出視窗複製 Client IDClient Secret

    Create Credentials 官方介面截圖
    官方文件介面截圖:Create Credentials 官方介面截圖

設定管理員與 Host 的 Google Calendar

必須先在 FluentBooking 新增管理員的 Google Calendar/Meet 帳號才能使用整合功能

每個 host 新增 Google 帳號時不需重新設定 OAuth Credentials,且 host 可新增多個 Google 帳號

  1. Settings > Google Calendar 貼上 Client ID 與 Client Secret,點選 Save Google API Configuration 按鈕

    Configuring Admin Google Calendar 官方介面截圖
    官方文件介面截圖:Configuring Admin Google Calendar 官方介面截圖

  2. Calenders > Host Settings > Remote Calendars 點選 Connect with Google Calendar/Meet

    Configuring Host Google Calendar 官方介面截圖
    官方文件介面截圖:Configuring Host Google Calendar 官方介面截圖

  3. 登入或選擇要同步的 Google 帳號

    Configuring Host Google Calendar 官方介面截圖
    官方文件介面截圖:Configuring Host Google Calendar 官方介面截圖

  4. 若出現「Google hasn’t verified this app」警告,點選 Advanced

    Configuring Host Google Calendar 官方介面截圖
    官方文件介面截圖:Configuring Host Google Calendar 官方介面截圖

  5. 點選「Go to {yourWebsite.com}」繼續下一步

    Configuring Host Google Calendar 官方介面截圖
    官方文件介面截圖:Configuring Host Google Calendar 官方介面截圖

  6. 勾選所有核取方塊後點選 Continue 完成授權

    Configuring Host Google Calendar 官方介面截圖
    官方文件介面截圖:Configuring Host Google Calendar 官方介面截圖

  7. 選取 Remote Calendar 並啟用它

    Configuring Host Google Calendar 官方介面截圖
    官方文件介面截圖:Configuring Host Google Calendar 官方介面截圖

  8. 完成後開啟 Google Calendar,確認 FluentBooking 的預約已同步為日曆事件,並核對活動時間與受邀者資料

    Configuring Host Google Calendar 官方介面截圖
    官方文件介面截圖:Configuring Host Google Calendar 官方介面截圖

介面名稱對照

  • Default Verified App:FluentBooking 官方提供的預先驗證應用程式,可直接用來串接 Google Calendar,無需自行申請憑證
  • Remote Calendar:host 設定中用來連接與管理外部 Google 日曆同步的區塊
  • OAuth consent screen:在 Google Cloud Console 中設定應用程式對外授權畫面的頁面
  • Client ID / Client Secret:自建 Google App 後取得的驗證憑證,需貼入 FluentBooking 設定中完成串接

注意事項

注意

若使用自建 App 且選擇 External 使用者類型,整合可能在一到兩週內失效

注意

必須先設定管理員的 Google Calendar 帳號,整合功能才能運作

常見問題

串接 Google Calendar 後可以做什麼?

完成串接後可以選擇要同步的日曆,並啟用衝突檢查(conflict checking)功能,避免同一時段被重複預約。

每個 host 新增自己的 Google 帳號時,需要重新設定 OAuth 憑證嗎?

不需要,因為管理員已經先連接過驗證用的 App,host 只需個別連接自己的 Google 帳號即可,且可新增多個帳號。

官方來源

還是卡住了?

先把問題問清楚,通常比直接開工單更快。複製下面的結構,補上你的情況後送出。

用 AI 先釐清問題

/ai 我正在閱讀「FluentBooking 串接 Google Calendar/Meet 完整教學」,目前卡在:

我已嘗試:

我看到的畫面/錯誤訊息:

請用一步一步的方式告訴我下一步。

需要我們實際進入網站調整設定、修改佈景主題或處理資料時,再建立 /task 工單。