The Javascript API lets you programmatically customize various aspects of the Userback Widget in just a few lines of code.

Embed the Widget

Add the following code to the web page where you would like the widget to be displayed. Replace the "[your widget token]" with your widget token which can be found here in your Widget Settings.

<script>
window.Userback = window.Userback || {};
Userback.access_token = '[your widget token]';
(function(d) {
var s = d.createElement('script');s.async = true;
s.src = 'https://static.userback.io/widget/v1.js';
(d.head || d.body).appendChild(s);
})(document);
</script>

API Methods

show()

type: function

The show method displays the Userback Widget.

Userback.show();

hide()

type: function

The hide method closes the Userback Widget interface and hides it.

Userback.hide();

open(feedback_type, destination)

type: function

The open method opens the Userback Widget interface in a modal dialog. The open method is to be used when the widget is set to be hidden by default.

feedback_type (optional): "general", "bug", "feature_request"
destination (optional): 'screenshot', 'video' and 'form'

Userback.open(); // open the widget
Userback.open('general'); // open the "General Feedback" option
Userback.open('bug'); // open the "Report a Bug" option
Userback.open('feature_request'); // open the "Feature Request" option
Userback.open('bug', 'screenshot'); // open the screenshot tool and then direct to the bug form
Userback.open('bug', 'video'); // open the video recording tool and then direct to the bug form
Userback.open('feature_request', 'form'); // open the "Feature Request" form directly

close()

type: function

The close method closes the Userback Widget interface in exactly the same way as when the widget close button is clicked.

Userback.close();

destroy()

type: function

The destroy method removes the Userback widget from the page and removes the SDK that is loaded on the page.

Userback.destroy();

email

type: string

Set the default email. The email field will be auto-filled in the feedback form.

Userback.email = "example@example.com";

name

type: string

Set the default name. The name field will be auto-filled in the feedback form.

Userback.name = "Someone";

categories

type: string

Set categories in a comma-separated string

Userback.categories = "Frontend,Backend,Database,User Interface";

priority

type: string

Set the default priority.

Userback.priority = "Urgent"; // Urgent, High, Neutral, Low

custom_data

type: object

Add custom data to feedback. The data will be displayed on the feedback page.

Note: Use custom_data when the JavaScript SDK hasn't been added. Otherwise, use setData() (see below).

window.Userback = window.Userback || {};

// Set custom data
Userback.custom_data = { account_id: 7, name: "John" };

// Add JavaScript SDK
Userback.access_token = '[your widget token]';
(function(d) {
var s = d.createElement('script');s.async = true;
s.src = 'https://static.userback.io/widget/v1.js';
(d.head || d.body).appendChild(s);
})(document);

setData()

type: function

// Add JavaScript SDK
window.Userback = window.Userback || {};
Userback.access_token = '[your widget token]';
(function(d) {
var s = d.createElement('script');s.async = true;
s.src = 'https://static.userback.io/widget/v1.js';
(d.head || d.body).appendChild(s);
})(document);

// Reset custom data on button click
document.querySelector('#btn').addEventListener('click', () => {
Userback.setData({
account_id: 7,
name: "John"
};
});

Reset custom data after JavaScript SDK is loaded.

Note: This method can be called multiple times after the JavaScript SDK has been loaded.

Alternatively, using console log to bind custom data with feedback.

on_load

type: function

The on_load event is triggered when the Feedback button is loaded

Userback.on_load = function() {
    alert("load");
};

on_open

type: function

The on_open event is triggered when the Feedback button is clicked

Userback.on_open = function() {
    alert("open");
};

on_close

type: function

The on_close event is triggered when the Close button is clicked

Userback.on_close = function() {
    alert("close");
};

before_send

type: function

The before_send event is triggered when the Send button is clicked

Userback.before_send = function() {
    alert("before send");
};

after_send

type: function

The after_send event is triggered after feedback has been submitted to Userback

Userback.after_send = function(data) {
console.log(data);
// example:
load_type: 'web',
domain: 'www.example.com',
page: 'https://www.example.com',
email: 'example@example.com',
description: 'this is great!',
update_reporter: true,
comments: [...],
attachment_file_name: '',
user_agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36',
window_x: 364,
window_y: 765,
resolution_x: 1920,
resolution_y: 1080,
categories: '',
custom_data: {},
rating: 'start_5'
};

is_live

type: boolean

Use this option to override the auto detection of Live vs Local website. Use this option when your website is hosted in a local environment but all of your website assets (images, CSS files, JavaScript files...etc) are all hosted publicly.

<script>
window.Userback = window.Userback || {};
Userback.access_token = '[your widget token]';
Userback.is_live = true;
(function(d) {
var s = d.createElement('script');s.async = true;
s.src = 'https://static.userback.io/widget/v1.js';
(d.head || d.body).appendChild(s);
})(document);
</script>

widget_settings

type: object

Set widget options dynamically

Userback.widget_settings = {
language : "en", // string: "en", "fr", "zh-CN"...etc
style : "text", // string: "text", "circle"
position : "e", // string: "e", "w", "se", "sw"
trigger_type : "page_load", // string: page_load, api, url_match
device_type : "desktop,tablet,phone", // string
help_link : "https://www.example.com", // string
help_title : "Contact Us", // string
help_message : "Get in touch with us", // string
logo : '//example.com/logo.jpg', // string
form_settings: {
// General Feedback Form
general: {
rating_type : "star", // "star", "emoji", "heart", "thumb"
rating_help_message : "How would you like to rate your experience?",
name_field : false,
name_field_mandatory : false,
email_field : true,
email_field_mandatory : true,
title_field : false,
title_field_mandatory : false,
comment_field : true,
comment_field_mandatory : true,
display_category : false,
display_feedback : true,
display_attachment : false,
display_assignee : false,
display_priority : false,
main_button_text : "Feedback",
main_button_background_colour : "#3E3F3A",
main_button_text_colour : "#FFFFFF"
},
// Bug Form
bug: {...},
// Feature Request Form
feature_request: {...}
}
};

Language Code:

en:

English

da:

Danish

de:

German

es:

Spanish

et:

Estonia

fi:

Finnish

fr:

French

hu:

Hungarian

it:

Italian

jp:

Japanese

ko:

Korean

lt:

Lithuanian

pl:

Polish

pt:

Portuguese

pt-br

Portuguese (Brazil)

nl:

Dutch

no:

Norwegian

ro:

Romanian

ru:

Russian

sk:

Slovak

sv:

Swedish

zh-CN:

Simplified Chinese

zh-TW:

Traditional Chinese

Examples:

<script>
Userback = window.Userback || {};
Userback.access_token = '[your widget token]';

Userback.email = "example@example.com";
Userback.widget_settings = {
language: "fr"
};
Userback.custom_data = {
a_id: 2,
name: "John"
};

(function(d) {
var s = d.createElement('script');s.async = true;
s.src = 'https://static.userback.io/widget/v1.js';
(d.head || d.body).appendChild(s);
})(document);
</script>

Related Articles

Did this answer your question?