Import the web SDK

Add the Xtremepush SDK to your website

After adding your website to Xtremepush in Website Integration the SDK must be added to the website. This can be done by manually inserting the necessary Javascript, or directly using Google Tag Manager.

Google Tag Manager

  1. Open Google Tag Manager and select the workspace for your website.
  2. Click the New Tag button.
  3. Enter a name for the tag, eg. Xtremepush SDK
  4. Click the Tag Configuration section to open the list of availabletag types. Search or scroll down the list to select Xtremepush.
  5. Paste the SDK key provided when adding the website to the platform into the Xtremepush App Key field.
  6. Click the Triggering section to open the list of available triggers. Select All Pages and click Add.
  7. Save the tag.
  8. In the main workspace, click the Preview button to test the new Xtremepush tag on your site in preview mode, opening your site within the same browser once you see the prompt in Google Tag Manager.
  9. Check the SDK is deployed, as there is now a prompt for notification permission, etc.
  1. Save the changes to your Google Tag Manager workspace to put the new tag live for all site visitors.

📘

Enabling CDN Distribution and Compression

When the integration of the SDK has been fully tested in your site and you are happy with your configuration of all SDK settings, you can update your integration to load the SDK file from a content delivery network. This will serve the SDK from servers in the same geographic region as your clients and will also enable gzip compression if your clients support it.

  1. Edit the tag created earlier.
  2. In the Tag Configuration section for Xtremepush, expand More Settings.
  3. Select the Use CDN Version checkbox.
  4. Save the tag and save changes to the Google Tag Manager workspace.

Manual deployment

The customised Javascript to deploy the SDK on your website is found in Settings > Apps & Sites by clicking SDK Integration next to the relevant website entry. Specific instructions are provided with the code snippet about how to add it to your website.

📘

Enabling CDN Distribution and Compression

When the integration of the SDK has been fully tested in your site and you are happy with your configuration of all SDK settings, you can update your integration to load the SDK file from a content delivery network. This will serve the SDK from servers in the same geographic region as your clients and will also enable gzip compression if your clients support it.

  1. Edit the code snippet you added to your website to adjust the URI in the function parameters.
  2. Change https://prod.webpu.sh/YOURAPPLICATIONKEY/sdk.js to https://cdn.webpu.sh/YOURAPPLICATIONKEY/sdk.js

Hosting all JavaScript locally

It's possible to host the SDK locally, if your environment requires it.

👍

You should first test with the remote SDK as described in the Manual Deployment section above, until you are happy that web push notifications and any other functionality you want use is all working correctly.
Only switch from remote to locally hosted SDK, once you are happy that settings are working and no further changes are needed.

  1. Download your SDK and service-worker JS from the following locations:
  • https://prod.webpu.sh/YOURAPPLICATIONKEY/sdk.js
  • https://prod.webpu.sh/YOURAPPLICATIONKEY/service-worker-source.js
  1. Place these files in the appropriate location in your website directory.
  2. In the Javascript integration code placed on your on your site, update the parameter which points to the remote SDK location with the absolute or relative path to your now locally hosted SDK.
  • For example, change https://prod.webpu.sh/YOURAPPLICATIONKEY/sdk.js to /webpush/sdk.js
  1. If you have configured Firebase Push Notifications for Chrome and Firefox, check you have set Use Self Hosted Domain to Yes and the location for service-worker.js and manifest.json are correct.

Updated 7 months ago


Import the web SDK


Add the Xtremepush SDK to your website

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.