Website SDK

Website SDK Overview

To get Gravitec Push Notifications running on your website, follow these two steps.

Requirements

W3C Web Push Notifications are currently supported by Chrome 50+, Opera 42, Firefox 44+, Safari 7.0+, Yandex 16.3+.

This includes Chrome for Windows, Mac OSX, Linux, Chrome OS and Android. Chrome for iOS is not yet supported by Google.

 

Website SDK HTTPS Installation

Gravitec SDK Installation for Chrome websites (desktop + mobile)

Requirements

W3C Web Push Notifications are currently only supported by Chrome 42+

  • Includes Chrome for Windows, Mac OS X, Linux, Chrome OS, and Android. Chrome for iOS is not yet supported.

HTTP and HTTPS

If some of your pages are served via HTTP instead of HTTPS, then you will need to follow our HTTP Installation Guide instead.

If possible, we encourage you to migrate all your pages to HTTPS first, and then continue using this guide.

 

1. Download the SDK

1.1 Download the latest version of Gravitec Chrome Web SDK after the registration of your site in the Gravitec Dashboard.

1.2 Copy push-worker.js and manifest.json from gravitec_sdk_ directory and paste it into the top-level directory (root folder) of your site.

 

2. Include Required Files

2.1 Link https://cdn.gravitec.net/storage/APP_KEY/client.js and manifest.json to each page of your website by adding some code between <head> and </head> tags. Update APP_KEY with your Gravitec AppId. Most likely, you will have to do it just once in the file, which helps to generate a layout of the site. The resulting HTML should look like this:

<head>
 <script src="https://cdn.gravitec.net/storage/APP_KEY/client.js" async></script>
</head>

Now user will see a window asking for permission to receive notifications from your site immediately after opening the page:

doc-01.png

3. Customize Gravitec (Optional)

3.1 Your custom button or event.

Call Gravitec.push(["init"]) from a javascript file that is included in every page. Create or use your button and update YOUR_CUSTOM_BUTTON_ID with your button id.

The user will see a window asking for permission to receive notifications from your site immediately after clicking on the button.

You can create your own logic and call registerPush() method.

Important

You must keep all the SDK files together. https://cdn.gravitec.net/storage/APP_KEY/client.js, push-worker.js and manifest.json must be placed in the root directory of your site.

Link to https://cdn.gravitec.net/storage/APP_KEY/client.js must be added between <head> and </head> tags for every page on your website. Linking files this way allows us to be sure that: - any page can subscribe to notifications - any page can be opened from a notification (if set) - changes to the Google Registration id can be updated - session count can be accurately calculated.

That's It!

That’s it for now - the setup is complete. See our Web SDK API for more functions.

var Gravitec = Gravitec || [];
Gravitec.push(["init", {"autoRegister":false}]);
window.onload = function(){
 //Replace YOUR_CUSTOM_BUTTON_ID with your button id
 document.getElementById("YOUR_CUSTOM_BUTTON_ID").onclick = registerPush;
 function registerPush() {
  Gravitec.push(["registerUserForPush", function(success){
   if (success) {
    //your custom action
   }
  }]);
 }
}

Website SDK HTTP Installation

Gravitec SDK Installation for Chrome websites (desktop + mobile)

HTTP vs. HTTPS

This is the guide for using Google Chrome push notifications on websites that have some pages served via HTTP instead of HTTPS.

If you are sure that each page is served only via HTTPS, then you should follow Website SDK HTTPS Installation guide.

Requirements

W3C Web Push Notifications are currently only supported by Chrome 42+

  • Includes Chrome for Windows, Mac OS X, Linux, Chrome OS and Android. Chrome for iOS is not yet supported by Google.
 

1. Include Required GravitecSDK.js

1.1 Include https://cdn.gravitec.net/storage/APP_KEY/client.js in the the <head> HTML tag of each of your website pages. Update APP_KEY with your Gravitec AppId. The best way is to add it to the code that generates the layout for each of your webpages. The resulting HTML should look like this:

<head>
 <script src="https://cdn.gravitec.net/storage/c98ddb5b4e54032b1f012127a3c5aec3/client.js/" async></script>
</head>

2. Customize Gravitec (Optional)

2.1 Init with your custom button or event.

Call Gravitec.push(["init"]) from a javascript file that is included in every page. Create or use your button and update YOUR_CUSTOM_BUTTON_ID with your button id.

That's It!

That’s it for now - the setup is complete. See our Web SDK API for more functions.

var Gravitec = Gravitec || [];
Gravitec.push(["init", {"autoRegister":false}]);
window.onload = function() {
 //Replace YOUR_CUSTOM_BUTTON_ID with your button id
 document.getElementById("YOUR_CUSTOM_BUTTON_ID").onclick = registerPush;
 function registerPush() {
  Gravitec.push(["registerHttp");
 }
}

Website SDK API

JavaScript Async

The example assumes that you have the following code placed defined before calling Gravitec functions.

Update APP_KEY with your Gravitec AppId.

<script src="https://cdn.gravitec.net/storage/APP_KEY/client.js" async></script>
<script>var Gravitec= Gravitec || [];</script>
Functions

init

This is the only required method that you need to call for setting up Gravitec to receive push notifications. Call it from each page of your site.

  • Parameters
  • JSON options
  • Boolean autoRegister (Optional) - Automatically show browser prompt to accept notifications. You can pass in "false" to delay this pop-up and then call registerUserForPush to prompt them later.
  • Boolean createButton (Optional) It creates a default button that generates a window for receipt of the notifications, which appears after clicking.
  • String tooltipText (Optional, use only with createButton) - Default: "One click subscription to our newsletter!" Set the text that will be shown to users on a default button.

Example:

var Gravitec = Gravitec || [];
Gravitec.push(["init", {"autoRegister":false}]);

registerUserForPush

Call it when you want to prompt the user to accept push notifications. Only call if you set "false" in autoRegister: when called "init".

Example:

var Gravitec = Gravitec || [];
Gravitec.push(["registerUserForPush", callback]);

addTag

Tags a user based on an app event of your choosing so that later you can create segments on gravitec.net to target these users. Recommend using setTags over addTag if you need to set more than one tag on a user at a time.

  • Parameters
  • string value - Value to set.

Example:

var Gravitec = Gravitec || [];
Gravitec.push(["addTag", "value"]);

addTags

Add provided tag(s) to subscriber’s tags. Thus, a push segment based on these tags could be created.

  • Parameters
  • JSON array of string value(s) – tag(s) to add

Example:

var Gravitec = Gravitec || [];
Gravitec.push(["addTags", ["value1", "value2"]]);

setTags

Tag a user based on an app event of your choosing so later you can create segments on gravitec.net to target these users.

  • Parameters
  • JSON values – Values of your choosing to create.

Example:

var Gravitec = Gravitec || [];
Gravitec.push(["setTags", ["value1", "value2"]]);

removeTag

Deletes a tag that was previously set for a user with addTag or setTags. Use removeAllTags if you need to delete all of them.

  • Parameters
  • String value – Value to remove.

Example:

var Gravitec = Gravitec || [];
Gravitec.push(["removeTag", "value"]);

removeAllTags

Deletes all tags that were previously set for a user with addTag or setTags.

Example:

var Gravitec = Gravitec || [];
Gravitec.push(["removeAllTags"]);

setAlias

Set a alias(user identifier) for each user of gravitec.net to target these users.

  • Parameters
  • String value – Value to set.

Example:

var Gravitec = Gravitec || [];
Gravitec.push(["setAlias", "value"]);

getSubscription

Lets you retrieve the Google Registration ID. Your handler is called after the device is successfully registered with Gravitec.

Example:

var Gravitec = Gravitec || [];
Gravitec.push(["getSubscription", function (subscriptionId) {
 if (subscriptionId) {
  console.log(subscriptionId);
 }
}]);

afterSubscription

Callback that is called after the device is successfully registered with Gravitec. Return token.

Example:

var Gravitec = Gravitec || [];
Gravitec.push(["afterSubscription", function (token) {
  console.log(token);
  //Your action
}]);

isSubscribed

Shows if user give permission to send notifications. Return true or false.

Example:

var Gravitec = Gravitec || [];
Gravitec.push(["isSubscribed", function (success) {
  console.log(success);
  //Your action
}]);

Generating your own GCM Push Notification Key

STEP 1: Create a Google Project and save the "Project Number"

1.1 Create a project at https://console.developers.google.com/project for your app.

doc-02.png

1.2 Select your Project and go to IAM & admin->Settings. Your project number should be located on this page.

Copy the "Project Number" from this page.

You will need to add it to the source code of your app later when you follow the SDK guide.

doc-03.png
STEP 2: Turn on "Google Cloud Messaging" API

2.1 Under APIs & Services>Library, search for "Google Cloud Messaging". Turn it on.

doc-04.png
STEP 3: Create and save Server Key

3.1 Under "APIs & services" > "Credentials", click "Create credentials".

 

3.2 Select "API key"

doc-05.png

3.3 Press the "Create" button.

IMPORTANT

DO NOT enter anything into the box.

 

3.4 Go to https://console.firebase.google.com and import your google project

doc-06.png

3.5 Click to "Project overview settings" and choose "CLOUD MESSAGING" tab. Copy Server Key.

doc-07.png
STEP 4: Send your GCM credentials to Gravitec support

4.1 Send your Project Number(Sender ID) and GCM Server key to support@gravitec.net.

 

Generating your own Safari Push Notification Certificate

The goals of this section are to provision your app with Apple and grant Gravitec access to manage your notifications.

1. Create Certificate Signing Request

1.1 Open Keychain Access on your Mac (it is located in Applications/Utilities) and choose the menu option Request a Certificate from a Certificate Authority….

doc-08.png

1.2 Save Certificate

You should now see the following window (pic. 1).

Enter your email address here. Some people recommend using the same email address that you used to sign up for the iOS Developer Program, but it seems to accept any email address just fine.

Check Saved to disk and click Continue.

doc-09.png

pic. 1

2. Create Website Push ID and apply the Certification Request to generate Certificate

2.1 Press "plus" button on the Website Push IDs.

doc-10.png

2.2 Enter an ID, a Description and press the button Continue.

doc-11.jpg

2.3 On the next pages press Register and the Done buttons.

 

2.4 On the Website Push IDs page select your site and press Edit.

doc-12.png

2.5 Press Create Certificate.

doc-13.png

2.6 Press "Choose File..", select the "certSigningRequest" file you saved in Step 1, open, and then press "Generate".

doc-14.png

2.7 Press "Download" to save your certificate

doc-15.png
3. Creating a p12 File

3.1 Open the website_aps_production.cer file you downloaded in the last step by double clicking on it in Finder.

doc-16.png

3.2 After a few seconds the "Keychain Access" program should pop up. Select Login > Keys, then right click on your key in the list and select "Export"

doc-17.png

3.3 Give name the .p12 file the same as sertificate ID (example: "web.net.0000001.gravitec"). You will have an option to protect the file with a password. Generating safari ID set the password "1111"!

 

4. Send your p12 file to Gravitec support (support@gravitec.net)