Làm thế nào để thêm thông báo Web Push vào trang WordPress của bạn

Bạn đã nhận thấy các thông báo đẩy web được sử dụng trên các trang web phổ biến như Facebook? Gần đây, một trong những độc giả của chúng tôi đã hỏi liệu có thể thêm thông báo đẩy web trong WordPress hay không. Tất nhiên là thế rồi. Trong bài này, chúng tôi sẽ chỉ cho bạn cách thêm thông báo web push vào trang WordPress của bạn.

Thêm thông báo đẩy web vào một trang web WordPress

Tại sao Thêm thông báo Web Push vào trang WordPress của bạn?

Thông báo đẩy Web là các thông báo có thể nhấp được hiển thị trên Desktop của người dùng. Chúng có thể được hiển thị ngay cả khi trình duyệt của người dùng không mở.

Thông báo đẩy Web hiển thị trên Máy tính để bàn với trình duyệt web của Google Chrome, Firefox và Safari

Bên cạnh máy tính để bàn, thông báo đẩy Web cũng hoạt động trên trình duyệt trên điện thoại di động.

Các trang web nổi tiếng bao gồm Facebook, Pinterest, LinkedIn và nhiều trang khác đang sử dụng thông báo đẩy web. Nó chứng tỏ được hấp dẫn hơn SMS, tiếp thị qua email và các phương tiện truyền thông xã hội khác. Theo một cuộc khảo sát, thông báo đẩy có tỷ lệ mở 50% trên thiết bị di động.

Điều này có nghĩa là nhiều đối tượng tham gia cho trang web WordPress của bạn và tăng đáng kể số lượt xem trang tổng thể và khách truy cập quay lại.

Có nói rằng, chúng ta hãy xem làm thế nào để thêm các thông báo đẩy web vào một trang web WordPress.

Thiết lập Web Push Thông báo trong WordPress với OneSignal

OneSignal là dịch vụ miễn phí cho phép bạn thêm thông báo đẩy vào bất kỳ trang web, web hoặc ứng dụng trên thiết bị di động nào.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin OneSignal. Để biết thêm chi tiết

Khi kích hoạt, plugin sẽ thêm một mục trình đơn mới có nhãn OneSignal trong thanh quản trị WordPress của bạn. Nhấp vào nó sẽ đưa bạn đến trang cài đặt plugin.

Cài đặt plugin OneSignal WordPress

Trang cài đặt được chia thành các tab Thiết lập và Cấu hình. Tab thiết lập thực sự là tài liệu hướng dẫn chi tiết về cách thiết lập các thông báo OneSignal push trong WordPress. Nó có các bước tương tự mà chúng tôi sẽ giới thiệu cho bạn trong hướng dẫn này.

Để cài đặt OneSignal, bạn cần phải thêm các khóa API và ID ứng dụng khác vào cài đặt plugin.

Băt đâu nao.

Bước 1: Tạo Google Keys

Đầu tiên bạn cần truy cập vào trang web của Google Services Wizard.

Tạo ứng dụng dịch vụ của Google

Đơn giản chỉ cần cung cấp tên cho ứng dụng của bạn và thêm tên gói Android. OneSignal không sử dụng tên gói Android nhưng đó là trường bắt buộc.

Tiếp theo, chọn quốc gia và khu vực của bạn, sau đó nhấp vào nút ‘Chọn và định cấu hình dịch vụ’.

Thao tác này sẽ đưa bạn đến màn hình tiếp theo nơi bạn sẽ được yêu cầu chọn các dịch vụ của Google mà bạn muốn sử dụng với ứng dụng của bạn. Bạn cần nhấp vào nút ‘Bật Google Cloud Messaging’.

Bật tính năng điện toán đám mây

Bây giờ bạn sẽ thấy khóa API server và Sender ID của bạn.

ID máy chủ và ID người gửi

Bạn cần sao chép ID người gửi của bạn và dán nó vào tab Cấu hình của plugin WordPress trong trường Số liệu của Google.

Bạn cũng cần sao chép khóa API của máy chủ và dán nó vào một tệp văn bản trên máy tính của bạn. Bạn sẽ cần khóa API sau trong hướng dẫn này.

Bước 2: Thiết lập Chrome và Firefox Push Thông báo

Bây giờ chúng tôi sẽ thiết lập thông báo đẩy trên Chrome và Firefox. Đầu tiên bạn cần truy cập trang web OneSignal và tạo tài khoản miễn phí của bạn.

Khi bạn đã tạo tài khoản của mình, bạn cần đăng nhập và nhấp vào nút ‘Thêm ứng dụng mới’.

Thêm ứng dụng OneSignal mới

Bạn sẽ được yêu cầu nhập tên cho ứng dụng của mình. Bạn có thể sử dụng bất kỳ tên nào bạn muốn và sau đó nhấp vào ‘Tạo’ để tiếp tục.

Tên ứng dụng

Trên trang tiếp theo, bạn sẽ được yêu cầu chọn một nền tảng để cấu hình. Bạn cần phải chọn ‘Website Push’ và sau đó nhấp vào nút tiếp theo để tiếp tục.

Đẩy trang web

Sau đó bạn sẽ được yêu cầu chọn nền tảng trình duyệt. Bạn sẽ thấy Google Chrome và Mozilla Firefox trong một hộp và Safari trong một hộp khác.

Bạn cần phải nhấp vào hộp Google Chrome và Mozilla Firefox. Chúng tôi sẽ chỉ cho bạn cách thiết lập Safari, sau này trong bài viết này.

Chọn nền tảng trình duyệt

Nhấp vào nút tiếp theo để tiếp tục.

Trong bước tiếp theo, bạn sẽ được yêu cầu nhập URL trang web WordPress, khoá Google Server API và URL cho hình ảnh biểu tượng thông báo mặc định của bạn.

Cài đặt ứng dụng

Nếu trang web của bạn không hỗ trợ SSL / HTTPS, thì bạn cần đánh dấu vào hộp bên cạnh ‘Trang web của tôi không phải là hoàn toàn HTTPS’ Tùy chọn. Bạn cũng có thể thiết lập SSL trên trang web của bạn nếu bạn thích nhưng không bắt buộc.

Google Chrome không hỗ trợ thông báo đẩy web cho các trang web không phải ssl hoặc http. OneSignal giải quyết vấn đề này bằng cách đăng ký thuê bao vào một tên miền phụ trên miền https của chính họ.

Kiểm tra ‘Trang web của tôi không phải là hoàn toàn HTTPS’ sẽ hiển thị tùy chọn dự phòng HTTP. Bạn sẽ cần chọn một tên miền phụ cho ứng dụng của bạn và nhập Số dự án của Google hoặc ID người gửi bạn đã tạo ở bước đầu tiên.

các tùy chọn dự phòng http

Nhấp vào nút Lưu để tiếp tục. Bây giờ bạn có thể thoát khỏi hộp thoại này. Bạn sẽ được nhắc nhở với thông báo rằng thiết lập của bạn chưa hoàn thành và có thể được tiếp tục lại sau. Nhấp vào Có để đóng hộp thoại.

Bước 3: Sử dụng phím OneSignal

Bây giờ bạn cần phải nhận OneSignal Keys cho trang web của bạn. Từ bảng điều khiển ứng dụng của bạn, hãy nhấp vào Cài đặt ứng dụng.

Liên kết Cài đặt ứng dụng

Thao tác này sẽ đưa bạn đến trang cài đặt ứng dụng của bạn. Bạn cần nhấp vào tab Keys and IDs.

Keys và ID

Thao tác này sẽ hiển thị ID ứng dụng OneSignal của bạn và Khóa API nghỉ ngơi.

ID ứng dụng và khóa API nghỉ ngơi

Bạn cần sao chép và dán chúng vào tab cấu hình của OneSignal WordPress plugin trên trang web của bạn.

Bước 4: Thiết lập thông báo của Safari Web Push

Hãy nhớ rằng chúng tôi đã bỏ qua cài đặt thông báo đẩy web Safari. Bây giờ chúng tôi sẽ chỉ cho bạn cách thiết lập thông báo đẩy web của Safari.

Đăng nhập vào tài khoản OneSignal của bạn và chuyển đến trang Cài đặt ứng dụng của bạn. Cuộn xuống các nền tảng web và nhấp vào nút cấu hình bên cạnh Apple Safari.

Cấu hình Apple Safari

Thao tác này sẽ hiển thị hộp thoại nơi bạn sẽ được yêu cầu nhập tên trang web và url của trang web.

Cài đặt thông báo đẩy web Safari

Sau đó, bạn cần kiểm tra hộp bên cạnh ‘Tôi muốn tải lên các biểu tượng thông báo của riêng mình’ Tùy chọn.

Bây giờ bạn sẽ thấy tùy chọn để tải lên các biểu tượng kích cỡ khác nhau. Đây là hình vuông, sử dụng Photoshop hoặc bất kỳ chương trình chỉnh sửa hình ảnh để tạo các biểu tượng trong các kích thước chính xác.

Nhấp vào nút chọn tệp để tải lên tất cả các biểu tượng của bạn.

Tải lên các biểu tượng thông báo cho thông báo nhấn web Safari

Nhấp chuột vào nút Lưu và đóng hộp thoại.

Làm mới lại trang Cài đặt ứng dụng và cuộn xuống phần Nền tảng web. Lần này bạn sẽ thấy ‘Web ID’ trong Apple Safari.

ID web Safari

Bạn cần sao chép ID web này và dán vào tab Cấu hình của plugin OneSignal trên trang web của bạn.

Đó là tất cả, bạn đã thiết lập thành công thông báo web OneSignal đẩy cho trang web WordPress của bạn.

Bước 5: Thử nghiệm Thông báo Web Push trên trang WordPress của bạn

Theo mặc định, plugin OneSignal sẽ thêm một biểu tượng đăng ký vào trang WordPress của bạn. Truy cập trang web của bạn trong một trình duyệt được hỗ trợ và sau đó nhấp vào nút đăng ký.

Đăng ký nút thông báo đẩy

Bạn sẽ thấy thông báo ‘cảm ơn bạn đã đăng ký’ mặc định.

Bây giờ đăng nhập vào tài khoản OneSignal. Nhấp vào tên ứng dụng của bạn và sau đó trên Cài đặt ứng dụng.

Cuộn xuống phần web nền tảng và nhấp vào nút cấu hình bên cạnh Google Chrome và Firefox.

Định cấu hình thông báo đẩy web cho Chrome và Firefox

Bạn sẽ thấy màn hình cấu hình nền tảng mà bạn đã điền vào trước đó. Đơn giản chỉ cần nhấp vào nút Lưu và sau đó nhấp vào Tiếp tục.

kiểm tra các thông báo đẩy web

Bạn sẽ được yêu cầu chọn SDK mục tiêu. Bạn cần phải chọn WordPress và sau đó nhấp vào Tiếp theo.

Chọn WordPress

Vì bạn chỉ có một thuê bao vào thời điểm mã số thuê bao của bạn sẽ tự động được điền.

Nhấp vào nút tiếp theo, và bạn sẽ đạt đến ‘Cài đặt Kiểm tra’ bậc thang.

Bấm vào ‘Gửi Thông Báo Thử nghiệm’ nút.

Gửi thông báo kiểm tra

Một Tín hiệu sẽ gửi thông báo qua web.

Giao diện thông báo có thể khác nhau tùy thuộc vào trình duyệt bạn đã sử dụng để đăng ký. Khi thông báo xuất hiện trên màn hình máy tính của bạn, bạn cần nhấp vào nó.

Thông báo kiểm tra

Nó sẽ đưa bạn đến màn hình xác nhận, cho thấy rằng bạn đã thiết lập thành công thông báo web OneSignal cho trang web của bạn.

Gửi tin thành công

Quay trở lại màn hình cấu hình trên trang OneSignal và nhấp vào ‘ Kiểm tra Trạng thái Thông báo ‘.

Kiểm tra trạng thái thông báo

Bây giờ bạn sẽ thấy một thông báo thành công khác cho biết bạn đã thêm thành công các thông báo web push vào trang WordPress của mình.

Làm thế nào để gửi thông báo Web Push trong WordPress với OneSignal

Phích cắm thông báo web OneSignal trên trang WordPress của bạn sẽ tự động gửi thông báo cho tất cả các thuê bao khi bạn xuất bản một bài đăng mới.

Bạn cũng có thể tự gửi thông báo từ Bảng điều khiển ứng dụng OneSignal của mình. Đăng nhập vào tài khoản OneSignal của bạn và nhấp vào tên ứng dụng của bạn.

Từ menu phía bên trái, nhấp vào nút ‘Tin nhắn mới’.

Gửi tin nhắn thông báo qua web mới

Thao tác này sẽ đưa bạn đến màn hình thông báo mới. Bạn có thể nhập tiêu đề và một số nội dung cho thông báo của bạn.

Viết tin nhắn thông báo đẩy mới của bạn trong OneSignal

Bạn cũng có thể nhấp vào Tùy chọn, Phân đoạn, Lập biểu / Gửi sau để tuỳ chỉnh thêm thông báo đẩy web của bạn.

Ví dụ: bạn có thể liên kết nó với một trang cụ thể trên trang của bạn, gửi nó đến một phân đoạn cụ thể của người dùng hoặc lên lịch cho nó được gửi vào một thời điểm cụ thể.

Chúng tôi hy vọng bài viết này đã giúp bạn thêm thông báo web push vào trang WordPress của bạn