Bubbl NPM | npm.io

Cordova Bubbl Plugin

Bubbl SDK for cordova cross platform app. It has been designed so that Bubbl can be dropped in quickly and with minimal fuss. No complex coding is required and the installation process should take no longer than a couple of minutes.

Install the plugin

$ cordova plugin add bubbl --save

Inside app.js file add the following code inside $ionicPlatform.ready

    var success = function(message) {
        alert(message);
    }

    var failure = function() {
        alert("Error calling Bubbl Plugin");
    }

    bubbl.setup('apiKey', success, failure);

The API key can be retrieved from Company information from Bubbl web campaign application.

Push Notifications

To enable push notifications we need to install phonegap-plugin-push

cordova plugin add https://github.com/phonegap/phonegap-plugin-push

Follow Instructions on how to install the plugin from:

https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/INSTALLATION.md

Before we initialize the plugin we need iOS push notification certificate and Google API Key

For iOS follow the instructions on how to get a certificate file and upload it to Bubbl:

http://support.bubbl.tech/ios-integration/apple-push-notification

For Android Push Notification follow the instructions:

1) head over to https://console.firebase.google.com and create a new project. 2) Navigate to project settings, and select the Cloud Messaging tab. 3) Copy The Legacy Server Key. 4) Head over to Bubbl dashboard, Under Company go to SDK Configuration -> Android Certificate, Copy and paste the Server Key and hit save.

Now we need to initialize the push notifications inside $ionicPlatform.ready handler

var push = PushNotification.init({
  android: {
      senderID: "12345679" ,// Sender ID from console.firebase.google.com project, Settings -> Cloud Messaging
      clearNotifications: "false",   //Optional. If true the app clears all pending notifications when it is closed.
      forceShow: "true" //Controls the behavior of the notification when app is in foreground. If true and app is in foreground, it will show a notification in the notification drawer
  },
  ios: {
      "alert": "true",
      "badge": "true",
      "sound": "true"
  },
});
 
push.on('registration', function(data) {
  bubbl.registerPushToken(data.registrationId);
});
 
push.on('notification', function(data) {
  bubbl.handlePushNotification(data);
});
 
push.on('error', function(e) {
  // An error has occured during push notifications initialization, e.message contains error message text
});

Custom Icon for Bubbl Notifications (Android Only)

To provide your app’s custom icons for the Bubbl notifications please add metadata info with corresponding resource ids in your manifest file, like in the example below:

<meta-data
   android:name="large_icon"
   android:resource="@drawable/bubbl"/>
 
<meta-data
   android:name="small_icon"
   android:resource="@drawable/bubbl"/>
 
<meta-data
   android:name="small_white_icon"
   android:resource="@drawable/bubbl_icon"/>

Large icon stands for the notification large icon, and the small icons stand for the notification small icons, where the small white icon is used when Android api version is greater than 20 and it should be suitable for icon without alpha channel. If you don’t supply these resources, Bubbl will use its defaults.

Testing and Debugging

There are several functions available for debugging and testing.

These are simple function calls and can be dropped into your code where appropriate

Debug View

Displays a trace of Bubbl's processing to confirm the firing of payloads and the activation of location management.

bubbl.displayDebugConsoleView();

Campaigns Debug View

Displays payloads that have been received by Bubbl SDK. Payloads are marked with green and red dots to indicate whether they have been shown to the app user

bubbl.displayDebugCampaignsView();

Map Debug View

Displays the route of the phone along with venues. This is used to confirm that venues have been set up correctly and payloads are firing as expected.

bubbl.displayDebugMapView();

To use this debug mode in android We need follow some steps:

1) head over to https://developers.google.com/maps/documentation/android-api/signup 2) click on Get a Key, Create project or select existing projects then press ENABLE API 3) Copy your API Key 4) In AndroidManifest.xml, add the following element as a child of the element, by inserting it just before the closing tag:

<meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY"/>