How to use Wootric JS SDK with Ionic Framework

We've gotten quite a few requests from customers who've built their app using the Ionic Framework to test our web SDK with the framework. Here's how we did it.

Before we begin, ensure that you have Cordova and Ionic installed and have iOS and Android platforms enabled. If you haven't, begin from step 1. If you already have done so, move on to step 2.

1. Install Cordova and Ionic, and configure iOS and Android platforms

Run the following commands to install Cordova and Ionic:

$ sudo npm install -g cordova
$ sudo npm install -g ionic

Next, run the following commands to configure iOS and Android platforms:

$ ionic cordova platform add ios
$ ionic cordova platform add android

Or follow the Ionic installation guide here and skip "Create the project" and "Test it out".

2. Installing Wootric in your Ionic framework application with Javascript

There are two ways you can do this:

Insert the code snippet at the bottom of your index.html file
Insert the code in a factory file to fire the Wootric survey in your Single Page Application (SPA)

Insert the code snippet at the bottom of your index.html file

This is the simplest integration. Simply add the following code snippet at the bottom of your index.html file:

<!-- begin Wootric code -->
<script type="text/javascript">
  window.wootric_survey_immediately = true; // Shows survey immediately for testing purposes. TODO: Comment out for production.
  window.wootricSettings = {
    email: 'customer@example.com', // TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
    // external_id: 'abc123', // TODO: Reference field for external integrations only. Send it along with email. OPTIONAL
    created_at: 1234567890, // TODO: The current logged in user's sign-up date as a 10 digit Unix timestamp in seconds. OPTIONAL
    account_token: 'NPS-XXXXXXXX' // This is your unique account token.
  };
</script>
<script type="text/javascript" src="https://cdn.wootric.com/wootric-sdk.js"></script>
<script type="text/javascript">
  // This loads the Wootric survey
  window.wootric('run');
</script>
<!-- end Wootric code -->

Update the TODO’s and your account token at NPS-XXXXXXXX.

Here is an example of where you should insert the Wootric code snippet:

Insert the snippet in a factory file to fire the Wootric survey in your Single Page Application (SPA)

This is an alternative method to install Wootric if your Ionic app is an Single Page App (SPA).

First, create a factory file and insert the following code snippet in your factory file:

<!-- begin Wootric code -->
angular.module('wootricIonic', ['ionic'])

.factory('wootricFactory', function() {
  window.wootricSettings = {
    email: 'customer@example.com', // TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier. OPTIONAL
    created_at: 1234567890, //TODO: replace it with date when your customer signed up. OPTIONAL
    account_token: 'NPS-XXXXXXXX' // This is your unique account token.
  };

  return {
    run: function() {
      window.wootric_survey_immediately = true; // Shows survey immediately for testing purposes.  TODO: Comment out for production.
      window.wootric_no_surveyed_cookie = true; // Bypass cookie based throttle for testing purposes.  TODO: Comment out for production.
      window.wootric('run');
    }
  }
})

.controller('wootricIonicController', [
  'wootricFactory', function(wootricFactory) {
    wootricFactory.run();
  }
]);
<!-- end Wootric code -->

Like the first method, update the TODO’s and your account token at NPS-XXXXXXXX.

Here is an example of where you should insert the Wootric code snippet. We created a file named app.js and inserted the above code in it:

Next, insert the following code snippet between the <head></head> tag in your index.html file:

<script type="text/javascript" src="https://cdn.wootric.com/wootric-sdk.js"></script>

Here is an example of where you should insert the Wootric code snippet. We created a file named app.js and inserted the above code in it:

Now, reload your page and you will see the Wootric survey appear on your app.

3. Test your Ionic application

To test on a desktop browser, run the following command:

$ ionic serve

To test on an iOS simulator, run the following commands:

$ ionic cordova build ios
$ ionic cordova emulate ios

Or follow the Ionic testing guide here.

The screenshot below is what you should expect to see for the desktop browser testing (left) and iOS testing (right):

To test the app on Android, follow the Ionic testing guide under "Testing as a native app".

Examples

To further simplify your installation of Wootric with your Ionic application, we have created examples for the above two methods of installation. Feel free to download them for reference:

** The Wootric SDK + Ionic Framework example was built following the Ionic Framework guide.

If there is an error with the testing, please send an email to help@wootric.com