Migrating from Web Push by Push Nova to Clevertap for a Shopify store


#1

I have a store on Shopify and I’ve been using Web Push app by Push Nova up until now.
I am thinking of switching to CleverTap for the same.

Can you tell me if that is possible? If yes, can you please tell me how it can be done?
I need to know whether I am going to be stuck with Web Puch for existing users or there’s a way out. Please treat this as urgent.


#2

Hi @mayankgupta111 it’s possible to implement web push on Shopify websites. Here are the steps:

Step-by-step guide
1a) Host an https page at a subdomain location of your choice. This subdomain location will be visible to your users when you send them a push notification. For example: notify.example.com.
b) Host an https page to check whether the user is already subscribed. Something like https://notify.example.com/subscribed.html

In your notify.example.com page, you’ll have to initiate CleverTap instance. Just follow step 1 - https://developer.clevertap.com/docs/web-quickstart-guide#section-step-1-add-the-clevertap-javascript-library-to-your-website. Please make sure you replace the CleverTap account ID here.

  1. Add manifest.json and CleverTap service worker file to the root directory for this subdomain.

a) manifest file - https://developer.clevertap.com/docs/web#section--specify-the-gcm-sender-id-in-manifest-json-file-

You can get the GCM sender ID from your FCM project. This sender ID is called Project ID inside of your Firebase console.

b) Service worker file - https://developer.clevertap.com/docs/web#section--add-the-service-worker-file-

  1. Then, in all your HTML files, include the below snippet in the header.
  1. On your main Shopify website - example.com

clevertap.notifications.push({

      “titleText”:“Do you want to subscribe to web push?“,

        “bodyText”:“Get updates“,

        “rejectButtonText”:‘No’,

        “okButtonText”:‘Yes’,

“okCallback”:function () {

      console.log("user clicked on ok on popup");

  },

  "rejectCallback":function () {

      console.log("user clicked on reject on popup");

  },

  "subscriptionCallback":function () {

      console.log("user subscribed for web push notifications");

  },

     “httpsPopupPath”:“<URL of your https subdomain page>“, 

        “httpsIframePath”:“<URL of your https subdomain page>/iframe.html”

    });
  1. In notify.example.com include:

clevertap.notifications.push({
“skipDialog”:true,
“askAgainTimeInSeconds”:1
});

  1. The following code will go into your /subscribe.html page
Title

Integrate GCM and CleverTap: Get your GCM Sender ID and Server Key. In the CleverTap Dashboard, go to Settings → Integrate Web Push.