CleverPush Developer Docs

CleverPush Developer Docs

  • SDK Docs
  • API Overview
  • API Reference

›React Native SDK

JavaScript SDK

  • Setup
  • Methods

iOS SDK

  • Setup
  • Methods
  • Inbox View
  • Chat
  • Stories
  • Deep Links
  • Live Activities
  • Troubleshooting
  • Changelog

Android SDK

  • Setup
  • Methods
  • Notification Extender Service
  • Inbox View
  • Chat
  • Stories
  • Deep Links
  • Troubleshooting
  • Upgrading
  • Changelog

Capacitor SDK

  • Setup
  • Methods

Cordova SDK

  • Setup
  • Methods
  • Changelog

React Native SDK

  • Setup
  • Methods
  • Changelog

Xamarin SDK

  • Setup
  • Methods
  • Changelog

Flutter SDK

  • Setup
  • Methods
  • Chat
  • Troubleshooting
  • Changelog

Methods

Usage

Basic Example:

import React from 'react';
import { Text, View } from 'react-native';
import CleverPush from 'cleverpush-react-native';

export default class App extends React.Component {
  constructor() {
    super();

    this.onOpened = this.onOpened.bind(this);
    this.onReceived = this.onReceived.bind(this);
    this.onSubscribed = this.onSubscribed.bind(this);
  }
  
  componentWillMount() {
    CleverPush.init('YOUR_CHANNEL_ID_HERE');
    
    // optionally, you can disable the automatic push prompt with 'autoRegister: false':
    /*
    CleverPush.init('YOUR_CHANNEL_ID_HERE', {
      autoRegister: false
    });
    */

    CleverPush.addEventListener('opened', this.onOpened);
    CleverPush.addEventListener('received', this.onReceived);
    CleverPush.addEventListener('subscribed', this.onSubscribed);
  }

  componentWillUnmount() {
    CleverPush.removeEventListener('opened', this.onOpened);
    CleverPush.removeEventListener('received', this.onReceived);
    CleverPush.removeEventListener('subscribed', this.onSubscribed);
  }

  onReceived({ notification }) {
    console.log('Notification received:', notification);
  }

  onOpened({ notification }) {
    console.log('Notification opened:', notification);
    /*
    Example notification:

    {
      "_id": "Notification ID",
      "url": "https://example.com",
      "title": "Title…",
      "text": "Text…",
      "mediaUrl": "Image URL…",
      "customData": {
        "key": "value…"
      }
    }
    */
  }

  onSubscribed({ id }) {
    console.log('Subscribed with ID:', id);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

Get Subscription status:

CleverPush.isSubscribed((err, isSubscribed) => {
  console.log(isSubscribed); // true
});

Subscribe:

CleverPush.subscribe();

Unsubscribe:

CleverPush.unsubscribe();

Topics:

CleverPush.showTopicsDialog();

Tagging and Attributes:

CleverPush.getAvailableTags((err, channelTags) => {
  console.log(channelTags); // [{ id: "tag1", name: "Tag 1" }]
});
CleverPush.getAvailableAttributes((err, customAttributes) => {
  console.log(customAttributes); // [{ id: "attribute1", name: "Attribute 1" }]
});

CleverPush.getSubscriptionTags((err, tagIds) => {
  console.log(tagIds); // ["tag_id_1", "tag_id_2"]
});
CleverPush.getSubscriptionAttributes((err, attributes) => {
  console.log(attributes); // { attribute1: "value1", attribute2: "value2" }
});

CleverPush.addSubscriptionTag("tag_id");
CleverPush.removeSubscriptionTag("tag_id");
CleverPush.setSubscriptionAttribute("user_id", "1");

CleverPush.hasSubscriptionTag("tag_id", (err, hasTag) => {
  console.log(hasTag); // false
});
CleverPush.getSubscriptionAttribute("user_id", (err, attributeValue) => {
  console.log(attributeValue); // "value"
});
CleverPush.setSubscriptionAttribute("user_id", "1");

CleverPush.setSubscriptionLanguage("de"); // iso language code
CleverPush.setSubscriptionCountry("DE"); // iso country code

Automatic Tag Assignment

The SDK can also automatically assign tags by using the trackPageView method. In simple cases you can just give the method a URL. In the CleverPush backoffice you can then set trigger the tags by matching URL Pathname RegExes. You can optionally also set combinations of min. visits, seconds or sessions for this tag.

Let's say you have created a tag with the URL pathname regex "/sports". This would trigger the tag for a subscriber:

CleverPush.trackPageView("https://example.com/sports/article-123123");

We can also have more advanced use cases here by using Javascript functions for matching. For example you created a tag with the following function in the CleverPush backend: params.category === "sports". This would then trigger the tag for a subscriber:

CleverPush.trackPageView("https://example.com/anything", { "category", "sports" });

Once the trackPageView method has been implemented you can set up all the tags dynamically in the CleverPush backend without touching your code.

Get received notifications:

CleverPush.getNotifications((err, notifications) => {
  console.log(notifications);
});
← SetupChangelog →
  • Usage
  • Automatic Tag Assignment
  • Get received notifications:
SDKs
JavaScriptiOSAndroidCordovaCapacitorReact NativeXamarinFlutter
Community
TwitterFacebookGitHub
More
API ReferenceAPI OverviewBlogImprintPrivacy PolicyTerms of serviceGDPR
Copyright © 2023 CleverPush