Chrome-Safari-Firefox Image

Integrate browser notifications on your website in 5 minutes.

Browser notifications are push notifications which can be sent to your user's desktop or mobile browsers [Click here to know more or see How it looks]. Your website doesn't have to be opened on user's system for it to work. It is currently supported for all modern browsers like chrome, firefox and safari. As more browsers integrate push notifications, your website will also start supporting it without any effort from your side.

Follow the below mentioned steps to integrate browser notifications on your website. You can put the bell icon as present on the right hand side or use the button below at appropriate places on your website. The color, text and location is 100% customizable to give you the best click-through-rate.

Features

  • NOTIFICATION TRAY (Click on the bell to see how it looks)
  • Bell UI for 50% better conversion rates than popups.
  • Supporing Chrome, Safari and Firefox browsers.
  • Single line of code for integration.
  • Customised UI with your choice of text, color and position
  • Apple developer certificate not needed for safari.
  • Send Notifications through APIs as well as PushChamp Dashboard.
  • Segmentation support for targeted marketing.
  • In depth Analytics with delivery, opens and failure reports.
  • Send unlimited notifications for FREE till 500 users.
  • HTTP support.

(No Credit card required)

and follow the below 3 steps:

1. Create application

Login on Pushchamp dashboard and go to create application.

Add application helper

Please provide a logo (Preferred). While asking for the notification your logo would show up.

Click on checkboxes Chrome, Safari and Firefox.

Chrome IconFor Chrome

My site is not secure (HTTP)

  • Uncheck HTTPs supported
  • Provide subdomain. If your website is http://sitename.com give subdomain value as sitename

My site is secure (HTTPS)

  • Check HTTPS supported
  • Download files service worker and Manifest file
  • Host both files from root of your site. eg: https://www.sitename.com/service-worker.js and https://www.sitename.com/manifest.json

Firefox IconFor Firefox

My site is not secure (HTTP)

  • Uncheck HTTPs supported
  • Provide subdomain. If your website is http://sitename.com give subdomain value as sitename

My site is secure (HTTPS)

  • Ignore if already done for Chrome
  • Check HTTPS supported
  • Download file service worker
  • Host the file from root of your site. eg: https://www.sitename.com/service-worker.js

Safari IconFor Safari

I don't have Apple developer certificate

  • Check the box "make it for me"
  • Provide website name like Sitename. (This comes when Safari asks for user permission for notification)
  • Choose a Safari icon, square in shape of size greater than 256x256. (Apple requires different icon sizes. You just upload single image and we resize it into required sizes)
  • Provide site which will receive notifications separated by new line. Give http://yoursitename.com. You can also give http://localhost if you want to test notifications

I have Apple developer certificate

  • Uncheck "make it for me"
  • Provide website name like Sitename. (This comes when Safari asks for user permission for notification)
  • Go to Apple developer center and create Safari certificate
  • Provide Push ID.
  • Upload .p12 file and provide password.
  • Choose a Safari icon, square in shape of size greater than 256x256. (Apple requires different icon sizes. You just upload single image and we resize it into required sizes)
  • Provide site which will receive notifications separated by new line. Give http://yoursitename.com. You can also give http://localhost if you want to test notifications

Wordpress IconFor WordPress Sites

Install our plugin from Pushchamp Wordpress Plugin. You can also install plugin directly by searching for "Pushchamp" in your admin panel of wordpress.

Reach us for any query or suggestion and our team will be more than happy to help you.

2. Make your bell

Go to page Bell Your Site on Pushchamp dashboard (Refer screen shot)

Make your bell helper image.

Provide details of the bell you want and click GENERATE.

Put the generated code just before the end of <body> tag on the HTML page you want to ask for permission.

If you wish to use your own trigger UI, please let us know.

3. Send Notification

To send notifications, go to campaign and create campaign. You can send notifications to all users, a segment or upload tags to reach out to selected audience. Checkout docs to know about how to tag your users and segment them.

Create campaign helper image

You can also send notifications through APIs. To make APIs click here.

To change or create new content for your notifications go to section templates and create templates. Templates are reusable parts of your notifications. It can also be used to add variables to your notifications.

Reach us for any query or suggestion and our team will be more than happy to help you.