You are probably ready to get started send push notifications to your
site’s visitors - using the WonderPush solution.  The following overview
of WonderPush shows you how to get push messaging up and running on your
website within 5 minutes. 

It currently works with Chrome 42+ and Firefox 44+ and it will soon support Safari. 

This SDK supports HTTP, HTTPS, and multiple subdomains
websites! 

WonderPush Javascript SDK is a client-side library which is invoked from
inside your web pages. 
WonderPush client-side APIs is basically used to display WonderPush
switch button and to register user to web push.  It makes calls to
WonderPush servers using WonderPush APIs that are REST services using
JSON to transport parameters and return values. 

Using WonderPush requires to have a WonderPush account (it’s free and
doesn’t require any credit card) and to have a the WonderPush JavaScript
snippet installed on your site with a personal web key you will grab
from WonderPush dashboard. 

Get your personal web key

1.  Log in or sign up

You will be able to invite new members to join your project with
different levels of permission (owner, editor…). 

2.  Register your website

Give a name to your project.  e.g. Google News Make sure to check Web
under the Platforms section. 

3.  Fill your website’s infos

Pay attention to properly follow the steps of the Website configuration process.  Those informations are required for
the initialization of the SDK:

Custom domain

The notifications will be shown are originating
from your custom domain. 

If you signed for a free plan, simply choose an alias representing
your website, with no space, dots or uppercase letters.  e.g.:
"googlenews" and not “Google News” or news.google.com
If so, the push subscriptions will be tied to the following domain:
https://googlenews.by.wonderpush.com/

Your Web push will look like this:

If you signed for a premium plan, then you can use your very own
domain.  In this case, please contact us for instructions. 

Updating frequently this value could break all existing opt-in and require every user to subscribe again. 

Website name

That’s the displayable name of your website.  In our
example, it would be Google News with appropriate capitalization. 

Notification default URL

This is the default URL to open when
the user clicks on the notification.  This value will be used only if
none URL is defined within the notification itself.  We’ll see further
how you will be able to define deeplink URL when composing your first
notification.  In the case that concerns us, the notification default URL
would be https://news.google.com

Notification icon

This is the default notification icon (in our
example, G).  It will be used if none is present within the notification
itself.  A square image is expected (100x100).  Prefer using HTTPS.  This
prevents serving mixed content when displaying an HTTP image in an HTTPS
page, which would result in a yellow or grey lock in the location bar. 
This image is also shown during the registration process. 

Then validate the form:

ADVANCED

The configuration is cached, so please allow 24 hours
before expecting updates to be taken into account.  The first setup,
however, should be available right away! 

Developer note: The configuration is also cached in the browser in the Local Storage, you
can try to update things (like customDomain) there, to go forward
faster.  If you update thecustomDomain, refresh the page, and update the
configuration cached in the Local Storage of the new domain too.  > >If
you prefer to control the initialization options from your code
directly, you have the ability to override them by adding options to the
javascript snippet (see STEP 2). 

Integrate SDK into your web pages

Integrating from code

Copy the small javascript snippet from your Dashboard and paste it into your website’s pages before the closing tag </body>, wherever you want excepted between the <head> and </head> tags.  Note that it contains your personal Web key.  The javascript snippet must be integrated on any page where you want to prompt users to sign up for Web Push, or where you want to make WonderPush API calls. 

Explanations

The script makes the loading of the SDK asynchronous.  Thus, it won’t slow down the loading of your pages.  The snippet loads a very short script that detects the minimum features required for push notification support.  If browser support is present, it then injects the whole SDK.  Our SDK is hosted on a worldwide CDN.  It automatically loads the latest version available without risking incompatible code changes. 

ADVANCED

You can call the WonderPush.init function whenever you want, there is no need to call it right away.  For instance you can wait to retrieve the userId.  Note however that the previous code block must
appear before in the page.  You can override the initialization options filled in your dashboard by adding the following options to the
WonderPush.init function:

Integrating via Google Tag Manager

Paste the script you can find in your WonderPush dashboard into the textbox. 

Decide to Fireon All Pages. 

Click Create Tag. 

Hit Publish. 

Include “ON/OFF” switch

We recommend that you use a subscription switch, like on the example below.  This way, you register the user only when he decides.  You just have to find an appropriate place in your page and use the following code:

If you don’t see any switch into your pages, please check that
your Google Chrome version is 42 or higher. 

ADVANCED

However, you can also opt to register the user for push
notifications either right away, or after some pages have been visited,
or at any time.  Using a non intrusive information message before asking
the user for the notification permission yields better results than
asking without prior notice. 

Test opt-in process

If your site uses HTTPS, your browser should display a permission prompt window:

Your browser is ready to register you to notifications. 
Click Allow, it’s done. 

The switch goes green

This permission window isn’t customizable.  It is fully controlled by the
browser. 

If your site supports HTTP only, you should see a modal box like this:

We cannot bypass this modal box because push subscription must happen on an HTTPS page, and we need to open a new page for that.  This message prevents
popup blocker from blocking us. 

Customize opt-in

If your site supports HTTP only, you will certainly want to customize the additional window. 
Just below the WonderPush.init() function, copy the following code which shows you the default values,
and adapt it to your needs:

Receive your welcome web push

If you succeed then your site should now support WonderPush web push notifications and you should see your Welcome push appear within a few seconds:

If you didn’t receive a notification, then you probably removed the Default Welcome notification from the WonderPush dashboard. 

Send your first web push

Return to your WonderPush dashboard.  You should now see yourself listed
as pushable in:

Audience > All users

Go to

Notifications >: You can see the Default Web Notification. 

Feel free to edit it.  You can now create a new notification. 

Advanced usage

Optimize opt-in process

WonderPush recommends to use an ON/OFF switch in order to encourage your users to opt-in. 

This is the default mode of WonderPush SDK.  An alternative to using the default mode is to prompt user the first time
he visits a page.  Another one can be to prompt user after he has been to several pages on your site, or in reaction to a click. 

Find your best integration by optimizing optional parameters of the
WonderPush.init function:

Parameter

Value

Description

mode

"visits", "pages", "direct", "manual"

How automatic subscription should be performed. 

"visits" triggers at the minVisits -th visit of the user (default). 

"pages" triggers at the minPages -th page view of the user. 

"direct" triggers at the very first page load. 

"manual" never triggers automatically. 

Note that the switch can be used independently of the chosen mode. 

minVisits

2 (default)

0 or 1 means immediate.  Eg.:  2 means at the second visit. 

minPages

3 (default)

0 or 1 means immediate.  Eg.:  3 means at the third page view. 

switchElementId

"wonderpush-subscription-switch"

The id of the placeholder element on the page where the switch should be injected, if found. 

Ask permission on action
You can prompt your user in reaction to a click or any action using the setNotificationEnabled function:

Explore user data

WonderPush allows you to send push notifications to your opt-in users’ whole database.  But you can also target a subset of your audience by defining new segments and crossing multiple criteria.  Without any action on your side, WonderPush SDK saves for you basic information such as an Installation ID that identifies your users’ devices, browser language, timezone…

Using the SDK, you can easily tag and track meaningful events performed by the user directly from your website.  This enables you to perform powerful segmentation of your audience. 

Go to:

Audience > All users
And click on a User in the preview panel.  You can see all the information relating to a specific installation retrieved by WonderPush SDK:

Using the SDK, you can easily tag and track meaningful events performed by the user directly from your application.  This enables you to perform powerful segmentation of your audience.  Such parts of the audience are called segments.  WonderPush permits you to define numerous segments. 

Add tags to installations

You can then add tags to an installation using the WonderPushSDK.putInstallationCustomProperties function: