WebEngage Feedback JavaScript Callbacks – Building A Realtime Customer Feedback Listening Post On Your Website

Note: Breaking news first – we recently released our enhanced integration code which now supports a wide variety of JavaScript callbacks. If you are using WebEngage on your website, we recommend upgrading to the new code.

If you are new to WebEngage, take a quick live demo first – you’d love it!


This is how our new integration code looks like:
<script id="_webengage_script_tag" type="text/javascript">
  var window._weq = _weq || {};
  _weq["webengage.licenseCode"] = "_LICENSE_CODE_";
 
  (function(d){
    var _we = d.createElement('script');
    _we.type = 'text/javascript';
    _we.async = true;
    _we.src = (d.location.protocol == "https:" ? 
               "//ssl.widgets.webengage.com" : "//cdn.widgets.webengage.com"
              ) + "/js/widget/webengage-min-v-4.0.js";
 
    var _sNode = d.getElementById('_webengage_script_tag');
    _sNode.parentNode.insertBefore(_we, _sNode);
  })(document);
</script>

In the previous version of our code, initialization of the widget was wrapped inside an onReady method. We kept it as such because of the async nature of our code plus a need to efficiently manage separate configuration and settings for all the three products from a central place once all the remote resources finished loading.

We got rid of that functional approach in this version. Instead, we created a JSON data structure with predefined keys that you can use to assign properties and attach callbacks for different events in context of each of the products.

JS API awesomeness in Feedback product

Our Feedback product allows you to create and configure a simple feedback tab for your website. You can add custom fields (radio buttons, text-boxes, dropdowns, file upload fields etc), create logical fields which are category dependent, build email routing rules and do a whole lot more from the WebEngage Dashboard. You can read more about the our feedback product here. The product is an out-of-the-box solution for your website. However, with the new integration code, you can add some interesting callbacks on your website to enhance the experience of users submitting feedback on your website. Underneath are a few samples.

UI level customizations
You can choose the default alignment, colors etc of the feedback tab for your website from the dashboard itself. However, let’s say on one of the sections on your site, you’d like to change these properties. Now, with the JS API, it is possible to do so. Just add these two lines to your integration code script on those pages/sections and see the magic unfold ..
_weq["webengage.feedback.alignment"] = "left";          // or, "right"
_weq["webengage.feedback.backgroundColor"] = "#cc9900"; // hex code

Form data handling and callbacks
With the new API, not only can you pre-populate the feedback form for your signed-in users, but you can also set field level attributes (like make mandatory, move to hidden field, reduce category options etc). So, let’s say, on a certain section of your site, you only wanted to display 2 categories in the dropdown instead of all, you can do that with formData property as shown below.

The new integration code (API) also provides hooks for onOpen, onClose, onSubmit events thereby giving you the ability to implement awesome user experiences for customers submitting feedback on your website. So, you can now build something like this – offer a discount coupon code to users submitting feedback on the order confirmation page! Sounds cool? Read through the code and comments below:

/* use this initialization property to pre-populate feedback form w/ user data */
_weq['webengage.feedback.formData'] = [ 
  // array of JSON's for each field in the form
  {
    // pre-populate the field with label "email"
    name: "Email",
 
    // set the value here
    value: "john@doe.com",
 
    // change the rendering mode of this field. other options are:
    // "readOnly" - to prevent the user from changing the value passed above
    // "hidden" - to pass as hidden variable without showing the
    // field to the user
    mode: "default"
  }, 
 
  {
    // pre-populate the field with label "Category"
    name: "Category",
 
    // overrides what was set in the dashboard
    isMandatory: true,
 
    // if you intend to show only a few categories on a certain page
    // use this property to specify the options you'd like to show
    // these categories should be pre-created in the dashboard first
    options: [
      "Billing Inquiries", 
      "Sales/pricing related query",
      "General feedback"
    ]
  }
];
 
/* Callback events - the fun begins now! */
_weq['webengage.enableCallbacks'] = true;
 
// So, let's say you wanted your webpage to be made "aware" everytime
// any user is either opening the feedback tab or submitting a feedback.
// Underneath is how you can attach your callback functions to these events
 
/* Feedback onOpen callback - triggers everytime a user clicks on the */
/* feedback tab on your website */
_weq['webengage.feedback.onOpen'] = function(data){
  $("feedback-open-data-display").html(function(){
    return 
      "User data: [" + 
        "IP - " + data.activity.ip + 
        "Browser - " + data.activity.browser + 
                     "(" + data.activity.browserVersion + ")" +
        "Platform - " + data.activity.platform +
      "]" +
      "Page data: [" +
        "URL - " + data.activity.pageUrl +
        "Title - " + data.activity.pageTitle +
      "]";
  });
};
 
/* Feedback onSubmit callback - triggers everytime a user submits */
/* feedback via the tab on your website */
_weq['webengage.feedback.onSubmit'] = function(data){
  // in addition to the data that you get inside the onOpen method
  // you also get data submitted for each of the form fields 
  // along with user's geography etc.
 
  // iterating over the fields and fetching user submitted data
  var userResponse = {};
  for(var i=0; i<data.fields.length; i++){
    var field = data.fields[i];
 
    // while building your feedback form, you can choose any
    // kind of field - textbox, commentbox, radio-buttons,
    // checkboxes, file upload etc.
    // depending upon the field type, we wrap the responses
    // submitted by a user with corresponding "class" key in
    // the field object. E.g. for the auto screenshot field, when
    // used by a user, we provide a URL of the corresponding image
    // thumbnail that gets generated. for a detailed response
    // object view, click the "view response data object" button below
 
    var fieldValue = "";
 
    // auto screenshot field
    if(field.value["@class"] == "snapshot"){
      fieldValue = field.value.thumbnailImageUrl;
    }
 
    // fields which produce a list of responses
    // e.g. multi-select, checkboxes etc
    else if(field.value["@class"] == "list"){
      fieldValue = field.value.values.join(", ");
    }
 
    // fields which produce a textual response
    // e.g. textboxes, comment boxes etc
    else if(field.value.text){
      fieldValue = field.value.text
    }
 
    userResponse[field.label] = fieldValue;
  }
 
  /* Additional Information */
 
  // along with data submitted in the feedback form, our
  // API also shares with you additional details to
  // provide more context around the submission.
 
  var feedbackSubmittedOn = new Date(data.activity.activityOn);
  var userIP = (data.activity.ip ? data.activity.ip : "Unknown");
  var estimatedUserGeo = data.activity.city + " (" + data.activity.country + ")";
  var browser = data.activity.browser + " (" + data.activity.browserVersion + ")";
  var platform = data.activity.platform;
  var URLofThePageOnWhichFeedbackWasSubmitted = data.activity.pageUrl;
  var titleOfThePageOnWhichFeedbackWasSubmitted = data.activity.pageTitle;
 
  /* Taking action on user submitted data */
 
  // at this point, you know what data did the user submit
  // for each of the fields - name, email, category etc.
  // so, e.g. if you wanted to redirect the user submitting a sales
  // inquiry to your lead generation page and pass his/her
  // email to that page, here's how you can do it:
 
  if(userResponse["Category"] == "Sales/pricing related query"){
    // automatically close the feedback tab first!
    webengage.feedback.clear();
 
    // now, redirect the user to the lead page
    window.location.href = 
      "http://mywebsite.com/lead.html?email=" + userResponse["Email"];
  }
};

Wait, that’s not all! You can do much more with other options in the API. Check out the documentation for JavaScript API (version 4.0) – docs.webengage.com along with our REST API’s and Webhooks.

Hope you liked what you saw. Do share your feedback on the API. Here’s a similar post on how you can use our JavaScript API with the Notification product to build a realtime conversion engine for your website.

Stay tuned. We love you!


Leave a Reply

Your email address will not be published. Required fields are marked *