Installing PushPro On Your Website

Manual installation

Navigate to your domain 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, the snippet will change. So, after each change you make, upload the updated snippet to your website. How you can install this on your website will be covered in the next step.

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

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>
window.__pushpro = {
site_uuid: "your-unique-identifier",
}
</script>
<script src="https://storage.googleapis.com/push-pro-java-scripts/pushpro-lib.js"></script>


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