NAV

Installing Javascript SDK

Step 1. ­Add the code

<!-- begin Wootric code -->
<script type="text/javascript">
window.wootricSettings = {
  email:'nps@example.com',// TODO: The current logged in user's email address.
  created_at: 1234567890, // TODO: The current logged in user's sign-up date as a Unix timestamp.
  account_token: 'NPS-xxxxxxx'
};

</script>
...//The rest of the widget...
<!-- end Wootric code -->

Once you are signed up on the Wootric homepage, you will be taken directly to an installation page. If you’re a returning visitor, sign in at wootric.com and click on the “Settings" button near the top right of the page. Navigate to the Javascript Setup Guide and you will see a code snippet with a unique account_token for you to install.

Step 2. Customize the Survey

This is an important step! Customize your survey with the name of your product or company. As needed, make changes to our trusted survey and sampling defaults.

Step 3. View your Responses Live!

Comment out the line wootric_survey_immediately = true when you are ready for production. Alternatively, leave the line in the code for testing purposes or to survey the customer upon every visit to a specific page.

<!­­-- begin Wootric code ­­-->
<script type="text/javascript">
wootric_survey_immediately=true;//Fire immediately for testing
window.wootricSettings = {
  email:'nps@example.com', // TODO: The current user's email address.
  product_name: 'Wootric', // TODO: The name of the product or service.
  account_token: 'NPS­xxxxxxxx' };
</script>
....//The rest of the widget...
<!--­­ end Wootric code ­­-->

That’s it! Once your Wootric snippet is installed, eligible users will immediately start being surveyed. Depending on the traffic of your site, you could start to see responses within a few minutes. Responses will come in to your Wootric dash in real time.

No data yet?

We provide a link within your empty dashboard to a sample dash with dummy data.

I’d like to do some testing first. How do I ensure that the survey shows up on demand?

You can easily install Wootric in your development environment for testing. The snippet is already set up to show the survey immediately for testing purposes only.

Additional notes on Wootric snippet placement:

For sites with registered users:

If your site has registered users, we recommend that you paste the tag on only the pages that your logged in users will access to allow unique user identification.

For ecommerce sites:

If your site has a checkout flow, we recommend that you paste the tag on pages that won’t interrupt checkout. The most commonly used location is the transaction completion page.

Google Tag Manager:

You may use Google Tag Manager to install and manage the Wootric snippet.

Single Page App (SPA)

This example is for Angular.js Single Page Web App

Step 1. ­Create Factory

<!-- begin Wootric code -->
'use strict';

/**
 * @ngdoc service
 * @name wootricAngularApp.wootricFactory
 * @description
 * # wootricFactory
 * Factory in the wootricAngularApp.
 */
angular.module('wootricAngularApp')
.factory('wootricFactory', function () {
window.wootricSettings = {
    email: 'nps@example.com',// TODO: The current logged in user's email address.
      created_at: 1234567890, // TODO: The current logged in user's sign-up date as a 10 digit Unix timestamp.
      account_token: 'NPS-xxxxxxx' // This is your unique account token.
  };
  var i=new Image;i.src="//d8myem934l1zi.cloudfront.net/pixel.gif?account_token="+window.wootricSettings.account_token+"&email="+encodeURIComponent(window.wootricSettings.email)+"&created_at="+window.wootricSettings.created_at+"&url="+encodeURIComponent(window.location)+"&random="+Math.random()
  window.lightningjs||function(c){function g(b,d){d&&(d+=(/\?/.test(d)?"&":"?")+"lv=1");c[b]||function(){var i=window,h=document,j=b,g=h.location.protocol,l="load",k=0;(function(){function b(){a.P(l);a.w=1;c[j]("_load")}c[j]=function(){function m(){m.id=e;return c[j].apply(m,arguments)}var b,e=++k;b=this&&this!=i?this.id||0:0;(a.s=a.s||[]).push([e,b,arguments]);m.then=function(b,c,h){var d=a.fh[e]=a.fh[e]||[],j=a.eh[e]=a.eh[e]||[],f=a.ph[e]=a.ph[e]||[];b&&d.push(b);c&&j.push(c);h&&f.push(h);return m};return m};var a=c[j]._={};a.fh={};a.eh={};a.ph={};a.l=d?d.replace(/^\/\//,(g=="https:"?g:"http:")+"//"):d;a.p={0:+new Date};a.P=function(b){a.p[b]=new Date-a.p[0]};a.w&&b();i.addEventListener?i.addEventListener(l,b,!1):i.attachEvent("on"+l,b);var q=function(){function b(){return["<head></head><",c,' onload="var d=',n,";d.getElementsByTagName('head')[0].",d,"(d.",g,"('script')).",i,"='",a.l,"'\"></",c,">"].join("")}var c="body",e=h[c];if(!e)return setTimeout(q,100);a.P(1);var d="appendChild",g="createElement",i="src",k=h[g]("div"),l=k[d](h[g]("div")),f=h[g]("iframe"),n="document",p;k.style.display="none";e.insertBefore(k,e.firstChild).id=o+"-"+j;f.frameBorder="0";f.id=o+"-frame-"+j;/MSIE[ ]+6/.test(navigator.userAgent)&&(f[i]="javascript:false");f.allowTransparency="true";l[d](f);try{f.contentWindow[n].open()}catch(s){a.domain=h.domain,p="javascript:var d="+n+".open();d.domain='"+h.domain+"';",f[i]=p+"void(0);"}try{var r=f.contentWindow[n];r.write(b());r.close()}catch(t){f[i]=p+'d.write("'+b().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};a.l&&q()})()}();c[b].lv="1";return c[b]}var o="lightningjs",k=window[o]=g(o);k.require=g;k.modules=c}({});

    window.wootric = lightningjs.require("wootric", "//d27j601g4x0gd5.cloudfront.net/beacon.js");

    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");
    }
  }
});
</script>
<!-- end Wootric code -->

A way to load the Wootric snippet in a factory file so it can be fired in a single-page application with wootricFactory.run();

Step 2. Using the factory in your controller

'use strict';

/**
 * @ngdoc function
 * @name wootricAngularApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the wootricAngularApp
 */
angular.module('wootricAngularApp')
  .controller('MainCtrl', ['wootricFactory', function (wootricFactory) {
    wootricFactory.run();
  }]);

Optional: More control on survey display

Say you want to delay the “triggering” of Wootric until after user data is available.

  User.getData().then(function (wootricFactory) {
     wootricFactory.run();
  });
<!--­­ end Wootric code ­­-->

That’s it! Once your Wootric snippet is installed, eligible users will immediately start being surveyed. Depending on the traffic of your site, you could start to see responses within a few minutes. Responses will come in to your Wootric dash in real time.

Custom Messages

Wootric allows you to customize messaging within the survey. This is done with the customMessages object.

Note: This method is for advanced/custom installs only. Custom messages can be set within the Wootric settings page.

When the customMessages object is not specified, the default messages will be presented instead. By default, we present the following messages:

Full example


<!-- begin Wootric code -->
<script>
  window.wootricSettings = {
    email: 'nps@example.com', // TODO: The current user's email address.
    created_at: 1234567890, // TODO: The current user's sign­up date as a Unix timestamp.
    product_name: 'Wootric', // TODO: The name of the product or service.
    account_token: 'NPS­xxxxxxxx'
  };
  window.customMessages = {
      followup_question: "Custom message for all scores",
      followup_questions_list: {
          detractor_question: "Custom message for detractors",
          passive_question: "Custom message for passives",
          promoter_question: "Custom message for promoters"
      },
      placeholder_text: "Custom placeholder for all scores",
      placeholder_texts_list: {
        detractor_text: "Custom placeholder text for detractors",
        passive_text: "Custom placeholder text for passives",
        promoter_text: "Custom placeholder text for promoters"
      }
  };
</script>
<!--­­ end Wootric code --­­>

This example shows how the full ready Wootric snippet looks like with the custom messages specified.

For instance, if the followup_question and followup_questions_list properties are set at the same time, the messages from the followup_questions_list property will be shown.

followup_question

This will be shown after choosing the score regardless of its value.

window.customMessages = {
      followup_question: "Custom message for all scores",
  };

Defines the main follow-up question for all scores. Therefore, you will see the same question, regardless of which score you have chosen.

If this property is not specified, the default follow-up question will be shown instead.

followup_questions_list

An object that contains custom messages for detractors, passives and promoters.

There are the following properties that you may specify:

If you set e.g. one property of the three available, you will see the message for the property that you have specified. For the rest of the properties, the default message will be presented according to the score that the user has selected.


window.customMessages = {
    followup_questions_list: {
        detractor_question: "Custom message for detractors",
        passive_question: "Custom message for passives",
        promoter_question: "Custom message for promoters"
    }
};

detractor_question

Contains the message that will be presented to a detractor i.e. when a user selects the score from the range of 0-6.

window.customMessages = {
    followup_questions_list: {
        detractor_question: "Custom message for detractors",
    }
};

passive_question

Contains the message that will be presented to a passive i.e. when a user selects the score from the range of 7-8.

window.customMessages = {
    followup_questions_list: {
      passive_question: "Custom message for passives"
    }
};

promoter_question

Contains the message that will be presented to a promoter i.e. when a user selects the score from the range of 910.

window.customMessages = {
    followup_questions_list: {
      promoter_question: "Custom message for promoters"
    }
};

placeholder_text

Contains a placeholder text that is presented to the user after selecting the score.

If this property is not specified, the default placeholder will be shown instead.

window.customMessages = {
  placeholder_text: "Custom placeholder for all scores"
};

placeholder_texts_list

window.customMessages = {
  placeholder_texts_list: {
    detractor_text: "Custom placeholder text for detractors",
    passive_text: "Custom placeholder text for passives",
    promoter_text: "Custom placeholder text for promoters"
  }
};

An object that holds custom placeholder texts for detractors, passives and promoters.

Currently we offer the following properties for you to specify:

If you set e.g. one placeholder property of the three available, you will see the message for the property that you have specified. For the rest of the properties, the default placeholder text will be presented according to the score that the user has selected.

detractor_text

Contains a placeholder text presented to a detractor when the score value from the range of 0-6 has been selected.

window.customMessages = {
  placeholder_texts_list: {
    detractor_text: "Custom placeholder text for detractors"
  }
};

passive_text

Contains a placeholder text presented to a passive when the score value from the range of 7-8 has been selected.

window.customMessages = {
  placeholder_texts_list: {
    passive_text: "Custom placeholder text for passives"
  }
};

promoter_text

Contains a placeholder text presented to a promoter when the score value from the range of 9-10 has been selected.

window.customMessages = {
  placeholder_texts_list: {
    promoter_question: "Custom message for promoters"
  }
};

Modal Settings

There are three settings available for customizing the wootric modal: modal_theme, modal_footprint and modal_position. If no settings are provided the modal will default to “light normal bottom”, same if you skipped some of them - default value will be used for the missing ones.

wootric_recommend_target

window.wootricSettings = {
  wootric_recommend_target: "Custom Wootric recommend target text"
};

Contains a customized recommend target text that is the end part of the question. By default, when this property is not set, we display: “How likely are you to recommend Wootric to a friend or co-worker?”

Example:

If wootric_recommend_target = “your friends”, the question will result in: “How likely are you to recommend Wootric to your friends?”

<!­­ begin Wootric code ­­>
<script type="text/javascript">
window.wootricSettings = {
  email:'nps@example.com', // TODO: The current user's email address.
  created_at: 1234567890, // TODO: The current user's sign­up date as a Unix timestamp.
  product_name: 'Wootric', // TODO: The name of the product or service.
  account_token: 'NPS­xxxxxxxx',
  modal_theme: 'dark',
  properties:{
    role:'manager',// TODO: The current user's role.
    pricing_plan:'Enterprise'// TODO: The current user's pricing plan.
  }
};
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

Modal comes with two themes: light (default) and dark. To set the theme, provide modal_theme key-value in wootricSettings object.

Light: Compact Survey

Dark: Compact Survey

<!­­ begin Wootric code ­­>
<script type="text/javascript">
window.wootricSettings = {
  email:'nps@example.com', // TODO: The current user's email address.
  created_at: 1234567890, // TODO: The current user's sign­up date as a Unix timestamp.
  product_name: 'Wootric', // TODO: The name of the product or service.
  account_token: 'NPS­xxxxxxxx',
  modal_footprint: 'compact',
  properties:{
    role:'manager',// TODO: The current user's role.
    pricing_plan:'Enterprise'// TODO: The current user's pricing plan.
  }
};
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

You can set modal footprint to be compact for tighter spaces, spacious for huge spaces or normal which is default value. To set the footprint, provide modal_footprint key-value in wootricSettings object.

Compact: Compact Survey

Normal: Compact Survey

Spacious: Compact Survey

<!­­ begin Wootric code ­­>
<script type="text/javascript">
window.wootricSettings = {
  email:'nps@example.com', // TODO: The current user's email address.
  created_at: 1234567890, // TODO: The current user's sign­up date as a Unix timestamp.
  product_name: 'Wootric', // TODO: The name of the product or service.
  account_token: 'NPS­xxxxxxxx',
  modal_position: 'top',
  properties:{
    role:'manager',// TODO: The current user's role.
    pricing_plan:'Enterprise'// TODO: The current user's pricing plan.
  }
};
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

Modal position can be either top or bottom (default). To set the position, provide modal_position key-value in wootricSettings object.

window.wootricSettings = {
  email:'nps@example.com',// TODO: The current logged in user's email address.
  created_at: 1234567890, // TODO: The current logged in user's sign-up date as a Unix timestamp.
  account_token: 'NPS-xxxxxxx',
  aria: true
};

By default the modal is already accessible to screen readers.

This flag enables extra ARIA enhancements such as:

Custom Attributes

Wootric now allows you to send custom attributes about your customers. This will give you the power to segment your users into groups meaningful for your business and report Net Promoter Score analytics for each of those groups. For example, if you are an HR management tool, you may want to examine your NPS scores and feedback by employee type (i.e., manager, individual contributor). This may give you richer insight into your drivers of satisfaction, and whether these differ by user type.

Setting up Custom Attributes

Here’s an example of custom attributes set within the Wootric snippet:

<!­­ begin Wootric code ­­>
<script type="text/javascript">
window.wootricSettings = {
  email:'nps@example.com', // TODO: The current user's email address.
  created_at: 1234567890, // TODO: The current user's sign­up date as a Unix timestamp.
  product_name: 'Wootric', // TODO: The name of the product or service.
  account_token: 'NPS­xxxxxxxx',
  properties:{
    role:'manager',// TODO: The current user's role.
    pricing_plan:'Enterprise'// TODO: The current user's pricing plan.
    total_purchase_amount: 12 // Integer representing the user's total purchases with the key suffixed with "_amount"
    last_order_date: 1350466020 // Integer representing the date (Unix timestamp format) of the user's last order with the key suffixed with "_date"
  }
};
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

You add custom attributes within the Wootric JS code snippet as additional key/value pairs. Make sure to double check that your custom attribute keys always have a JSON­ valid value; this means quotes around strings and sending null as a value when there isn’t a value for that user.

Wootric currently supports Integers, Strings, and Unix formatted dates as values.

Integers must be suffixed with _amount and dates must be in Unix timestamp format and suffixed with _date. Examples are shown in the code to the right.

Keys cannot contain characters such as ‘$’, ‘.’ or the NULL character. Values cannot be nested hashes or arrays.

What Custom Attributes can I send to Wootric?

Send any custom attributes you like to Wootric, as long as they are in a string, integer, or date format. We find that the most meaningful attributes for Net Promoter Score segmentation include things like user type, price plan, engagement, and geography.

Is there a limit on the number of Custom Attributes I can send to Wootric?

At this time, we limit you to 5 attributes, with an additional limit of 5 values for each attribute.

What does this look like within Wootric?

The addition of custom attributes brings new functionality to your Wootric dashboard. Attributes show up on the left hand side of the dash, and can be selected to filter scores, trend graphs, and responses.

Custom Language Setting

<!--­­ begin Wootric code ­­-->
<script type="text/javascript">
wootric_first_survey=45;
window.wootricSettings = {
  email:'nps@example.com',
  created_at: 1234567890,
  product_name: 'Wootric',
  account_token: 'NPS­xxxxxxxx',
  language: 'XX' };
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

Wootric allows you to set a custom language for the survey modal. To set a custom language add language parameter to wootricSettings and pass appropriate language code.

Please be advised, that custom messages and/or placeholder, takes precedence over language settings.

Currently supported languages (with language codes):

Language Code
Arabic AR
Chinese (Simplified) CN_S
Chinese (Traditional) CN_T
Danish DA
Dutch NL
English EN
Finnish FI
French FR
German DE
German -informal DE_DE_X_INFORMAL
Hungarian HU
Indonesian ID
Italian IT
Japanese JA
Lithuanian LT
Norwegian NO
Polish PL
Portuguese PT
Romanina RO
Russian RU
Slovene SL
Spanish ES
Spanish - Mexico ES_MX
Swedish SV
Turkish TR
Vietnamese VN

Social Media Share Settings

<!--­­ begin Wootric code ­­-->
<script type="text/javascript">
wootric_first_survey=45;
window.wootricSettings = {
  email:'nps@example.com',
  created_at: 1234567890,
  product_name: 'Wootric',
  account_token: 'NPS­xxxxxxxx',
  twitter_account: 'twitteraccount',
  facebook_page: 'https://www.facebook.com/myPage',
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

Wootric allows you to display a social share screen for your promoters (9-10). In order to do that, you need to configure wootricSettings passing your product’s twitter_account and/or facebook_page. In addition, Twitter option will only display if promoter provided a feedback text.

If configured properly, Wootric will display a third page, right after promoter submits feedback, asking “Would you be willing to share your positive comments?” and allowing the end user to “like” your Facebook page or share a comment through the Twitter.

Custom Thank You Settings

<!--­­ begin Wootric code ­­-->
<script type="text/javascript">
wootric_first_survey=45;
window.wootricSettings = {
  email:'nps@example.com',
  created_at: 1234567890,
  product_name: 'Wootric',
  account_token: 'NPS­xxxxxxxx',
  twitter_account: 'twitteraccount',
  facebook_page: 'https://www.facebook.com/myPage'
...
};

var Wootric = {
  add_score_param_to_url: true,
  add_comment_param_to_url: true,
  thankYouMessages: {
    thank_you_setup: 'Thank you for all scores!',
    thank_you_setup_list: {
      detractor_thank_you_setup: 'Detractor thank you',
      passive_thank_you_setup: 'Passive thank you',
      promoter_thank_you_setup: 'Promoter thank you'
    }
  },
  thankYouLinks: {
    thank_you_link_text: 'Thank you text for all scores!',
    thank_you_link_url: 'Thank you url for all scores!',
    thank_you_link_text_list: {
      detractor_thank_you_link_text: 'Detractor thank you text',
      passive_thank_you_link_text: 'Passive thank you text',
      promoter_thank_you_link_text: 'Promoter thank you text',
    },
    thank_you_link_url_list: {
      detractor_thank_you_link_url: 'Detractor thank you url',
      passive_thank_you_link_url: 'Passive thank you url',
      promoter_thank_you_link_url: 'Promoter thank you url'
    }
  }
};
</script>
....//The rest of the widget...
<!--­­ end Wootric code --­­>

Wootric allows you also to display a customized button and ‘thank you’ message on a third page of the survey. This feature can be configured to work for all scores.

The Wootric.thankYouMessages object can contain thank_you_setup which is default value for every score if thank_you_setup_list is not provided, or a default value for keys missing in thank_you_setup_list

The Wootric.thankYouLinks object can contain thank_you_link_text and thank_you_link_url which are default text/url for every score if thank_you_link_text_list/thank_you_link_url_list are not provided or are missing appropriate keys.

If you are using your own url and would like to pass score and/or comment as a parameters, you can set add_score_param_to_url and/or add_comment_param_to_url keys to true. You can skip them entirely in Wootric var if they are not needed.

Parameters names are wootric_score for score and wootric_comment for comment.

If you have set for example "http://promoterurl.com/endpoint" as your url, setting both of the keys to true will result in the url being http://promoterurl.com/endpoint?wootric_score=SCORE&wootric_comment=COMMENT.

Custom Thank You Examples

<!-- Example 1 -->
var Wootric = {
  thankYouMessages: {
    thank_you_setup: 'Thank you for all scores!',
    thank_you_setup_list: {
      promoter_thank_you_setup: 'Promoter thank you'
    }
  }
};

Example 1

We have defined thank_you_setup and promoter_thank_you_setup in thank_you_setup_list. Therefore on a third page we will display ‘Thank you for all scores!’ text for passives and detractors, and ‘Promoter thank you’ for promoters.

<!-- Example 2 -->
var Wootric = {
  thankYouLinks: {
    thank_you_link_text: 'Thank you text for all scores!',
    thank_you_link_url: 'http://example.com',
    thank_you_link_text_list: {
      promoter_thank_you_link_text: 'Promoter thank you text'
    },
    thank_you_link_url_list: {
      detractor_thank_you_link_url: 'http://detractor.com'
    }
  }
};

Example 2

We have defined both thank_you_link_text and thank_you_link_url. We have also defined promoter_thank_you_link_text and detractor_thank_you_link_url in respectively thank_you_link_text_list and thank_you_link_url_list. This means that we are going to display button with text ‘Promoter thank you text’ which opens a ‘http://example.com’ url for a promoter. Passive is going to see button with text ‘Thank you text for all scores!’ and url ‘http://example.com’, while detractor’s button url would be ‘http://detractor.com’ with the same text as passive.

<!-- Example 3 -->
var Wootric = {
  // thankYouMessages not defined
  thankYouLinks: {
    thank_you_link_text: 'Thank you text for all scores!',
    thank_you_link_text_list: {
      detractor_thank_you_link_text: 'Detractor thank you text',
      passive_thank_you_link_text: 'Passive thank you text',
      promoter_thank_you_link_text: 'Promoter thank you text',
    },
    thank_you_link_url_list: {
      detractor_thank_you_link_url: 'Detractor thank you url',
    }
  }
};

Example 3

With this kind of setting we are missing the default thank_you_link_url and have only detractor url defined. With no Wootric.thankYouMessages object defined, we will display third page only for detractors if social media share (Facebook and Twitter) is also not defined (because there is no message to display and we can show complete button only for detractors).

Survey Types (BETA)

//Example 1
var wootricSettings = {
    account_token: 'NPS-XXXXXXX',
    survey_type: 'ces'
}
// => How easy was it for you to complete this task or action?

//Example 2
var wootricSettings = {
    account_token: 'NPS-XXXXXXX',
    survey_type: 'ces',
    product_name: 'tag your responses on the Wootric tags tab',
}

// => How easy was it for you to tag your responses on the Wootric tags tab?

//Example 3
var wootricSettings = {
    account_token: 'NPS-XXXXXXX',
    survey_type: 'csat',
    product_name: 'the Wootric tags tab'
}

// => How satisfied are you with the Wootric tags tab?

Wootric allows you to operate your web survey using 3 different type of metrics:

In order to get any of these working you should pass the survey_type key with the desired survey_type value inside the wootricSettings hash.

If no value is specified the NPS will be used as default.

Product name can be customized for CSAT and CES too.

Additional notes: