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

type: function

The open method opens the Userback Widget interface in a modal dialog. If you specify a "mode", the widget will be opened into the mode directly.

The open method is to be used when the widget auto hide is turned on.

Available mode: "form", "capture", "video" and "feedback". (optional)

Userback.open(); // orUserback.open('capture');

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();

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

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
name_field : false, // boolean
name_field_mandatory : false, // boolean
email_field : true, // boolean
email_field_mandatory : true, // boolean
comment_field : true, // boolean
comment_field_mandatory : true, // boolean
display_category : false, // boolean
display_feedback : true, // boolean
display_attachment : false, // boolean
display_assignee : false, // boolean
display_priority : false, // boolean
main_button_text : "Feedback", // string
main_button_background_colour : "#3E3F3A", // hex colour
main_button_text_colour : "#FFFFFF", // hex colour
rating_type : "star", // string: "star", "emoji", "heart", "thumb"
rating_help_message : "How would you like to rate your experience?", // 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
};

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.categories = "Frontend, Backend, Database, User Interface";
Userback.widget_settings = {
main_button_text : "Feedback",
main_button_background_colour : "#3E3F3A",
main_button_text_colour : "#FFFFFF"
};
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?