This documentation is for AppPresser 2 only. For AppPresser 3 docs, click here.

Adding PhoneGap Plugins

You can add your own PhoneGap plugins to add extra native features to your app, such as a barcode scanner, or local notifications. Note: this requires custom JavaScript, and issues are not supported by our team.

Adding the PhoneGap plugin to the config.xml

You can only use plugins supported by PhoneGap Build, such as the  ones in this list.

First, build your app with our build files, or the build form. You will need to edit the config.xml file, if you used the build form you can download unzip the provided folder, then find config.xml.

The first step is adding the needed plugin to your config.xml. Open the config.xml file in a text editor of your choice, and scroll down to where the other plugins are already listed. The xml tags for them will start with "gap:plugin". Add the tag for the new plugin you need to add there.

<gap:plugin name="cordova-plugin-barcodescanner" source="npm" />

*Note: many plugins switched to npm, please make sure to check the plugin documentation to make sure you are using the right syntax.

Adding the JavaScript to your App

Once the PhoneGap plugin has been added to the config.xml file, the next step is to start integrating the plugin into your application with Javascript. All PhoneGap plugins require some sort of JavaScript initialization.

Any Javascript that accesses PhoneGap APIs for native features needs to be loaded through the AppPresser settings page. Write your script, then upload the .js file on the AppPresser settings page.

Alternatively you can hard code your script in the index.html file, and add the script to your app files. If you do this, you will need to rebuild and resubmit your app to make any js changes.

Please note that this file will be loaded outside of the iframe that contains your WordPress site. You can access the PhoneGap API in the normal way following the plugin documentation, for example:

cordova.plugins.barcodeScanner.scan(
     function (result) {
         alert("We got a barcode\n" +
               "Result: " + result.text + "\n" +
               "Format: " + result.format + "\n" +
               "Cancelled: " + result.cancelled);
     }, 
     function (error) {
         alert("Scanning failed: " + error);
     }
);

However, to access elements inside of your WordPress site, you must first access the iframe. For example:

var wp = document.getElementById('myApp').contentWindow;
wp.document.getElementById("scan-barcode").addEventListener("click", function(){
    cordova.plugins.barcodeScanner.scan(
     function (result) {
         alert("We got a barcode\n" +
               "Result: " + result.text + "\n" +
               "Format: " + result.format + "\n" +
               "Cancelled: " + result.cancelled);
     }, 
     function (error) {
         alert("Scanning failed: " + error);
     }
  );
});

Here we added an event listener to listen for a click to a button in WordPress, and then we activated the PhoneGap API for the barcode scanner in the app. You must use the same methodology for your own custom PhoneGap plugins.

With these steps done, you should be well on your way to using the PhoneGap plugins as you need them to extend your app in new ways.