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.

Screenshot of the manual installation information in the PushPro portal


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

Screenshot of the code snippet needed to install PushPro


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’.

Screenshot of Google notification regarding a secure connection

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.

Screenshot of a website 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:

Screenshot of installation for extensions information in the PushPro portal

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.</head>

Screenshot of the code snippet included in the index.html


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.

Drop us a mail

Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try again or contact [email protected]

Social Channels