Last updated: Saturday, July 21, 2018

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.

Set the time zone to go live with Push Notification

2)  Go Live By Adding the JavaScript Code on your website.

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

If you are using a WordPress Plugin – go here to get the plugin and skip the step.  Plugin will automatically add the below javascript code in your website. To activate your Plugin, you will need to get the API key from Settings. You can check this video for Push Notifications Installation in WordPress.

All Other Websites: Insert the 2 Line javascript code present in the Settings -> Installation Settings in Header of your website, or wherever you would like to collect subscription. That is it you should be live now!!

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.

Async version

  • Legacy Version: You have to put the legacy version in the header section of the HTML

legacy version

 

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.

quick install

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.

You can also use PushNotification in Shopify store with PushEngage. We have an easy installation guide for all the platforms.

If you have any questions, feel free to reply to welcome email or email us at care@pushengage.com, or through Contact Us section.