Web Push Notifications User Guide

From Social ID Developers
(Difference between revisions)
Jump to: navigation, search
 
Line 40: Line 40:
 
=== API keys ===
 
=== API keys ===
  
In order to use the [[Web Push Javascript APIs]] you'll need two keys that can be found in the Social-ID dashboard.
+
In order to use the [[Web Push Javascript APIs]] you'll need two keys that can be found in the CoffeeBean dashboard.
  
 
The first one is your Login App identifier, which is the same required for the Social Login integration.
 
The first one is your Login App identifier, which is the same required for the Social Login integration.
Line 48: Line 48:
 
[[File:Login app call the api.png]]
 
[[File:Login app call the api.png]]
 
[[File:Login app vapid public key.png]]
 
[[File:Login app vapid public key.png]]
 +
 +
=== Web Push Javascript APIs ===
 +
 +
Call the [[socialid.webPush.init]] and ask permission to your users to subscribe to web push notifications.
  
 
== Browser Support ==
 
== Browser Support ==
  
 
Currently, Chrome, Firefox and Opera are supported.
 
Currently, Chrome, Firefox and Opera are supported.
 +
 +
== Integrations ==
 +
 +
=== Google Tag Manager ===
 +
 +
You can add the initialization script as described in [[socialid.webPush.init]] using GTM. Example:
 +
 +
  <link rel="manifest" href="/manifest.json">
 +
  <script src="https://app.socialidnow.com/assets/api/socialid.js"></script>
 +
  <script>
 +
    var handler = function(response) {
 +
      if (response.status == "success") {
 +
        alert("You have been subscribed successfully!");
 +
      } else {
 +
        alert("Could not subscribe you.");
 +
      }
 +
    }
 +
    socialid.webPush.init(1, "BLBfmHjQRScxP-EoKX_5O-mxMItGmuRRZLj28HBuO18ddUmzRd_75SIgb4u2XjNJjM5p85JQVl2l2vieCh-7S8Q=", {
 +
    subscribeHandler: handler
 +
    });
 +
  </script>
 +
 +
You'll also need to upload the manifest and service worker files as described above.
 +
 +
=== VTEX ===
 +
 +
See the following [https://help.vtex.com/tutorial/how-to-install-a-service-worker--2H057iW0mQGguKAciwAuMe?locale=en tutorial] to install the service worker in your page.
 +
 +
Do not forget to set the '''serviceWorkerPath''' in your initialization script. Example:
 +
 +
var handler = function(response) {
 +
  if (response.status == "success") {
 +
    alert("You have been subscribed successfully!");
 +
  } else {
 +
    alert("Could not subscribe you.");
 +
  }
 +
}
 +
socialid.webPush.init(1, "BLBfmHjQRScxP-EoKX_5O-mxMItGmuRRZLj28HBuO18ddUmzRd_75SIgb4u2XjNJjM5p85JQVl2l2vieCh-7S8Q=", {
 +
  subscribeHandler: handler,
 +
  serviceWorkerPath: "/files/service-worker.js"
 +
});

Latest revision as of 19:46, 15 October 2020

Contents

Introduction

Web Push Notification is a new channel to engage users even after they left your website. It's very similar to mobile push notifications, but instead of requiring users to download an app, they only have to accept the Web Push Notification permission on your website to be ready to receive notifications.

How to integrate

You can use Web Push Notifications as a new channel for your campaigns. However, prior to sending messages, you must ask your users for permission. We provide a set of Web Push Javascript APIs to make this process easier.

The only requirement for your website is that it must have HTTPS support, otherwise Web Push Notifications won't work for security reasons.

Hosted files

Manifest

Add the file manifest.json to the root path of your website with the following content:

 {
   "name": "Example Name",
   "short_name": "ExampleShortName",
   "start_url": "/",
   "display": "standalone"
 }

You can set name and short_name entries to any other value that better identify your website.

You can also customize the path and name for this file by adding the following tag to your page:

 <link rel="manifest" href="/path/to/manifest.json">

Service Worker

Add the file sw.js to the root path of your website with the following content:

 importScripts("https://app.socialidnow.com/assets/api/sw.js");

If you need to change the name and/or path for this file, be sure to specify the option serviceWorkerPath in the API initialization as described in socialid.webPush.init.

Notice that using a custom path to the service worker file will also limit the scope for web push subscription. For example, if you set your service worker at https://www.yoursite.com/mypath/sw.js you'll be able to subscribe users only when they access pages under /mypath path. To have a full page scope, you need to upload your service worker to the root path or set an additional HTTP Header: "Service-Worker-Allowed: /". See this article for more info.

API keys

In order to use the Web Push Javascript APIs you'll need two keys that can be found in the CoffeeBean dashboard.

The first one is your Login App identifier, which is the same required for the Social Login integration.

The second one, specific for Web Push Notifications integration, is the VAPID public key which can be found under the Call the API section of your Login App dashboard, as shown below.

Login app call the api.png Login app vapid public key.png

Web Push Javascript APIs

Call the socialid.webPush.init and ask permission to your users to subscribe to web push notifications.

Browser Support

Currently, Chrome, Firefox and Opera are supported.

Integrations

Google Tag Manager

You can add the initialization script as described in socialid.webPush.init using GTM. Example:

 <link rel="manifest" href="/manifest.json">
 <script src="https://app.socialidnow.com/assets/api/socialid.js"></script>
 <script>
   var handler = function(response) {
     if (response.status == "success") {
       alert("You have been subscribed successfully!");
     } else {
       alert("Could not subscribe you.");
     }
   }
   socialid.webPush.init(1, "BLBfmHjQRScxP-EoKX_5O-mxMItGmuRRZLj28HBuO18ddUmzRd_75SIgb4u2XjNJjM5p85JQVl2l2vieCh-7S8Q=", {
    subscribeHandler: handler
   });
 </script>

You'll also need to upload the manifest and service worker files as described above.

VTEX

See the following tutorial to install the service worker in your page.

Do not forget to set the serviceWorkerPath in your initialization script. Example:

var handler = function(response) {
  if (response.status == "success") {
    alert("You have been subscribed successfully!");
  } else {
    alert("Could not subscribe you.");
  }
}
socialid.webPush.init(1, "BLBfmHjQRScxP-EoKX_5O-mxMItGmuRRZLj28HBuO18ddUmzRd_75SIgb4u2XjNJjM5p85JQVl2l2vieCh-7S8Q=", {
  subscribeHandler: handler,
  serviceWorkerPath: "/files/service-worker.js"
});
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox