CleverPush Developer Docs

CleverPush Developer Docs

  • SDK Docs
  • API Overview
  • API Reference

›Capacitor SDK

JavaScript SDK

  • Setup
  • Methods

iOS SDK

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

Android SDK

  • Setup
  • Methods
  • Notification Service Extension
  • Inbox View
  • Chat
  • Stories
  • Deep Links
  • Troubleshooting
  • Upgrading
  • Geo Fence Location Permission
  • Changelog

Capacitor SDK

  • Setup
  • Methods
  • Changelog

Cordova SDK

  • Setup
  • Methods
  • Changelog

React Native SDK

  • Setup
  • Methods
  • Changelog

Xamarin SDK

  • Setup
  • Methods
  • Changelog

Flutter SDK

  • Setup
  • Methods
  • Chat
  • Troubleshooting
  • Changelog

Methods

Initialization

Add the initialization code like this:

import CleverPush from 'cleverpush-capacitor-sdk';

const Home: React.FC = () => {
  useEffect(() => {
    const subscribedListener = ({ subscriptionId }) => {
      console.log('CleverPush subscriptionId:', subscriptionId);
    };

    const notificationReceivedListener = ({ notification }) => {
      console.log('CleverPush notification received:', JSON.stringify(notification));
    };

    const notificationOpenedListener = ({ notification }) => {
      console.log('CleverPush notification opened:', JSON.stringify(notification));
    };

    CleverPush.addListener('subscribed', subscribedListener);
    CleverPush.addListener('notificationReceived', notificationReceivedListener);
    CleverPush.addListener('notificationOpened', notificationOpenedListener);

    // set this to `false` to prevent the SDK from automatically subscribing the user on the first launch of the SDK
    const autoRegister = true;

    // You can get the Channel ID from your CleverPush channel settings
    CleverPush.init({
      channelId: "INSERT_YOUR_CHANNEL_ID",
      autoRegister: autoRegister
    });
  }, []);
};

Basic usage

Subscribe:

CleverPush.subscribe()
  .then(result => {
    console.log("Subscription ID:", result.subscriptionId);
  })
  .catch(error => {
    console.error("Subscription failed:", error);
  });

Unsubscribe:

CleverPush.unsubscribe();

Check if subscribed:

CleverPush.isSubscribed().then(({ isSubscribed }) => {
  
});

Get Subscription ID (after subscribe)

CleverPush.getSubscriptionId().then(({ subscriptionId }) => {
  
});

App Banners

This listener will be called when a button in an app banner is clicked.

const appBannerOpenedListener = (subscriptionId) => {
  console.log('CleverPush subscriptionId:', subscriptionId);
};

CleverPush.addListener('appBannerOpened', appBannerOpenedListener);

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:

JavaScript
CleverPush.trackPageView({ url: "https://..." })

Tags

JavaScript
// add subscription tag
CleverPush.addSubscriptionTag({ tagId: "" })
// remove subscription tag
CleverPush.removeSubscriptionTag({ tagId: "" })
// check subscription tag exists or not
const hasTag = await CleverPush.hasSubscriptionTag({ tagId: "" })
// get subscription tags
const tags = CleverPush.getSubscriptionTags()

Topics

JavaScript
// set setSubscription topics
CleverPush.setSubscriptionTopics({ topics: ["", ""] })
// get subscription topics
const topics = await CleverPush.getSubscriptionTopics()
// get available topics
const availableTopics = await CleverPush.getAvailableTopics()
// let the user choose his topics
CleverPush.showTopicsDialog()

Here is how the topics dialog looks like:

Topics Dialog iOS

Attributes

JavaScript
CleverPush.getAvailableAttributes()
CleverPush.getSubscriptionAttribute({attributeId:"ATTRIBUTE_ID"})
CleverPush.getSubscriptionAttributes()
// You can set string values like this
CleverPush.setSubscriptionAttribute({attributeId:"ATTRIBUTE_ID",value:"ATTRIBUTE_VALUE"})
// Please provide dates in the following format: YYYY-MM-DD
CleverPush.setSubscriptionAttribute({attributeId:"birthdate",value:"2020-06-21"})

Get received notifications:

JavaScript
const { notifications } = await CleverPush.getNotifications();

Development mode

You can enable the development mode to disable caches for app banners, so you always see the most up to date version.

JavaScript
CleverPush.enableDevelopmentMode()

Event Tracking

Events can be used to track conversions or trigger app banners.

JavaScript
CleverPush.trackEvent({eventName:"TRACK_EVENT_DATA"})

// track an event with custom properties
CleverPush.trackEvent({
eventName: "TRACK_EVENT_DATA",
properties: {
property1: 'value1',
property2: 'value2'
}
});

Authorization Token

You can set an authorization token that will be used in an API call.

JavaScript
CleverPush.setAuthorizerToken({token:"set_Authorizer_Token"})
← SetupChangelog →
  • Initialization
  • Basic usage
  • App Banners
  • Automatic Tag Assignment
  • Tags
  • Topics
  • Attributes
  • Get received notifications:
    • Development mode
  • Event Tracking
  • Authorization Token
SDKs
JavaScriptiOSAndroidCordovaCapacitorReact NativeXamarinFlutter
Community
TwitterFacebookGitHub
More
API ReferenceAPI OverviewBlogImprintPrivacy PolicyTerms of serviceGDPR
Copyright © 2025 CleverPush