Installing PushPro On Your Website

Manual installation

Manual Installation

Navigate to your configuration settings to download the javascript file and copy the generated code snippet. Please note that if you change the notification image or custom opt-in, you have to press save so the snippet can automatically update in the background.


You can find the code snippet below the download file in the configuration settings.


Enable HTTPS

To use PushPro, your website needs to be HTTPS-enabled. HTTPS makes your website more secure by encrypting the traffic between your server and your visitors. If your website is already HTTPS-enabled, great! If not, keep reading. You have two options to add HTTPS to your website. The first option is that you ask your hosting provider to activate it for you. The second option is that you obtain an SSL certificate yourself, which can be done for free via Let’s Encrypt. Check if everything works by clicking the lock next to your website URL. It should say ‘Connection is secure’.

Upload the PushPro file

Next up, add the Javascript file to the root directory of your website’s source code. If you manage the content of your website yourself, you can insert the files into the root folder.


If you use a third party CMS, you can add the files via the CMS portal. In the domain settings, enable ‘Use an extension for this domain’ and copy your newly generated API key in your CMS extension:

Upload the PushPro code

The last step is including the code snippet we generated for you in the <head> of your website. Similar to the Javascript file, you can either add this yourself in the index.html, or input it via your CMS.

Verify your setup

To check if PushPro is installed correctly on your domain, you can simply run a verification check in the portal.


Navigate to “Configuration” and go to step 3/3 “Installation check” press the button “check now” we will verificate in three steps if your installation status is OK.

If you get an error message in one of the following steps verify please follow our instructions below:


  1. Check the code snippet

Error message: The code snippet is not found on your webpage. Please upload the correct code snippet.


Solution: First verify if HTTPS is enabled by checking your browser url for the (green) safety lock.


After you that HTTPS is turned on copy the code snippet and upload it to your website .html file, where you place it between the <head> </head> tags. If you want to follow the full guide how to install PushPro manually follow the instruction here. If you want to avoid all the hassle check if there is an extension available for your website here.


  1. Check the service worker file

Error message: The service worker file is not found on your domain. Please upload the service worker file.


Solution: Go back to step 2/3 in your configuration menu and download the service worker file if you haven’t done this yet. Make sure this file is installed in your website Root Folder. The Root Folder can be accessed via FTP, read more on how to install a file in your Root Folder here.


If you use a third party CMS, you can add the files via the CMS portal. In the domain settings, enable ‘Use an extension for this domain’ and copy your newly generated API key in your CMS extension panel.


  1. Check site ID parameter

Error message: The site ID’s on your website and your current domain are not corresponding. Please use the correct code snippet.


Solution: Go back to step 2/3 in your configuration menu and make sure the code snippet “site_uuid” is equal to the code snippet you placed in your website .html file between the <head> </head> tags.




Verify your setup

You can verify if you set everything up correctly by navigating to https://yourdomain.com/. If you see a push notification opt-in request, everything is working! That’s all, your website is now ready to send push notifications!

If you do not see an opt-in request, you can check whether the code snippet and javascript file were correctly added. Navigate to https://yourdomain.com/sw.js. Here you should find the following text:

importScripts('https://storage.googleapis.com/push-pro-java-scripts/pushpro-sw.js');

Next up, you can verify whether you correctly added the code snippet. On https://yourdomain.com/, right-click anywhere on the website and select “Page Source”. Here, you should find the following text:

<script></script>
window.__pushpro = {
site_uuid: "your-unique-identifier",
}

https://storage.googleapis.com/push-pro-java-scripts/pushpro-lib.js">

Ready to take PushPro for a spin? Get started for free now.
Sign Up
arrow_forward

Drop us a mail

Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try again or contact support@pushpro.io

Social Channels

Leave a review