˗ˏˋ 黑色星期五 ˎˊ˗

超過20種架站外掛工具、主機的特殊優惠資訊,錯過只能再等一年!

FormNotify 超實用 LINE 帳號登入 Login、訊息推播 Notify – WordPress 免費外掛

今天要跟大家介紹一款由台灣開發者 Oberon Lai 開發的 WordPress 外掛 FormNotify,藉由外掛的功能整合,實現 WordPress 網站可使用 LINE 帳號登入、透過 LINE 官方帳號推播訊息、傳送通知訊息到 LINE 群組等豐富功能,開啟網站自動化工作流的無限可能。

FormNotify 同時也支援簡訊通知與郵件通知功能,目前支援的簡訊服務商有:

  • 三竹簡訊
  • Every8d
  • easyGo

當網站訪客填寫由 Elementor Forms、Fluent Forms 或 Gravity Forms 所設計的表單,就能將表單相關資訊透過上述方式自動傳送、推播出去。

最令人開心的是,這個外掛是 Oberon Lai 免費提供給大家使用的工具,整合的表單與通知功能都會持續擴增,大家可以許願常用的外掛工具讓 Oberon 評估加入未來的開發工作中。

Oberon 希望可以協助使用表單外掛的站長們,將 WordPress 網站與 LINE 社群、LINE 官方帳號的工作流順暢整合在一起,提升會員、客戶對品牌的凝聚力。

FormNotify 外掛的中文名稱叫做「表單推播通知」,我們接著按照外掛提供的功能進行介紹:

  • LINE 帳號登入
  • LINE 官方帳號推播通知訊息
  • 傳送通知訊息到 LINE 群組/聊天室
  • 電子郵件通知
  • 簡訊通知

LINE Notify 結束服務公告

無巧不成書,沒想到文章才發布不到 10 天,LINE 就在今天 (10/7) 早上公布 LINE Notify 即將於 2025/3/31 結束服務。也意味著大家只能改為使用 LINE Messaging API 較為正式的方式,以自己的 LINE 官方帳號推播發送訊息囉。免費使用 LINE Notify 的時代即將告一段落。

不過別擔心,本文介紹的功能著重在外掛提供的 LINE 帳號登入功能,以及推播功能,也就是以 LINE Messaging API 透過 LINE 官方帳號發送訊息,這都是最為實用的功能。

安裝 FormNotify 表單推播通知外掛

我們先來安裝 FormNotify 表單推播通知外掛,到 WordPress 後台外掛 > 安裝外掛搜尋 FormNotify。

FormNotify-Plugin

點擊「立即安裝」並「啟用」外掛。

啟用外掛後就可以在後台找到表單推播通知外掛選單。

Form-notify-menu

目前外掛選單中提供的功能有:

  • 所有 – 所有的推播設定
  • 新增 – 新增推播設定
  • 分類 – 推播設定的分類,當推播/通知數量多的時候可以方便分類管理
  • 推播紀錄 – 每一則推播的訊息都有紀錄可以查看
  • 設定 – 使用 FormNotify 第一步需要完成的設定就在這裡

新增推播設定

進入新增頁面之後,可以看到整個設定包含了兩大部分:

  1. 觸發通知
  2. 通知方式
formnotify-notification-fluentforms

觸發通知

外掛會自動偵測網站中支援的表單外掛,並顯示在事件的下拉選單中 (上圖 1)。

我們網站安裝表單外掛的是 Fluent Forms,所以觸發事件就是「Fluent Form 表單送出後」,選定之後會跳出表單選項,會將 Fluent Forms 現有的表單顯示在下拉選單中 (上圖 2)。

根據選擇的表單,我們可以看到在右邊的「可帶入參數」區塊中會自動偵測並顯示表單中的欄位參數 (上圖 5),方便我們在編輯通知內文時可以自動帶入訪客填寫的表單內容。

通知方式

接著,在通知方式區塊按下 [新增] 按鈕,就能自訂通知的方式了。目前有三種通知類型可以選擇:

  • LINE Notify(註)
  • LINE 推播
  • 電子郵件

舉例來說,當訪客填寫表單預訂會談/諮詢時段之後,我們可以使用這個功能將預訂時段資訊透過 LINE 推播、電子郵件等方式通知客戶,並留下預約紀錄。或是使用 LINE Notify 將預訂資訊傳送到團隊成員的 LINE 群組中,以利後續的服務安排。

我們以 LINE 推播的通知類型舉例 (上圖 3)。

通知內文欄位中可以自訂通知訊息的內容 (上圖 4),使用者在「可帶入參數」區塊中點擊參數名稱,系統會自動複製參數代碼,接著將參數代碼在通知內文欄位中按照你想要的內容編排方式貼上即可。

自訂接收推播欄位中,根據你想通知的方式:簡訊/電子郵件/LINE推播,貼上對應參數即可 (上圖 6)。

此外,需要特別注意:

  • 這些參數記得要放在表單中讓訪客填寫時提供
  • 成功使用 LINE 推播的前提則是:
    • 訪客先前已使用 LINE 帳號登入網站
    • 訪客先前已加 LINE 官方帳號為好友
    • 訪客在表單中填寫的 Email = 訪客使用 LINE 登入時使用的 Email = 訪客 LINE 帳號綁定的 Email

從這裡我們可以看出來,要能使用 LINE 官方帳號推播訊息需要獲得完整的用戶授權與同意,如果是適合使用 LINE 推廣商品、服務的電商類型,可以仔細思考架構以 LINE 為基礎的商業模式,並運用這些自動化工具與網站進行整合,例如使用 Order Notify 外掛的進階功能可以處理電商網站中與訂單相關的各種訊息推播。

推播紀錄

在推播紀錄頁面可以查看每一則推播/通知的紀錄,即使是推播失敗的紀錄也會保留。

formnotify-all-records

以上圖為例,第二筆紀錄就是訪客尚未使用 LINE 登入前填寫表單的推播紀錄。

設定

從設定頁面 (下圖) 中我們可以看到 FormNotify 外掛提供的設定包含了:

  • LINE Notify(註)
  • LINE Channel
  • LINE Login 按鈕
  • Every8d 簡訊服務
  • 三竹簡訊服務
  • easyGo 簡訊服務

接著我們會著重在 FormNotify 中與 LINE 相關的服務說明,並在後續章節介紹完整的設定流程。

LINE Notify

LINE Notify(註) 是 LINE 推出的個人通知服務,需要在 LINE 的 notify bot 網站中產生「存取權杖 Token」並選擇要接收通知的群組/聊天室。

取得權杖 Token 後,輸入 Access token 欄位並按下 [儲存設定] 按鈕。

formnotify-line-notify-setting

完成設定後,只要是有選擇 LINE Notify 作為通知方式的推播設定,當訪客填寫表單送出後,系統就會自動傳送通知到指定的群組/聊天室中。

LINE Channel

這個頁籤下包含了需要透過開發者帳號設定 LINE Channel 才能完成的 LINE Login 與 LINE Messaging 功能。

formnotify-line-channel-settings

單純想要使用 LINE 帳號登入功能的站長只需要完成 LINE Login 設定即可。

若完成 LINE Messaging API 設定,即可實現:

  • 使用 LINE Login 後,顯示新增官方帳號為好友、加入官方帳號的提醒視窗
  • 可透過 LINE 官方帳號推播通知訊息

LINE Login 按鈕

這是與 LINE Login 相關的設定,如果要開啟 LINE 帳號登入功能,需要將「顯示於 WordPress 登入表單」設定為「是」。

formnotify-line-login-settings

其他設定的部分,提供了:

  • 登入後重新導向網址
    相當實用的功能,能夠自訂訪客登入後的到達網頁,可以根據業務目的與策略設定。
  • 使用者角色
    使用 LINE 帳號登入並創建 WordPress 帳號後所給予的預設使用者角色,可以根據業務目的設定。
  • 未取得電子郵件
    並不是所有 LINE 的使用者都有綁定電子郵件,未綁定的話在使用 LINE 登入時系統會無法取得電子郵件。
    因此,FormNotify 外掛提供了兩個選擇「強制使用者輸入電子郵件」以及「使用 LINE user id 自動產生電子郵件」。
    使用前者選項會在登入時要求訪客輸入電子郵件以利 WordPress 網站創建帳號,使用後者選項則會以使用者的 LINE user id 自動產生類似 [email protected] 的電子郵件地址來進行帳號註冊。
    不建議使用第二個選項,因為客戶未來會收不到相關的通知郵件。

LINE 帳號登入 & LINE 官方帳號推播

為了方便會員、客戶能夠使用 LINE 帳號登入 WordPress 網站,並透過 LINE 官方帳號向顧客推播訊息,首先,我們需要申請 LINE Developers 帳號。

申請步驟可以直接參考 Oberon 官網上的說明,相當詳盡且圖文並茂。以下我們會點出關鍵步驟,以這些關鍵步驟為指引,搭配 Oberon 官網上的說明,大家就能順利的完成相關設定了。

LINE 帳號登入功能

請參考 Oberon 官網「LINE Login API 設定教學」中 STEP1 到 STEP4,並搭配以下步驟一到五的說明。

一、創建 LINE 開發者帳號

使用 LINE 帳號 (個人) 登入並創建 LINE 開發者帳號。

二、新增 Provider

新增 Provider,也就是服務提供者

三、新增 LINE Login Channel

在建立好的 Provider 下新增 Channel,選擇創建 LINE Login Channel。

  • 提供服務的地區選擇台灣 (或選擇你的服務地區,如:日本、泰國或印尼)
  • 應用類型 App types 選擇 Web app
  • 二階段驗證選擇啟用 – 當訪客使用 LINE 帳號登入時,會傳送驗證碼確認身分,若透過此方式登入,瀏覽器中的信任紀錄會維持一年不會再次要求確認驗證碼,對顧客來說方便許多。
line-developers-create-LINE-login-3

四、設定 Callback URL (外掛設定)

接著,到 WordPress 後台 → 表單推播通知 → 設定 → LINE Channel 頁籤,將 LINE Login 設定下的回呼網址複製儲存好。

回到剛剛建立的 LINE Login Channel 設定頁面,進入 LINE Login 頁籤,將回呼網址貼上到 Callback URL 欄位中。

五、取得訪客電子郵件的權限

因為 WordPress 網站在註冊帳號的過程中電子郵件是必要資訊,而電子郵件在預設的設定下 LINE 是不會提供的,所以需要完成 LINE Login Channel → Basic settings → OpenID Connect 的權限申請,才能在登入的過程中取得訪客 LINE 帳號中綁定的電子郵件。

在 OpenID Connect 的選項中點擊 Apply 按鈕,接著:

  • 同意 LINE 官方的要求與規範
  • 提供網站中需要訪客提供電子郵件時,要求訪客確認隱私權政策的畫面截圖
line-developers-LINE-login-open-id-submit

LINE 官方帳號推播 & 加入 LINE 官方帳號

請參考 Oberon 官網「LINE Messaging API 設定教學」並搭配以下步驟六到八的說明,「LINE Login API 設定教學」中 STEP5 之後的內容則是對應到以下步驟九到十一的說明。

六、新增 LINE Messaging API Channel (官方帳號)

尚未建立 LINE 官方帳號

在同一個 Provider 下新增 LINE Messaging API Channel。

記得,Messaging API Channel 建立時,一個同名的官方帳號也會同步建立,如果還沒建立官方帳號的話可以直接從這個步驟完成即可。

line-developers-messaging-api-create-oa1
既有 LINE 官方帳號

如果已經有經營 LINE 官方帳號,可以從 LINE 官方帳號的管理後台 → 設定 → Messaging API 頁面,點擊啟用 Messaging API 按鈕。

line-oa-settings-messaging-api-1

接著將這個官方帳號關聯到服務提供者 (開發者帳號中建立的 Provider),記得要選擇 LINE Login Channel 的同一個 Provider。

line-oa-settings-messaging-api-2

七、取得 Channel Access Token

Channel 建立完成後,進入設定頁面中的 Messaging API 頁籤,在最下方找到 Channel access token,點擊 Issue 按鈕並將產生的 access token 複製起來。

八、設定 Channel Access Token (外掛設定)

進入 WordPress 後台 → 表單推播通知 → 設定 → LINE Channel 頁籤,將剛剛複製的 access token 貼到 LINE Messaging API 設定下的 Channel access token 欄位中。

九、LINE 官方帳號綁定

現在我們的 LINE Login Channel 與 LINE Messaging API Channel 都在同一個 Provider 下,接下來的設定需要兩個 Channel 在同一個 Provider 下才能進行。

回到 LINE Login Channel → Basic settings 頁籤,在最下方找到 Add friend option,點擊 Edit 按鈕並從下拉選單中找到剛剛建立的 LINE 官方帳號 (LINE Messaging API),選取之後就完成設定了。

line-developers-line-login-linked-oa2

十、發布 LINE Login Channel

回到 LINE Login Channel 設定頁面的最上方,點擊 Developing 並確認要發布這個 Channel。

line-developers-line-login-publish

十一、完成 LINE Login 設定 (外掛設定)

在 LINE Login Channel → Basic settings 頁籤,找到以下兩個資訊:

  • Basic information → Channel ID
  • Basic information → Channel secret

接著,進入 WordPress 後台 → 表單推播通知 → 設定 → LINE Channel 頁籤,將剛剛的兩個字串複製貼到 LINE Login 設定下的 Channel ID 與 Channel Secret 欄位後,按下 [儲存設定] 按鈕。

這樣我們就完成了 LINE 帳號登入以及透過 LINE 官方帳號推播通知的設定了。

如果只需要「純 LINE 帳號登入」功能,完成上述步驟一到五以及十、十一即可。

LINE 帳號登入範例

接著我們來看看實際的成果。

登入 – 電腦版

WordPress 的登入視窗會出現 LINE 登入的按鈕。

formnotify-line-login-wp-modal

點擊 LINE 登入後會跳出 LINE 的登入視窗,可以使用手機掃描行動條碼的方式登入,相當方便。

formnotify-line-login-wp-step1

點選「透過行動條碼登入」後,會跳出行動條碼。

formnotify-line-login-wp-step2

因為有啟用二階段驗證,掃碼之後會跳出驗證碼需要在手機的 LINE 上面確認身分。

formnotify-line-login-wp-step3

登入 – 手機版

使用手機登入毋須上述的驗證程序,因為已經是用有登入 LINE 帳號的手機來進行登入了。

formnotify-line-login-via-phone

存取許可

接著,完成存取許可就登入網站囉!

formnotify-line-login-wp-step4

加入官方帳號範例

如果有完成「加入 LINE 官方帳號」的相關設定,接著會跳出將官方帳號加入好友的提醒視窗。

formnotify-line-login-wp-step5

LINE 官方帳號推播範例

訪客在網站中的聯絡表單中填寫資料並送出表單。

formnotify-fluentforms-filled

表單送出後,系統會立即將我們在推播設定中自訂的通知訊息內容,透過官方帳號推播給訪客。

formnotify-line-message-to-user

LINE Notify

LINE Notify 的設定相對簡單,只要跟著官網的步驟就能快速完成設定。

完成設定後,將 LINE Notify 官方網站中取得的 access token 複製儲存好。

接著,進入 WordPress 後台 → 表單推播通知 → 設定 → LINE Notify 頁籤,將剛剛的 access token 複製貼到 LINE Notify 設定下的 Access token 欄位後,按下儲存設定按鈕。

結語

FormNotify 表單推播通知外掛本身相當輕巧且實用,為了完成相關設定,許多步驟都需要在 LINE 開發者、LINE Notify 官方網頁上完成。

透過這篇教學,希望大家能輕鬆地在自己的 WordPress 網站上完成這些功能的設定:

  • LINE 帳號登入
  • LINE 官方帳號推播通知訊息
  • 傳送通知訊息到 LINE 群組/聊天室
  • 電子郵件通知

如果大家有更進階的需求,例如:

  • 需要透過多個 LINE 官方帳號推播通知訊息
  • 需要傳送通知訊息到多個 LINE 群組/聊天室
  • 需要傳送 WooCommerce 電商網站中與訂單相關的各種訊息推播
  • 需要預約排程推播

建議大家可以使用 Oberon 開發的另一款外掛 OrderNotify,相當超值且功能豐富,相信只要是 LINE 使用者普及的市場如日本、台灣、泰國、印尼,都能夠從 OrderNotify 提供的功能獲益許多。

使用我們的專屬優惠碼「quantsnote10」還可以獲得 10% 的折扣!

如果對外掛的安裝與使用有任何問題,都可以直接到 Oberon 官網上提出問題。

如果希望由我來為您服務,歡迎填寫聯絡表單與我直接討論,或是加入我們的臉書社團Discord 社團一起討論唷!

2 則留言

  1. 感謝大大分享這麼詳盡的教學!稍早把 FormNotify 上架到官方目錄了,提供你參考!https://wordpress.org/plugins/form-notify/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *