Cordova / Ionic

Integrate NotifyVisitors SDK to Cordova/Ionic

Cordova, formerly called PhoneGap, is a platform to build native mobile applications using HTML5, CSS, and JavaScript. It acts as a container for running a web application written in HTML, CSS, JS. Ionic uses Cordova to deploy native apps.

For Android

Here's how you can integrate the Notify Visitors SDK with your android app.

1. Configure google-service.json

1.1 Goto FCM ( and register your app.

1.2 Copy Sender Id and Legacy server key from Fcm.

1.3 Download the latest config JSON file (google-service.json) and paste it in your-project-root folder (yourProject/google-service.json).

1.4 Goto Notifyvisitors panel and from the App push menu goto Android inside configuration section from the left side menu panel and Paste Sender Id and Legacy server key.

2. Add Notifyvisitors Library to your Project

npm install cordova-plugin-notifyvisitors

3. Link library to Project



In below example Dummy Brand ID and Secret keys are shown. Kindly login to your NV_account to see your account credentials (i.e. your BrandID and your SecretKey)

ionic cordova plugin add cordova-plugin-notifyvisitors --variable NV_BRAND_ID=YOUR_BRAND_ID --variable NV_SECRET_KEY=YOUR_SECRET_KEY --variable

Example:- ionic cordova plugin add cordova-plugin-notifyvisitors --variable NV_BRAND_ID=5499 --variable NV_SECRET_KEY=DA85CA5D75F7920320C8244AF91D448A --variable



Note:- If you add the plugin correctly you will see the following in your CLI.

  • ionic-cordova-plugin-notifyvisitors successfully installed *

For iOS

Goto yourIonicProject/platforms/ios/ and Click on yourApp.xcworkspace and open project in XCode.

Goto Signing & Capabilities Tab and select Your App Target from your targets and

In the Signing & Capabilities Tab and click on + symbol on the left corner of this tab and add Push Notifications and if you are upgraded Xcode and Push Notifications was already added in previous version of Xcode then remove Push Notifications and add it again to configure push notification properly for the upgraded devices.

  • If you are using Xcode 11 then goto Signin & Capabilities Tab and click on + sign (i.e. + Capabilities) on the top left corner inside this tab and click on Push Notifications from the popup list shown on the + sign clicked.
  • In the Capabilities Tab Turn On App Groups and click on + sign and add a new app group give the group name as group.nv.{Your App Bundle Identifier}.

Example: if Your App’s Bundle Identifier is com.example.myapp then the App Group must be named as make sure this newly created app group must be checked (Turned on)

Notification Service Extension

  • Create a Notification Service Extension in your project. To do that, in Xcode, select File >> New >> Target and choose the Notification Service Extension template.
  • Define a name for the Notification Service Extension as given below :
  • Once the target is created, Activate the scheme for Extension when prompted for the same. After this your extension will be added to the project you will see a class with the extension name provided by you while creation and .plist file associated with it.
  • Now Open info.plist of your Notification Service Extension as source code (right click on info.plist and click on Open as >> Source code) and add the following code in it.
<key>App Bundle identifier</key>
  <string>”Your App’s Project Identifier Name”</string>


You can simply open the info.plist and add the keys which works as same as above for this.

  • Add a new row by going to the menu and clicking Editor > Add Item. Set a key App Bundle identifier as a String and set its value to your app’s main target Bundle Identifier.
  • Expand the NSExtension and add NSExtensionAttributes as Dictionary. Inside NSExtensionAttributes dictionary add a key UNNotificationExtensionDefaultContentHidden as Boolean its value should be YES and add another key UNNotificationExtensionInitialContentSizeRatio as Number its value should be 0.7 as the following preview.
  • Inside Xcode goto your App iOS Platform Project and inside YourAppProjectName folder goto Frameworks folder and select the notifyvisitors library file which is named as “libnotifyvisitors_x_x_x.a” where _x_x_x is the version of the library (example libnotifyvisitors_5_1_2.a) and and the selected library file for both of your App Main Target and Notification Service Extension Target which is created in this step. You can refer to the following screenshot.
  • Select Notification Service Extension Target from your target and
    If you are using Xcode 10 or below Goto Capabilities Tab Turn On Push Notifications and if here Push Notifications was already turned on then turn off Push Notifications and turn it on again to configure push notification properly.
  • If you are using Xcode 11 then goto Signin & Capabilities Tab and click on + sign (i.e. + Capabilities) on top left corner inside this tab and click on Push Notifications from the popup list shown on the + sign clicked.
  • Now inside Capabilities Tab Turn On App Groups and select the app group created previous step.

Example: We have previously created an app group named make sure this app group must be visible here and make it checked (Turned on).

  • Goto NotificationService.m file and update didReceiveRequestWithContentHandler delegate method as follows:

Import file
#import "notifyvisitors.h"

(void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
 self.contentHandler = contentHandler;
self.bestAttemptContent = [request.content mutableCopy];
[notifyvisitors LoadAttachmentWithRequest:request bestAttemptContent:self.bestAttemptContent withContentHandler:self.contentHandler];



Define a variable on your js page to use NotifyVisitors functions:

declare var notifyvisitors: any;

What’s Next