How to use Cordova based brandings

What is a branding

Basically its just a HTML app where you can use some native features of our apps.

Whats the difference with Cordova brandings?

A cordova branding is just like all other brandings. However you don’t need to import rogerthat.js to use our native app features.

Cordova has lots of plugins you can use, however by default we only package our RogerthatPlugin. If you need another plugin for your application please contact us.

All these plugins expose native api’s via a Javascript API. You have camera, contacts and so many other plugins allowing you to make more advanced applications.

Zip layout

  • cordova.html
  • css
  • app.css
  • js
  • app.js


Import Cordova: <script type="text/javascript" src="cordova.js"></script>

As you see in the zip layout you don’t need to provide this Javascript file.


A deviceready event will be triggered when Cordova is fully loaded.

var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
onDeviceReady: function() {
// Cordova is fully loaded


If your HTML app uses jquery it can be that jquery is ready loading before or after the deviceready event.


Source can be found at RogerthatPlugin.js



"name": "John Doe",
"account": "",
"avatarUrl": "",
"language": "pt_BR",
"data": {"username": "john", "password": "doe"}

  • retrieve the user name
  • rogerthat.user.account: retrieve the user account
  • rogerthat.user.avatarUrl: retrieve the user avatar
  • rogerthat.user.language: retrieve the user language. format: [ISO 639-1 language code]_[ISO 3166-2 region code]
  • retrieve the user data
  • rogerthat.user.put(): save all you have put in user data before

Example: = 'John'; = 'Doe';


"name": "Service identity 1",
"account": "",
"data": {"room": "chatroom1"}

  • retrieve service name
  • rogerthat.service.account: retrieve the service account
  • retrieve the service data
  • rogerthat.service.getBeaconsInReach(function(beacons){}): list beacons which are in reach


var name =;
var account = rogerthat.sevice.account;
var data =;
var room =;
}, function(error){
console.log('Error occurred while checking if beacon was in range... (Should never happen)');

beacons: array with beacon objects:
uuid: string which contains beacon universal unique identifier
major: string which contains the major of the beacon
minor: string which contains the minor of the beacon
tag: string which contains beacon tag
proximity: integer which defines the proximity:


"os": "ios",
"version": "7.1",
"appVersion": "1.0.150.I"

  • rogerthat.system.os: retrieve the system os, can be:
  • ios
  • android
  • unknown
  • rogerthat.system.version: retrieve system version (“unknown” if the version is not available)
  • rogerthat.system.appVersion: retrieve the version of the Rogerthat application of your system, the result will be “unknown” if the version is previous than the 1.0.150.I for iOS or 1.0.1002.A for Android
  • rogerthat.system.onBackendConnectivityChanged(function(result) {}): start receiving Internet connectivity changes.


var os = rogerthat.system.os;
var version = rogerthat.system.version;
var appVersion = rogerthat.system.appVersion;

rogerthat.callbacks.onBackendConnectivityChanged(function(isConnected) {
if (isConnected) {
console.log('We are now connected to the Internet');
} else {
console.log('There is no Internet connectivity');

rogerthat.system.onBackendConnectivityChanged(function(result) {
// From now on, we will receive updates on rogerthat.callbacks.onBackendConnectivityChanged
if (result.connected) {
console.log('We are connected to the Internet');
} else {
console.log('There is no Internet connectivity');


  •, function(){}, function(){}): open an existing conversation


var messageKey = '...'; // The message key. Could be a chat or a flow or any other message key.
var onSuccess = function() {
console.log("The message is successfully opened by the app");
var onError = function(error) {
// error: {"type": "MessageNotFound"}
console.log("The message is not found");
};, onSuccess, onError);

  •, onError, params): count news items for all or 1 service.

– service (optional): email of the service you want to count news items for

onSuccess result:
– {“count”: 123}

  •, onError, params): get the details of a news item.

– news_id: id of the news item

onSuccess result:
– NewsItem

  •, onError, params): list news items for all or 1 service.

– service (optional): email of the service you want to list news items for
– cursor (optional)
– limit (optional, default = 10): amount of news items that will be returned

onSuccess result:
– {“cursor”: “the cursor string”, “items”: [NewsItem]}

  • NewsItem:
    For the properties of a newsitem see the result of news.publish

  •, onSuccess, onError): open the camera to start scanning for QR codes.
  •, onSuccess, onError): close the camera to stop scanning for QR codes.

The cameraType parameter is unused for the moment but we added it the be conform with rogerthat.js

See rogerthat.callbacks for an example.

  •, payload, forcePin, onSuccess, onError): Sign the hash of the provided payload
  • message: An optional string containing the message which is shown at the moment the user is asked to enter his PIN code.
  • payload: A string containing the date that needs to be signed.
  • forcePin: Normally the user shouldn’t enter his PIN more than once in 5 minutes. Within these 5 minutes the payload is automatically signed. You can overrule this behavior by setting forcePin to true.
  • onSuccess: The method that will be called with the signed payload.
  • onError: The method that will be called when something went wrong.
  •, signature, onSuccess, onError): Verify a signature for a certain payload.


var message = 'To confirm this payment please enter your pin code';
var payload = JSON.stringify({amount: 500, fromUser: '', toUser: ''});

var onError = function(error) {
// error: {exception: ''}
};, payload, true, function(signature) {
console.log('The payload has been successfully signed.');, signature, function(result) {
// result: {valid: true}
if (result.valid) {
console.log('The signature has been successfully verified.');
} else {
console.log('The signature was not valid!');
}, onError);
}, onError);


  • rogerthat.features.base64URI: check if the user’s device supports loading images via base64 encoded data
  • rogerthat.features.backgroundSize: check if the user’s device supports CSS3
  • rogerthat.features.beacons: check if the user’s device has iBeacon support
  • rogerthat.features.callback: a callback which will be called after the availability of a feature has been verified

The result can take these values:


function alertAfterFeaturesChecked (feature) {
if (feature) {
var supported = rogerthat.features[feature] == FEATURE_SUPPORTED;
console.log('Feature ' + feature + ' is ' + (supported ? '' : 'not') + ' supported!');

if (rogerthat.features.base64URI === FEATURE_CHECKING
|| rogerthat.features.backgroundSize === FEATURE_CHECKING
|| rogerthat.features.beacons === FEATURE_CHECKING) {

// wait until all features are verified
rogerthat.features.callback = alertAfterFeaturesChecked;

alert('All necessary features are verified.')

rogerthat.callbacks.ready(function () {


  • rogerthat.ui.hideKeyboard(): Hides the android keyboard.


  • rogerthat.util.uuid(): Generate a random UUID.
  • rogerthat.util.playAudio(path, callback): Play a sound file which is located in the branding zip.
  • rogerthat.util.isConnectedToInternet(callback): Check the Internet connectivity.


var guid = rogerthat.util.uuid(); // Eg. 1d50c98d-9314-4e5d-8abc-be6373e027e2

rogerthat.util.playAudio('sounds/notification.mp3', function() {
console.log('You should be able to hear the sound right now');

rogerthat.util.isConnectedToInternet(function(result) {
console.log('Connected to Internet? ' + result.connected);
console.log('Connected to WiFi? ' + result.connectedToWifi);


  • rogerthat.callbacks.ready(function(){}): Rogerthat user and service data has been set
  • rogerthat.callbacks.userDataUpdated(function(){}): The app received an update and is updated.
  • rogerthat.callbacks.serviceDataUpdated(function(){}): The app received an update and is updated.
  • rogerthat.callbacks.onBackendConnectivityChanged(function(result){}): The device its Internet connectivity has changed.
  • rogerthat.callbacks.onBeaconInReach(function(beacon){}): The app detected a beacon.
  • rogerthat.callbacks.onBeaconOutOfReach(function(beacon){}): The user went out of reach of a beacon.
  • rogerthat.callbacks.qrCodeScanned(function(result){}): A QR code has been scanned as result of –
  • rogerthat.callbacks.newsReceived(function(ids){}): The app received a new news item or has received the full news item
  • rogerthat.callbacks.badgeUpdated(function(result){}): The count of unread news/messages/… has changed


console.log('You received a ready callback');

console.log('User data updated');

console.log('Service data updated');

// --- Internet ----------------------------

rogerthat.callbacks.onBackendConnectivityChanged(function(isConnected) {
console.log(isConnected ? 'We are connected to the Internet' : 'There is no Internet connectivity');

rogerthat.system.onBackendConnectivityChanged(function(result) {
// From now on, we will receive updates on rogerthat.callbacks.onBackendConnectivityChanged
console.log(result.connected ? 'We are connected to the Internet' : 'There is no Internet connectivity');

// --- Beacons ----------------------------



// --- Camera ----------------------------

var onCameraError = function(error) {
// error: {"exception": ""}
console.log("An error occurred,", error);
var onCameraStarted = function() {
console.log("The camera has been opened. We can soon expect the qrCodeScanned callback to be triggered.");
var onCameraStopped = function() {
console.log("The camera has been closed.");

rogerthat.callbacks.qrCodeScanned(function(result) {
This method is called twice. If the smartphone is connected to the Internet,
the app will request the details of the scanned QR code.

Example result for the first invocation:
status: 'resolving',
content: ''

Example result for the second invocation:
status: 'resolved',
content: '',
userDetails: {
'appId: "rogerthat",
'name': "Jane Doe",
'email': ""

Example result in case of error:
"status": "error",
"content": ""
console.log("The camera detected a QR code.", result);
});"back", onCameraStarted, onCameraError);

// --- News ----------------------------

  // array of news ids

// --- Badge ----------------------------

  // result.key
  // result.count


This method will result in triggering the system.api_call service callback, wether the user is online on invocation or not. If the user is not online on invocation, the api call will be executed as soon as the user is connected to the internet again. The result of the system.api_call service callback, is delivered via the resultReceived callback, documented below.

  •,params,tag): call the API
  • method: string with the call method
  • params: JSON string with the call params
  • tag: string with the call tag"add_to_calender",{"eventId": "5754903989321728"}, "tag1")
  • rogerthat.api.callbacks.resultReceived(function(method,result,error,tag){}): receive the call result
  • method: string with the call method
  • result: JSON string with the result of the call
  • error: string with code error
  • tag: string with the call tag
console.log(method); // "add_to_calendar"
console.log(result); // {"success": "true"}
console.log(error); // null
console.log(tag); // "tag1"