˗ˏˋ 黑色星期五 ˎˊ˗
超過20種架站外掛工具、主機的特殊優惠資訊,錯過只能再等一年!
今天要跟大家介紹一款由台灣開發者 Oberon Lai 開發的 WordPress 外掛 FormNotify,藉由外掛的功能整合,實現 WordPress 網站可使用 LINE 帳號登入、透過 LINE 官方帳號推播訊息、傳送通知訊息到 LINE 群組等豐富功能,開啟網站自動化工作流的無限可能。
FormNotify 同時也支援簡訊通知與郵件通知功能,目前支援的簡訊服務商有:
當網站訪客填寫由 Elementor Forms、Fluent Forms 或 Gravity Forms 所設計的表單,就能將表單相關資訊透過上述方式自動傳送、推播出去。
最令人開心的是,這個外掛是 Oberon Lai 免費提供給大家使用的工具,整合的表單與通知功能都會持續擴增,大家可以許願常用的外掛工具讓 Oberon 評估加入未來的開發工作中。
Oberon 希望可以協助使用表單外掛的站長們,將 WordPress 網站與 LINE 社群、LINE 官方帳號的工作流順暢整合在一起,提升會員、客戶對品牌的凝聚力。
FormNotify 外掛的中文名稱叫做「表單推播通知」,我們接著按照外掛提供的功能進行介紹:
【LINE Notify 結束服務公告】
無巧不成書,沒想到文章才發布不到 10 天,LINE 就在今天 (10/7) 早上公布 LINE Notify 即將於 2025/3/31 結束服務。也意味著大家只能改為使用 LINE Messaging API 較為正式的方式,以自己的 LINE 官方帳號推播發送訊息囉。免費使用 LINE Notify 的時代即將告一段落。
不過別擔心,本文介紹的功能著重在外掛提供的 LINE 帳號登入功能,以及推播功能,也就是以 LINE Messaging API 透過 LINE 官方帳號發送訊息,這都是最為實用的功能。
我們先來安裝 FormNotify 表單推播通知外掛,到 WordPress 後台外掛 > 安裝外掛搜尋 FormNotify。
點擊「立即安裝」並「啟用」外掛。
啟用外掛後就可以在後台找到表單推播通知外掛選單。
目前外掛選單中提供的功能有:
進入新增頁面之後,可以看到整個設定包含了兩大部分:
外掛會自動偵測網站中支援的表單外掛,並顯示在事件的下拉選單中 (上圖 1)。
我們網站安裝表單外掛的是 Fluent Forms,所以觸發事件就是「Fluent Form 表單送出後」,選定之後會跳出表單選項,會將 Fluent Forms 現有的表單顯示在下拉選單中 (上圖 2)。
根據選擇的表單,我們可以看到在右邊的「可帶入參數」區塊中會自動偵測並顯示表單中的欄位參數 (上圖 5),方便我們在編輯通知內文時可以自動帶入訪客填寫的表單內容。
接著,在通知方式區塊按下 [新增] 按鈕,就能自訂通知的方式了。目前有三種通知類型可以選擇:
舉例來說,當訪客填寫表單預訂會談/諮詢時段之後,我們可以使用這個功能將預訂時段資訊透過 LINE 推播、電子郵件等方式通知客戶,並留下預約紀錄。或是使用 LINE Notify 將預訂資訊傳送到團隊成員的 LINE 群組中,以利後續的服務安排。
我們以 LINE 推播的通知類型舉例 (上圖 3)。
在通知內文欄位中可以自訂通知訊息的內容 (上圖 4),使用者在「可帶入參數」區塊中點擊參數名稱,系統會自動複製參數代碼,接著將參數代碼在通知內文欄位中按照你想要的內容編排方式貼上即可。
在自訂接收推播欄位中,根據你想通知的方式:簡訊/電子郵件/LINE推播,貼上對應參數即可 (上圖 6)。
此外,需要特別注意:
從這裡我們可以看出來,要能使用 LINE 官方帳號推播訊息需要獲得完整的用戶授權與同意,如果是適合使用 LINE 推廣商品、服務的電商類型,可以仔細思考架構以 LINE 為基礎的商業模式,並運用這些自動化工具與網站進行整合,例如使用 Order Notify 外掛的進階功能可以處理電商網站中與訂單相關的各種訊息推播。
在推播紀錄頁面可以查看每一則推播/通知的紀錄,即使是推播失敗的紀錄也會保留。
以上圖為例,第二筆紀錄就是訪客尚未使用 LINE 登入前填寫表單的推播紀錄。
從設定頁面 (下圖) 中我們可以看到 FormNotify 外掛提供的設定包含了:
接著我們會著重在 FormNotify 中與 LINE 相關的服務說明,並在後續章節介紹完整的設定流程。
LINE Notify(註) 是 LINE 推出的個人通知服務,需要在 LINE 的 notify bot 網站中產生「存取權杖 Token」並選擇要接收通知的群組/聊天室。
取得權杖 Token 後,輸入 Access token 欄位並按下 [儲存設定] 按鈕。
完成設定後,只要是有選擇 LINE Notify 作為通知方式的推播設定,當訪客填寫表單送出後,系統就會自動傳送通知到指定的群組/聊天室中。
這個頁籤下包含了需要透過開發者帳號設定 LINE Channel 才能完成的 LINE Login 與 LINE Messaging 功能。
單純想要使用 LINE 帳號登入功能的站長只需要完成 LINE Login 設定即可。
若完成 LINE Messaging API 設定,即可實現:
這是與 LINE Login 相關的設定,如果要開啟 LINE 帳號登入功能,需要將「顯示於 WordPress 登入表單」設定為「是」。
在其他設定的部分,提供了:
為了方便會員、客戶能夠使用 LINE 帳號登入 WordPress 網站,並透過 LINE 官方帳號向顧客推播訊息,首先,我們需要申請 LINE Developers 帳號。
申請步驟可以直接參考 Oberon 官網上的說明,相當詳盡且圖文並茂。以下我們會點出關鍵步驟,以這些關鍵步驟為指引,搭配 Oberon 官網上的說明,大家就能順利的完成相關設定了。
請參考 Oberon 官網「LINE Login API 設定教學」中 STEP1 到 STEP4,並搭配以下步驟一到五的說明。
使用 LINE 帳號 (個人) 登入並創建 LINE 開發者帳號。
新增 Provider,也就是服務提供者。
在建立好的 Provider 下新增 Channel,選擇創建 LINE Login Channel。
接著,到 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 按鈕,接著:
請參考 Oberon 官網「LINE Messaging API 設定教學」並搭配以下步驟六到八的說明,「LINE Login API 設定教學」中 STEP5 之後的內容則是對應到以下步驟九到十一的說明。
在同一個 Provider 下新增 LINE Messaging API Channel。
記得,Messaging API Channel 建立時,一個同名的官方帳號也會同步建立,如果還沒建立官方帳號的話可以直接從這個步驟完成即可。
如果已經有經營 LINE 官方帳號,可以從 LINE 官方帳號的管理後台 → 設定 → Messaging API 頁面,點擊啟用 Messaging API 按鈕。
接著將這個官方帳號關聯到服務提供者 (開發者帳號中建立的 Provider),記得要選擇 LINE Login Channel 的同一個 Provider。
Channel 建立完成後,進入設定頁面中的 Messaging API 頁籤,在最下方找到 Channel access token,點擊 Issue 按鈕並將產生的 access token 複製起來。
進入 WordPress 後台 → 表單推播通知 → 設定 → LINE Channel 頁籤,將剛剛複製的 access token 貼到 LINE Messaging API 設定下的 Channel access token 欄位中。
現在我們的 LINE Login Channel 與 LINE Messaging API Channel 都在同一個 Provider 下,接下來的設定需要兩個 Channel 在同一個 Provider 下才能進行。
回到 LINE Login Channel → Basic settings 頁籤,在最下方找到 Add friend option,點擊 Edit 按鈕並從下拉選單中找到剛剛建立的 LINE 官方帳號 (LINE Messaging API),選取之後就完成設定了。
回到 LINE Login Channel 設定頁面的最上方,點擊 Developing 並確認要發布這個 Channel。
在 LINE Login Channel → Basic settings 頁籤,找到以下兩個資訊:
接著,進入 WordPress 後台 → 表單推播通知 → 設定 → LINE Channel 頁籤,將剛剛的兩個字串複製貼到 LINE Login 設定下的 Channel ID 與 Channel Secret 欄位後,按下 [儲存設定] 按鈕。
這樣我們就完成了 LINE 帳號登入以及透過 LINE 官方帳號推播通知的設定了。
如果只需要「純 LINE 帳號登入」功能,完成上述步驟一到五以及十、十一即可。
接著我們來看看實際的成果。
WordPress 的登入視窗會出現 LINE 登入的按鈕。
點擊 LINE 登入後會跳出 LINE 的登入視窗,可以使用手機掃描行動條碼的方式登入,相當方便。
點選「透過行動條碼登入」後,會跳出行動條碼。
因為有啟用二階段驗證,掃碼之後會跳出驗證碼需要在手機的 LINE 上面確認身分。
使用手機登入毋須上述的驗證程序,因為已經是用有登入 LINE 帳號的手機來進行登入了。
接著,完成存取許可就登入網站囉!
如果有完成「加入 LINE 官方帳號」的相關設定,接著會跳出將官方帳號加入好友的提醒視窗。
訪客在網站中的聯絡表單中填寫資料並送出表單。
表單送出後,系統會立即將我們在推播設定中自訂的通知訊息內容,透過官方帳號推播給訪客。
LINE Notify 的設定相對簡單,只要跟著官網的步驟就能快速完成設定。
完成設定後,將 LINE Notify 官方網站中取得的 access token 複製儲存好。
接著,進入 WordPress 後台 → 表單推播通知 → 設定 → LINE Notify 頁籤,將剛剛的 access token 複製貼到 LINE Notify 設定下的 Access token 欄位後,按下儲存設定按鈕。
FormNotify 表單推播通知外掛本身相當輕巧且實用,為了完成相關設定,許多步驟都需要在 LINE 開發者、LINE Notify 官方網頁上完成。
透過這篇教學,希望大家能輕鬆地在自己的 WordPress 網站上完成這些功能的設定:
如果大家有更進階的需求,例如:
建議大家可以使用 Oberon 開發的另一款外掛 OrderNotify,相當超值且功能豐富,相信只要是 LINE 使用者普及的市場如日本、台灣、泰國、印尼,都能夠從 OrderNotify 提供的功能獲益許多。
使用我們的專屬優惠碼「quantsnote10」還可以獲得 10% 的折扣!
如果對外掛的安裝與使用有任何問題,都可以直接到 Oberon 官網上提出問題。
如果希望由我來為您服務,歡迎填寫聯絡表單與我直接討論,或是加入我們的臉書社團、Discord 社團一起討論唷!
感謝大大分享這麼詳盡的教學!稍早把 FormNotify 上架到官方目錄了,提供你參考!https://wordpress.org/plugins/form-notify/
謝謝 Oberon 提供這麼好用的工具給大家 ^_^
我稍後來把連結更新到文章中