Integrate your website with the platform

 

To integrate your website with the platform you must have signed up and added an App to the platform. Add an App on the platform by clicking + NEW WEB APP on your XtremePush Dashboard at xtremepush.com

 

 

Enter the following details:

  • Title - the title of your project
  • Timezone -the timezone to be used for displaying analytics 
  • Description - a short description of the project
  • Website Name - The brand name of your site
  • Website Domain - The domain name of your site
  • Icons - The default icon to be displayed in your notifications
    • Small icon - 64 x 64
    • Large icon - 256 x 256

An App key and token have been automatically generated. The App key is used in your website project to connect the site and platform. The app token will only be used if you use the external API. After you complete the details, copy the app key and click save. Your saved settings should be similar to the following:

 

Next you must carry out the prerequisites for the browsers you intend to support, follow the links below for the steps unique to different browsers.

 

If you want to integrate with Google Analytics to send targeted web push notifications now is a good time to do it as the Javascript you will need to insert when deploying will be slightly different. To perform the Google Analytics Integration read:

 

Deploying the SDK 

Once you have configured the browsers you want to support and your Google Analytics integration you are ready to deploy the SDK. Instructions on how to deploy will be found in Settings > SDK Integration. After you have saved all your settings instructions on how to initialise the SDK will be found here. This will include the JS you need to add to your pages and any manifest,  service worker, or html files you may need to add to your websites origin.

Google Tag Manager

It is possible to add the required javascript using Google Tag Manager if you use it, for details on integrating using Tag manager read:

 

Some sample integration guides form the SDK Integration page are given below.

Web Push Permissions Prompt Settings 

You can control when the user is asked if they will accept web push notifications this is covered in this article:

 

Notification Center

You can also add a notification center widget to your site so users can go back and review recent messages anytime they want. If you want to Add a notification center to your site read: 

If you don't plan on using a notification center you are ready to send notifications, details can be found in docs on creating web push notification campaigns

 

Sample Integration Instructions

The SDK integration page will look different depending on how you have configured for different browsers two example are given below:

Config A:

SDK_Integration_Safari__Today_at_4.40.41_PM.png

Config B:

SDK_Integration_Safari__Today_at_4.39.10_PM.png

 

SDK Initialisation

You must put xtremepush onto your site before you can send notifications or do anything else with the SDK.

The base xtremepush javascript must appear on any page where you want to prompt users to sign up for notifications via xtremepush, or where you want to make xtremepush API calls. The JS for adding the xtremepush javascript SDK on your pages s will look like this:

<script type="text/javascript">
(function(p,u,s,h,e,r,l,i,b) {p['XtremePushObject']=h;p[h]=function(){
     (p[h].q=p[h].q||[]).push(arguments)};i=u.createElement('script');i.async=1;
     i.src=s;b=u.getElementsByTagName('script')[0];b.parentNode.insertBefore(i,b);
})(window,document,'https://prod.webpu.sh/YOU_APP_KEY/sdk.js','xtremepush');
</script>

 

Manifest File 

You may need to create a manifest.json file and place it in of of the directories of your website for example:

{  
  "name": "Your-Project-Name",  
  "short_name": "Project-Short-Name",  
  "display": "standalone",  
  "gcm_sender_id": "12345678910",
  "gcm_user_visible_only": true 
}

 

Service-Worker

You may need to create a  service-worker.js and place it in of of the directories of your website for example: 

importScripts(decodeURIComponent(location.search.substring(location.search.indexOf('ref=')+4)));

 

Hosting All JS locally

If you have to host all JS files locally this is possible. You should first test with remote SDK until you are happy that web push notifications and any other functionality you want use is all working correctly. Once you are happy that settings are OK and will not change you can switch from remote to locally hosted SDK, details on switching in article below:

 

 

 

 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.