在WordPress加上瀏覽器即時訂閱與推播通知

1 Star2 Stars3 Stars4 Stars5 Stars (1已評分, 平均: 5.00 out of 5)
Loading...

如何在Chrome,Firefox,Safari瀏覽器也能讓網頁自動像APP那樣子推播訊息呢?無論網友是否有正在開啟你的網站,只要他有訂閱後,推播訊息框會自動出現在他電腦桌面的右下角喔!

若是你有發表新文章、新產品、新促銷優惠都能用這樣的推播,以獲得網友或顧客回流,很棒吧!

本站以Wordpress為例,並使用OneSignal WordPress 免費外掛+教學。

  • 外掛名稱: OneSignal WordPress
  • 外掛介面: 英文 (別怕,按右鍵翻成中文就好了啦)
  • 外掛載點: 點此,或wp後台直接搜即可。

前言:

本篇是針對「wordpress」網站來寫,當然非wordpress也適用,只是您需上網搜一下非wordpress網站的設定方式。

本篇是針對網站有「SSL」安全連線機制的網址(即https),若是一般無SSL(即http)應也能用,只是並未特別試驗。
(若您的網路尚未設好SSL,請看此篇《【WordPress】網站加入SSL並全站啟動且套用 》)

教學開始:

1、安裝外掛【OneSignal Push Notifications】並啟用→至設定畫面

2、點擊「configuration]

如下圖,發現需要App ID 與 REST API Key,所以我們必須先申請一個。

3、至「OneSignal」官網

點此: https://onesignal.com/ ,如下圖,可以用Google或FB帳號直接一鍵註冊。

如果有跳出詢問,就按「I Agree」即可。

4、創立一個專案

圖中的app不是真的手機上的那個app,它代表是一個程式名稱。

4、設定針對chrome與Mozilla瀏覽器的設定

(若要針對Apple Safari設定,請看文末)

5、輸入你的wordpress網站的網址

6、複製App ID 與 REST API Key

7、把畫面回到WP後台並點到下圖中開始設定:

7.1 回第2步並貼上ID與KEY,在此我有選SLL(https)

 

貼上ID與key後持續把畫面往下拉,下面還有地方要設定。

(如果對英文不懂,請在chrome瀏覽器並按右鍵翻成中文即可)

7.2 剩下的設定如下圖

以下是我的設定,你可以再自己做變化。

▼請注意我藍色有勾的地方

8、測試:

如何推播?

1、自動推播:

  • 發表新文章時,一發佈就會自動推播了喔。
  • 另若有更新舊文章時通知大家,可以選擇勾選推播(Send notification on post publish),一更新文章時也會自動推播了。

▼發佈文章會有訂閱的網友會出現下圖的推播介面

2、手動推播:

2.1 登入 OneSignal Push Notifications 後台

網址: https://onesignal.com ,不是登入wordpress後台喔!

2.2 輸入推播訊息

PS:下圖中有寫這是英文介面,不用理它直接填中文即可,若你的訂閱者真有不同語系的,你再從下方新增不同國家的語系,但必須把你的文案翻成該語系的文字後再填入。

2.3 發送前設定,若無直接Next

2.4 選發送時間

可立即、可排程、亦可選用戶時區。

2.5 發送成功,訂閱者已收到

 


以上的教學是針對「chrome與Mozilla瀏覽器」,若要針對「Apple Safari」設定,請看下面設定:

1、點擊「Configure」

2、建立網站名稱與網址

3、複製Web ID

4、貼上Safari Web ID

剩下的都一樣,照最上方的流程即可。


補充:

如何查看訂閱人數,下圖:

這篇測試+寫稿,花了我四小時吧!心血結晶,請勿盜文,分享時請加上網址,感謝您!

如果您喜歡這篇文章,請幫我們按個讚!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

d
c