GCM Setup

In order to enable Web Push notification, LivePinch needs to setup correctly. First the push domain needs to be setup the section Domain Setup discusses this in detail. Then, in order to setup web push settings screen, you will need GCM Sender ID and GCM Server Key, this may be obtained from Google Developer Console

Step 1

Login to Google Developer Console, start a new project or choose an existing project as shown below

GCM Select Project

Step 2

If not already selected, enable Google Cloud Messaging API’s on the selected project

GCM Enable GCM GCM Enable GCM

Step 3

Generate a new API Key once you’ve enabled the Google Cloud Messaging

GCM Server Key

Copy the API Key from the console, marked in the image below is where you will find the GCM Server Key

Step 4

To get the GCM Sender ID from Google Developer Console, click on Project Settings as shown below

GCM Project Settings

After that, you will see the screen as shown below, the project number is the GCM sender ID, you will need to update Live Pinch Web Push Settings with the server key and sender id

GCM Sender ID

Customize Web Push Permission Popup Theme

Web Push Opt-in Settings describes how to setup the permission requests by default, you might want to customize the the popup themes to more match the theme for you web application. Use the following CSS patches to customize these popups.

/* To set the background of the modal, use the following selector */
#pepdialog {
  background-color: #000000 !important;
  opacity: 0.5 !important;

/* Customize the background color, border, and text color of the modal */
#pepdialog .pep-content {
  background: <your_background_definition_here> !important;
  color: <your_text_color_here> !important;
  border: <your border definition here> !important;

/* Customize the accept and cancel button */
#pepdialog .pep-content #pep-accept {
  background: <your_background_definition_here> !important;
  color: <your_text_color_here> !important;

#pepdialog .pep-content #pep-cancel {
  background: <your_background_definition_here> !important;
  color: <your_text_color_here> !important;