How to Go Live With Web Push Notification Using PushEngage in 3 Easy Steps
Web Push Notification is increasingly becoming popular as marketing tool. With PushEngage you can interact with your subscriber instantly on mobile as well as desktop. For using Push Notifications you do not need any app. Once you integrate Push Notifications on your website, you can engage with users on browser even when user is not live on your site.
PushEngage provides you a platform for Chrome, Firefox, Samsung Browser, and Safari (coming soon) Browser Push notifications for your users on Desktop and Mobile.
Going Live with the platform is a very easy 3 Step process that you can do in 10 mins.
If you have not already complete, then register yourself at PushEngage from Homepage.
Here are the THREE easy steps to go live
1) Configure your website details in PushEngage dashboard
Once you register you will get a login into PushEngage dashboard. Login into the dashboard and configure the website details.
a) You need to provide your Website Name and an image for Push Notifications. Image is a key part of notification, and we would recommend a solid image of 192x192pixels or any square image. We would recommend a solid image.
b) You should also configure your Time Zone settings in Profile so that your notifications appear in correct time zone.
Identify the type of website you have. HTTP or HTTPS. Confused between the two types, here is a quick test for HTTPS sites. They will have the green lock in the URL address with Secure written like below.
a) For HTTP Sites Only
There are two versions of the code: You can use any one of them in your website.
- Async Version: You can put the async version on any section of your HTML page.
- Legacy Version: You have to put the legacy version in the header section of the HTML
b) For HTTPS Sites Only
Go to Install settings and get the package files – manifest.json, service-worker.js from Step 2 of Installation Settings.
Place these files in the root folder of your website so it is accessible from https://www.example.com/manifest.json and https://www.example.com/service-worker.js.
If you are not able to place any files in your root folder – then follow the below settings in Subscription Dialogbox Settings and use Quick Install in HTTPS site.
3) Configure Your Opt-in Method under Subscription Dialogbox Settings
There are multiple ways you can show push opt-in on your website:
- Safari Style Box
- Large Safari Style Box
- Floating Bar
- Bell Placed Bar
- Push Single Opt-In
- Location + Single Opt-In
- Large Safari With Segment
Depending your push opt-in strategy, you can choose the subscription dialog box.
Make sure to select the correct site type, and pick among the many options for subscription.
If you have an HTTPS site, then you will getting the browser default opt-in pop-up as shown below. The language of this pop-up is chosen based on the language preference of the browser.
If you would like you can configure this to any other type of dialogbox, but that will make this process 2 step.
If you are an HTTP site, then you have several ways to collect the subscribers. You have option to select Safari Style Box, Bell or Bottom Placed Bar.
Next you should Configure your welcome message. We recommend a Welcome Message for all subscribed users, as it acts as an confirmation for new subscription. This is under Settings -> Welcome Notification Settings.
You can also check our videos on installation here –
That is it you are live with PushEngage on your site !! You can now test notifications on your site.
If you have any questions, feel free to reply to welcome email or email us at firstname.lastname@example.org, or through Contact Us section.
- How to Unsubscribe from Push Notifications in Chrome and Firefox
- How to Configure a Firebase Cloud Messaging Key & Why You Should Use FCM API Key
- Guide to Implementing Web Push Notifications, Without a Vendor Lock-in
- Drip Campaigns and Autoresponders For Web Push Notifications
- How to Go Live With Web Push Notification Using PushEngage in 3 Easy Steps
- Abandon Cart Push Notification – A Must Have for E-commerce Sites