The WonderPush Developer Hub

Welcome to the WonderPush developer hub. You'll find comprehensive guides and documentation to help you start working with WonderPush as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

React Push Notifications

How to integrate WonderPush SDK in a React website.

Setting up push notifications for your React website is easy. Web push notifications are the ideal solution to re-engage users and bring them back to your website.

Estimated setup time: 10 minutes.

If you haven't already, please follow the Website Quickstart guide before setting up React with this guide.

This guide will show you how to use the Website SDK from your React application.

Prerequisites

  • A WonderPush Account, if you do not already have one
  • Your WonderPush credentials available in your dashboard:
  • A desktop with Google chrome installed

1. Installing

You can install the module from a package manager of your choice directly from the command line:

# Yarn
yarn add react-wonderpush

# NPM
npm i react-wonderpush

2. In your application

Remove the snippet you've installed during the Quickstart guide if you have followed it, and replace it with the following:

import WonderPush from 'react-wonderpush';
<WonderPush options = {{
  webKey: "a6a00ccf60ffee04cb201cead4304fc4db8fa8e0a2823a77466e8c8ebeed4e25",
  applicationName: "React WonderPush Demo",
  notificationDefaultUrl: "https://www.wonderpush.com/demo/",
  notificationIcon: "../img/image.png"
}}>
  <div className="App">
    Your components here ...
  </div>
</WonderPush>

3. In your components

Here is how to integrate a wonderpush subscription switch:

import React,{Component} from 'react';

const SwitchButton = () => (
    <div className="switch-container">
      <div id="wonderpush-subscription-switch" data-on="YES" data-off="NO"></div>
    </div>
  )

export default SwitchButton

And here is how to create a component who uses the WonderPush SDK:

import React, {Component} from 'react'
import {withWonderPush} from 'react-wonderpush'

export class EventToTrack extends Component {
  constructor(props){
    super(props)
    this.fireEvent = this.fireEvent.bind(this)
  }

  fireEvent(e){
    this.props.wonderPush.trackEvent("myEvent")
  }

  render(){
    return (
      <div 
        className={"event myEvent"} 
        onClick={this.fireEvent} 
      > 
        Click on this div will track event name myEvent
      </div>
    )
  }
}

export default withWonderPush(EventToTrack, {waitWonderPushReady: true})

withWonderPush() take two arguments:

  • component
  • options

Available options:

  • waitWonderPushReady: boolean (default : false)

Congratulations, you're done!

Updated 2 months ago


What's Next

Customize your subscription prompt using one of our pre-made UIs. Set properties on users and send events using our Website SDK (javascript).

Subscription Prompts
Properties
Events
Website SDK

React Push Notifications


How to integrate WonderPush SDK in a React website.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.