PushRadar's JavaScript Library

Welcome to PushRadar's documentation for our JavaScript client library. This article covers subscribing to channels, and receiving notifications published to those channels in realtime.

(JavaScript)PushRadar.js

PushRadar's JavaScript client library, pushradar.js should be included just before the closing </body> tag of all your webpages:

<script src="//www.pushradar.com/pushradar.js"></script>

After you have linked to the above library, you can get started subscribing to channels.

You will need to use a server library to broadcast notifications. We have produced server libraries for PHP, Node.js, .NET, Ruby, Java and Python. You can also use cURL to broadcast notifications.

(client)"Hello World!" example

The following example demonstrates subscribing to a channel called test-channel and receiving a message broadcast on it (for this example, the message "Hello World!"). Replace your-api-key with your actual PushRadar API key, which may be obtained from the API page of your dashboard.

  • JavaScript
<script src="//www.pushradar.com/pushradar.js"></script>
<script>
    var radar = new PushRadar("your-api-key");
    radar.subscribe("test-channel", function (notification) {
        alert(notification.message); // "Hello World!"
    });
</script>
(channels)Subscribing to channels

As you have seen from the code above, subscribing to channels is as easy as calling the subscribe method on the PushRadar instance, passing in the channel name and a callback which receives a notification when one is broadcast on that channel.

Channel names cannot contain spaces, and by convention are lowercase and alphanumerical (a-z0-9), with dashes separating words, e.g. custom-channel-20. Optionally, you can specify events in channel names using a colon character, for instance user:new-message

The example below shows how to subscribe to multiple channels:

  • JavaScript
<script src="//www.pushradar.com/pushradar.js"></script>
<script>
    var radar = new PushRadar("your-api-key");
    radar.subscribe("first-channel", function (notification) {
        alert(notification.message);
    });

    radar.subscribe("second-channel", function (item) {
        alert(item.height);
    });
</script>
(feature)User targeting

By convention, a channel named user should receive notifications targeted to the currently authenticated user in your website or web app. If a user is logged into your website or web app, register their user ID by calling the setUserID method of the PushRadar object.

For this example, we are going to use one of PushRadar's server libraries to broadcast a new message to the user with ID usr100, and then receive that notification client-side using JavaScript.

  • PHP
  • Node.js
  • .NET
  • Ruby
  • Java
  • Python
  • curl
use PushRadar\PushRadar;

$radar = new PushRadar("your-secret-key");
$radar->targetUser("usr100")->addDataItems(array(
    "message" => "Hey there, from Sam!",
    "sender_name" => "Sam"
))->broadcast("user:new-message");
  • JavaScript
<script src="//www.pushradar.com/pushradar.js"></script>
<script>
    // Set user ID on initialization
    var radar = new PushRadar("your-api-key", "usr100");

    // ... or ... radar.setUserID("usr100");

    radar.subscribe("user:new-message", function(notification) {
        alert("New message from " + notification.sender_name); // "New message from Sam"
    });
</script>

If your website or web app uses ajax navigation and doesn't refresh the page when users log out, make sure to call radar.setUserID(null); when a user logs out.

(feature)Action targeting

PushRadar allows you to target notifications to visitors or users who have, or have not, taken a certain action on your website or web app. You can track actions the current visitor/user has taken by calling the action method of the PushRadar object, passing in an action identifier:

  • JavaScript
// ... var radar = new PushRadar(...)
radar.action("purchased-item-#11");

To track multiple actions, you can call the actions method, passing in an array of action identifiers:

  • JavaScript
// ... var radar = new PushRadar(...)
radar.actions(["purchased-item-#11", "subscribed-newsletter"]);

To remove an action, simply call the removeAction method, or to remove multiple actions, the removeActions method:

  • JavaScript
// ... var radar = new PushRadar(...)
radar.removeAction("subscribed-newsletter");
radar.removeActions(["my-action", "another-action"]);
(data)PushRadar and Local Storage

PushRadar's JavaScript client library relies on HTML5 Local Storage for core targeting functionality. Items set in Local Storage are prefixed with "#pushradar_".

You should state in your website's privacy policy that you collect the following types of personal information from your visitors or users:

  • (a)their IP address, geographical location, browser type and version, information about actions they have taken and other information.

This is done for the purpose of providing realtime functionality on your service.

If you need any assistance setting up, please do not hesitate to contact us.