How to send surveys from a web page - using javascript and webhooks

How to send surveys from a web page - using javascript and webhooks

You might have a requirement to send an NPS survey directly from an action on your website or software platform.
A few examples are when you need to:
  1. Send an email survey if a user clicks on a button on your website
  2. Send an email survey if a customer completes a step in your e-commerce checkout
  3. Link your software to SightMill even if your software does not support webhook APIs
  4. Send an email survey if any event happens on your website
One of the best ways to achieve any of these actions is to use link your website with SightMill using our webhooks API and calling this API from your website using some simple javascript. Here's how to accomplish this:

Both examples below need your project's unique webhook for incoming data - you will find this in the Settings/Webhooks menu and it's the first field.
  1. Toggle on the feature (first toggle switch at the top of the menu screen)
  2. Select and copy your unique webhooks link that is displayed in the Email Survey field
  3. (If you want to store any incoming email survey requests as new contacts in SightMill - so you can then send them regular surveys in the future - switch on the 'Store Email Webhooks Data' toggle.

Example 1:
Send an email NPS survey from your website using javascript
A simple first example calls the webhook using javascript that you can copy and paste into your web page
  1. <script type='text/javascript'>
  2. var data = {
  3. 'email': 'sc@test.com', //mandatory field replace email address with your variable
  4. 'firstname': 'Simon', //optional field replace Simon with your variable
  5. 'lastname': 'Smith', //optional field replace Smith with your variable
  6. 'tags': 'first-tag', //optional field replace first-tag with your variable
  7. 'segment': 'gold', //optional field replace gold with your variable
  8. 'id': 'sc@test.com' //mandatory field replace email address with your variable
  9. };
  10. var xhr = new XMLHttpRequest();
  11. xhr.open('POST', 'https://sightmill.com/hooks/XXXXX/survey/email');    //replce https link between double quotes with your unique webhook link from the first field in the Webhooks menu
  12. xhr.send(JSON.stringify(data));
  13. </script>
The data that is used to complete the email survey is in lines 3-8 above - we've included example text, but you should replace this with the variables from your software that includes this information for the user.

Example 2:
Send an email NPS survey if a user clicks on a button on your website
Paste the following javascript into your webpage.
  1. <script type='text/javascript'>
  2. function postDataToWebhook(){
  3. //url to your webhook which is the top field in the Webhooks menu
  4. var webHookUrl="https://sightmill.com/hooks/XXXXX/survey/email";   //replace the link between double quotes with your unique webhooks address
  5. var oReq = new XMLHttpRequest();
  6. var myJSONStr = payload={
  7. 'email': 'sc@test.com', //mandatory field replace email address with your variable
  8. 'firstname': 'Simon', //optional field replace Simon with your variable
  9. 'lastname': 'Smith', //optional field replace Smith with your variable
  10. 'tags': 'first-tag', //optional field replace first-tag with your variable
  11. 'segment': 'gold', //optional field replace gold with your variable
  12. 'id': 'sc@test.com' //mandatory field replace email address with your variable
  13. };

  15. document.write(myJSONStr);
  16. oReq.addEventListener("load", reqListener);
  17. oReq.open("POST", webHookUrl,true);
  18. oReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  19. oReq.send(JSON.stringify(myJSONStr));
  20. }

  22. function reqListener () {
  23. console.log(this.responseText);
  24. }
  25. </script>
You should populate the data with variables from your website - for example, if you are using Wordpress, add the user's email address wiith Wordpress' user information variables.

To send out the email survey, you need to call the new function created above, which you can do either add it to an event (such as a button click) or use another small script:
  1. <script type='text/javascript'>
  2. postDataToWebhook();
  3. </script>