Migration Guide for QA Feedback New Widget

This migration guide explains you in detail how to change your code to switch from Usersnap QA legacy widget to the QA new widget.
If you face any problems or have questions, please contact us any time at help@usersnap.com.

Configure Fields

You can configure which fields are displayed on your widget and whether they are required or optional. You can also define the fields' labels.

  • title
  • comment
  • email
  • assignee
  • label
<script>
  var _usersnapconfig = {
    
    commentBoxPlaceholder: 'Here could be a bug report template',
  
    emailBoxPlaceholder: 'E-Mail',
    emailBoxValue: 'user@mycompany.com',
  
    title: true,
    titleRequired: true,
    titlePlaceholder: 'Please enter your title here.',
    titleValue: 'Predefined Title',
  
    assignee: true,
    assigneeRequired: true,
    assigneePlaceholder: 'assignee@mycompany.com',
  
    label: true,
    labelRequired: true,
    labelPlaceholder: 'Feedback',
    labels: ['Feedback', 'Bug'],
    labelAllowCreate: false,
    labelMultiSelect: false,    
    
    addinfo: 'some additional info',
  };
   
  (function() { 
    var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; 
    s.src = '//api.usersnap.com/load/YOUR-API-KEY.js';
    var x = document.getElementsByTagName('script')[0]; 
    x.parentNode.insertBefore(s, x); }
  )();
</script>
<script>
  window.onUsersnapLoad = function(api) {
    api.init({
      fields: {
        comment: {
          defaultValue: 'Here could be a bug report template',
          label: 'Your message',
          /* labels can also be defined multilingual:
          label: {
            de: Deine E-Mail Adresse!',
            en: 'Your E-mail!',
          }
          */
          required: true,
          multiline: true,
        },
        email: {
          defaultValue: 'user@mycompany.com',
          label: 'E-Mail',
          required: true,
        },
        title: {
          defaultValue: 'Predefined Title',
          label: 'Title',
          required: true,
        },
        assignee: {
          label: 'Assignee',
          required: true,
        },
        label: {
          label: 'Label',
          required: true,
        },           
        customData: {
          defaultValue: 'user@mycompany.com',
        },
      },
    });
  }
</script>
<script src="//api.usersnap.com/load/YOUR-API-KEY.js?onload=onUsersnapLoad" async></script>

Hide Fields

<script>
  var _usersnapconfig = {
    label: false,
    assignee: false,
    commentBox: false,
  };
</script>
<script>
  api.init({
    fields: {
      comment: null,
      email: null,
      assignee: null, // default
      title: null, // default
      label: null, // default
    },
  });
</script>

Configure Tools

With the legacy widget, it was possible to configure which tools are displayed in the toolbox. This is not possible anymore with the new widget. The toolbox will always contain the same tools.

  • Comment
  • Pen
  • Arrow
  • Blackout

Custom information to your screens ("addInfo")

With the legacy widget, you use the "addInfo" object to append specific additional information (such as the currently logged in user on your website) to your report.

With the new widget, this is done with "customData".

<script>
  var _usersnapconfig = {
    loadHandler: function() {
      UserSnap.on("beforeSend", function(obj) {
        obj.addInfo = {
          Company: 'Usersnap',
          User: 'Sophia'
        };
      });
    }
  };
</script>
<script>
  window.onUsersnapLoad = function(api) {
    api.on('open', function(event) {
      event.api.setValue('customData', JSON.stringify({
        Company: 'Usersnap',
        User: 'Sophia'
      }));
    });
    api.init();
    window.Usersnap = api;
  }
</script>

Console Recorder

<script>
  var _usersnapconfig = {
    consoleRecorder: true,
    consoleRecorderCfg: {
      maxMessages: 500, // default 50
      maxExceptions: 500, // default 50
      logObjectSize: 20480 // default 2048 bytes
    },
  };
</script>
<script>
  // simple
  api.init({
    consoleRecorder: true,
  });

  // with configuration
  api.init({
    consoleRecorder: {
      maxMessages: 500, // default 50
      maxExceptions: 500, // default 50
      logObjectSize: 20480 // default 2048 bytes
    },
  });
</script>

Language

<script>
  var _usersnapconfig = {
    lang: 'de',
  };
</script>
<script>
  api.init({
      locale: 'de', //'en'
  });
</script>

The new widget supports the following languages:

English - 'en'
German - 'de'
French - 'fr'
Spanish - 'es'
Swedish - 'sv'
Dutch - 'nl'
Turkish - 'tr'

Color

<script>
  var _usersnapconfig = {
    theme: 'Usersnap Blue',
  };
</script>
<script>
  api.init({
    colors: {
      primary: '#AFFE23',
      secondary: '#AFFEEE',
    },
  });
</script>

Shortcut

<script>
  var _usersnapconfig = {
    shortcut: true,
  };
</script>
<script>
  api.init({
    shortcut: {
      // values are directly compared with the javascript event
      // availability depending on what the browser delivers
      key: 'u', // compare case insensitive!
      ctrlKey: true,
      altKey: false,
    },
  });
</script>

Hide the feedback button

<script>
  var _usersnapconfig = {
    mode: 'report',
  };
</script>
<script>
  api.init({
    button: null,
  });
</script>

Events

<script>
  UserSnap.on(load, function() {})
  UserSnap.on(beforeOpen, function() {})
  UserSnap.on(beforeSend, function(obj) {})
  UserSnap.on(afterSend, function(reportId) {})
  UserSnap.on(beforeScreenshot, function() {})
  UserSnap.on(error, function(errorMessage, errorCode) {})
  UserSnap.on(cancel, function(event) {})
</script>
<script>
  api.on("load", function(event) {});
  
  api.on("open", function(event) {
    event.api.setValue('email', 'john@doe.me (mailto:'john@doe.me)');
    event.api.setValue('comment', 'As a … I want to …');
    event.api.setValue('customData', 'whatever you want');
  });
  
  api.on("submit", function(event) {
    // event.sessionId - a temporary id, not the actual screen number  
    //With the sessionId, you can create a URL where you can later find the finished feedback
    var url = "https://usersnap.com/a/#/company/pollscreen/" + event.sessionId;
  })
  
  api.on("close", function(event) {
    // event.isCancel; - true, if the widget is closed without submitting a screen
  })
</script>

Open/Close the widget

<script>
  UserSnap.start(); //opens the widget
  
  //in the legacy widget it is not possible to close the widget via the API  
</script>
<script>
  api.open();  //opens the widget
  api.close(); //closes the widget
</script>

Updated 5 months ago

Migration Guide for QA Feedback New Widget


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.