NotifyVisitors

Cordova / Ionic

Integrate NotifyVisitors SDK to Cordova/Ionic

Cordova, formerly called as PhoneGap, is a platform to build native mobile applications using HTML5, CSS and JavaScript. It acts 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 (https://console.firebase.google.com/) 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

📘

Note:

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 BRAND_ID=5499 --variable SECRET_KEY=DA85CA5D75F7920320C8244AF91D448A --variable DEEPLINK_URL=www.myApp.com

👍

Info:

If you add 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 Capabilities Tab and turn the Background Modes switch on.To do that select the project from the Project Navigator then select the app target then select the Capabilities tab, and turn the Background Modes switch on.Select 3 check boxes (i.e. Location updates,Background fetch,Remote notifications).

  • Select Your App Target from your targets and
    If you are using Xcode 10 or below Goto Capabilities Tab Turn On Push Notifications and if 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 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 group.nv.com.example.myapp 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>
<key>NSExtension</key>
    <dict>
             <key>NSExtensionAttributes</key>
            <dict>
        <key>UNNotificationExtensionDefaultContentHidden</key>
              <true/>
        <key>UNNotificationExtensionInitialContentSizeRatio</key>
               <real>0.7</real>
        </dict>
        <key>NSExtensionPointIdentifier</key>
                 <string>com.apple.usernotifications.service</string>
        <key>NSExtensionPrincipalClass</key>
                <string>NotificationService</string>
    </dict>

OR

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 group.nv.com.example.myapp 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];
}

📘

Important:

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

declare var notifyvisitors: any;

Updated 20 days ago


What's Next

Tracking Events

Cordova / Ionic


Integrate NotifyVisitors SDK to Cordova/Ionic

Suggested Edits are limited on API Reference Pages

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