Getting Started

Add the follow code before the closing </head> tag.
<script>
  window.Metriculator={_k:"__DEMO_ACCOUNT_KEY__",_a:"__DEMO_ACCOUNT_TOKEN__",_c:{},_d:null,on:function(t,i){return(this._c[t]=this._c[t]||[]).push(i),this},init:function(t){return this._d=t,this}};

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//external.metriculator.com/main.js";
    js.async = true;
    js.crossOrigin = "anonymous";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'metriculator-script'));
</script>

Example

<html>
  <head>

    <title>Demo page</title>

    <script>
    window.Metriculator={_k:"__DEMO_ACCOUNT_KEY__",_a:"__DEMO_ACCOUNT_TOKEN__",_c:{},_d:null,on:function(t,i){return(this._c[t]=this._c[t]||[]).push(i),this},init:function(t){return this._d=t,this}};

    (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//external.metriculator.com/main.js";
      js.async = true;
      js.crossOrigin = "anonymous";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'metriculator-script'));
    </script>
  </head>

  <body>
    <!-- content... -->
  </body>
</html>

Showing Surveys

Logged-in user
NOTE: The signup_at parameter should be in UNIX timestamp. If it is not set, this parameter will be automatically set to the current date.

<script>
Metriculator.init({
  person: {
    email: "__REPLACE_WITH_CUSTOMER'S EMAIL__",
    signup_at: "__REPLACE_WITH_CUSTOMER'S SIGNUP DATE IN UNIX TIMESTAMP__"
  }
})
</script>
Anonymous surveys
<script>
Metriculator.init({
  anonymous: true
})
</script>

Options

Display (Colors, themes & survey type)
<script>
Metriculator.init({
  anonymous: true,
  settings: {
    survey_type: "slider-survey",
    color_scheme: "cs-indigo",
    theme: "theme-default"
  }
})
</script>

Survey types: "default-survey", "slider-survey"

Color schemes: "cs-gray", "cs-red", "cs-pink", "cs-grape", "cs-violet", "cs-indigo", "cs-blue", "cs-cyan", "cs-teal", "cs-green", "cs-teal", "cs-lime", "cs-yellow", "cs-orange"

Themes: "theme-default", "theme-dark", "theme-material", "theme-circle"

Customizing NPS question, open-ended question and button text
<script>
Metriculator.init({
  anonymous: true,
  settings: {
    nps_question: "How likely are you to recommend this product to a friend or colleague?",
    button_text: "Send",
    anchor_negative: "Not likely",
    anchor_positive: "Extremely likely",
    promoter_question: "What is the primary reason behind the ratings you provided?",
    passive_question: "What changes would we have to make for you to give us a higher rating?",
    detractor_question: "What changes would we have to make for you to give us a higher rating?",
    promoter_thank_you_message: "Thank you for your response and feedback!",
    passive_thank_you_message: "Thank you for your response and feedback!",
    detractor_thank_you_message: "Thank you for your response and feedback!"
  }
})
</script>

Events

Metriculator's survey widget emits the event at critical junctures like when the survey is shown, score is chosen by the customer etc. You can hook into these events for analytics purposes or reporting data back to your application.


Survey is shown
Metriculator.init({
  ...
})
.on("rendered", function() {
  console.log("SURVEY RENDERED...")
})

Score is chosen by the customer
Metriculator.init({
  ...
})
.on("score-set", function(score) {
  console.log("Customer has chosen the following score: ", score)
})

Comment has been entered by the customer
Metriculator.init({
  ...
})
.on("comment-set", function(comment) {
  console.log("Customer has entered the following comment: ", comment)
})

Comment has been entered by the customer
Metriculator.init({
  ...
})
.on("closed", function() {
  console.log("Survey has been closed by customer.");
})

Sending custom data for each customer

For each customer, you can send additional attributes as key/value pairs. Examples of this include the customer's plan, his/her total purchase value, purchase date, language preferences, unique tokens etc.

Metriculator supports 3 types of custom attributes -

  • Strings
  • Integer
  • Date/Time (UNIX timestamp)

Sending string values
Metriculator.init({
  traits: {
    plan: "Business Plan"
  }
})

Sending Integer values

To send integer values, add a _number suffix to the key.

Metriculator.init({
  traits: {
    secret_number: "42"
  }
})

Sending Date/Time values

To send date/time values, add either a _date, _datetime or _time suffix to the key.

Note: The date attribute's value must be in UNIX timestamp.
Metriculator.init({
  traits: {
    purchase_date: "1480324885"
  }
})

Example

Metriculator.init({
  person: {
    email: "__REPLACE_WITH_CUSTOMER'S EMAIL__",
    signup_at: "__REPLACE_WITH_CUSTOMER'S SIGNUP DATE IN UNIX TIMESTAMP__"
  },
  traits: {
    plan: "Enterprise",
    purchase_date: "1480324885",
    purchase_count_number: "3",
    total_purchase_number: "299"
  }
})

Embedded surveys

If you do not wish to show the surveys in the form of a popup, you can embed it directly on a page (for example, your invoice page or dashboard page). Here is the code required to do that.

Where you want the survey to be shown, add the following HTML code.

<div id="metriculator-survey-container"></div>

In the survey options, add embedded: "metriculator-survey-container". Note: the value for the key embedded is the ID of the HTML DIV tag that we added above. If you are using some other ID, also make the appropriate change here.

Metriculator.init({
  ...
  embedded: "metriculator-survey-container"
})          
Need help? Get in touch with our support team and we will he happy to help you.