Website inline form: API examples

For a technical reference of the Javascript API, see Website inline form API.

Set the widget language

When initializing the JS API you can pass a language as ISO-639-1-Code.
Here are the codes for each supported language:

cs (Czech)
de (German)
en (English)
es (Spanish)
fr (French)
hr (Croatian)
hu (Hungarian)
it (Italian)
ja(Japanese)
ko (Korean)
lt (Lithuanian)
nl (Dutch)
pl (Polish)
pt (Portuguese)
ro (Romanian)
ru (Russian)
sk (Slovak)
sv (Slovenian)
tr (Turkish)
zh-CH (Chinese - traditional)
zh-TW (Chinese - simplified)

The desired code can be passed in form of the locale parameter:

<div id="widgetContainer"></div>
<script>
  window.onUsersnapLoad = function(api) {
  	api.init({
      mountNode: document.getElementById('widgetContainer'),
      locale: 'de',
    })
    window.Usersnap = api;
  }
  var script = document.createElement('script');
  script.defer = 1;
  script.src = 'https://widget.usersnap.com/embed/load/<PROJECT_API_KEY>?onload=onUsersnapLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

Passing custom data

You can pass any data you like in the form of custom data to the widget. This data will be stored with every submitted feedback item.

<div id="widgetContainer"></div>
<script>
  // Step 1: Initialize Usersnap 
  window.onUsersnapLoad = function(api) {
  	api.init({
      mountNode: document.getElementById('widgetContainer'),
    })
    
    // Step 2: Register an event handler on open
    api.on('open', function(event) {
      event.api.setValue('custom', {
        appVersion: '1.0.1',
        environment: 'production',
      })
    })
  }
  var script = document.createElement('script');
  script.defer = 1;
  script.src = 'https://widget.usersnap.com/embed/load/<PROJECT_API_KEY>?onload=onUsersnapLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

Pre-fill the widget with information

Apart from custom data you can also set the assignee, labels and the email of the user when opening the widget.

<div id="widgetContainer"></div>
<script>
  // Step 1: Initialize Usersnap 
  window.onUsersnapLoad = function(api) {
  	api.init({
      mountNode: document.getElementById('widgetContainer'),
    })
    
    // Step 2: Register an event handler on open
    api.on('open', function(event) {
      // Set Assignee. A User with this email has to exist in your Usersnap account
      event.api.setValue('assignee', '[email protected]')
      // Set labels
      event.api.setValue('labels', ['bug', 'critical'])
      // Set email
      event.api.setValue('visitor', '[email protected]')
    })
  }
  var script = document.createElement('script');
  script.defer = 1;
  script.src = 'https://widget.usersnap.com/embed/load/<PROJECT_API_KEY>?onload=onUsersnapLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

All those values will be visible and editable for the user if the respective field is available in the widget's form.

Edit form values before they are submitted

Sometimes you want to edit or add form values before the feedback is created. This can be done by hooking into the beforeSubmit event. The following example sets the assignee to "[email protected]" in case the label "bug" was selected.

<div id="widgetContainer"></div>
<script>
  // Step 1: Initialize Usersnap 
  window.onUsersnapLoad = function(api) {
  	api.init({
      mountNode: document.getElementById('widgetContainer'),
    })
    
    // Step 2: Register an event handler on beforeSubmit
    api.on('beforeSubmit', function(event) {
      // Step 3: Check if the label 'bug' was selected
      var labels = event.values.labels
      if (labels && labels.includes('bug')) {
        // Step 4: Set the assignee
        event.api.setValue('assignee', '[email protected]')
      }
  }
  var script = document.createElement('script');
  script.defer = 1;
  script.src = 'https://widget.usersnap.com/embed/load/<PROJECT_API_KEY>?onload=onUsersnapLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

Deactivate tracking of location and IP

If you don't want Usersnap to track the location (country, city) and IP of the users, you can deactivate this by initiating the snippet code with the parameter collectGeoLocation: 'none'.

<div id="widgetContainer"></div>
<script>
  window.onUsersnapLoad = function(api) {
    api.init({
      mountNode: document.getElementById('widgetContainer'),
    	collectGeoLocation: 'none',
    });
    window.Usersnap = api;
  }
  var script = document.createElement('script');
  script.defer = 1;
  script.src = 'https://widget.usersnap.com/embed/load/<PROJECT_API_KEY>?onload=onUsersnapLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

For any further questions, please contact our lovely customer success team.

Deactivate localStorage (Cookies)

The Usersnap feedback widgets do not use cookies, but we use the localStorage to store a few parameters. From a data privacy standpoint (GDPR), the localStorage is seen similar to cookies. If you want to deactivate the localStorage for your website or web application, you can do this with the following parameters.

Please, be aware that this has a few disadvantages for your users. For example, the email is not remembered for the next time, they give feedback. Also, the assignees are not stored.

<div id="widgetContainer"></div>
<script>
  window.onUsersnapLoad = function(api) {
    api.init({
      mountNode: document.getElementById('widgetContainer'),
    	useLocalStorage: false,
    });
    window.Usersnap = api;
  }
  var script = document.createElement('script');
  script.defer = 1;
  script.src = 'https://widget.usersnap.com/embed/load/<PROJECT_API_KEY>?onload=onUsersnapLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

Deactivate GoogleFonts

The Usersnap feedback widgets use GoogleFonts to make the widgets look nicer. If you don't want to use GoogleFonts, you can deactivate them by setting useSystemFonts to false.

<div id="widgetContainer"></div>
<script>
  window.onUsersnapLoad = function(api) {
    api.init({
      mountNode: document.getElementById('widgetContainer'),
    	useSystemFonts: false,
    });
    window.Usersnap = api;
  }
  var script = document.createElement('script');
  script.defer = 1;
  script.src = 'https://widget.usersnap.com/embed/load/<PROJECT_API_KEY>?onload=onUsersnapLoad';
  document.getElementsByTagName('head')[0].appendChild(script);
</script>