Widget Customization

Configure the appearance and behavior of the Userback widget using the widget_settings object.

📘
Before you start
The Userback widget must be installed on your website. See the Widget Installation Guide if you haven't done this yet.

Basic use cases

Full configuration example

Userback.widget_settings = {
  language: "en",
  position: "e",
  main_button_text: "Feedback",
  main_button_background_colour: "#3E3F3A",
  main_button_text_colour: "#FFFFFF",
  device_type: "desktop,tablet,phone",
  help_link: "https://www.example.com",
  help_title: "Contact Us",
  help_message: "Get in touch with us",
  logo: "//example.com/logo.jpg"
};

Change widget style and position

Userback.widget_settings = {
  style: "circle",
  position: "sw"
};

Modify main button appearance

Userback.widget_settings = {
  main_button_text: "Share Your Thoughts",
  main_button_background_colour: "#123456",
  main_button_text_colour: "#FFFFFF"
};

Advanced use cases

Conditional customization

Dynamically adjust settings based on user roles or device types:

if (userIsAdmin) {
  Userback.widget_settings = {
    main_button_background_colour: "#000000"
  };
}

Form customization

Define different settings for General Feedback, Bug Reports, and Feature Requests:

Userback.widget_settings = {
  form_settings: {
    general: {
      rating_type: "emoji",
      email_field: true,
      email_field_mandatory: true,
      comment_field: true,
      display_feedback: true,
      display_attachment: false,
      display_assignee: false,
      display_priority: false
    },
    bug: { /* your settings */ },
    feature_request: { /* your settings */ }
  }
};

Internal/external widget customization based on IP address or user ID

Define different settings for internal or external users based on IP address or user id.

// Sample IP addresses or user IDs of internal users
const internalIPs = ['192.168.1.1', '192.168.1.2'];
const internalUserIDs = ['user1', 'user2'];

const currentUserIP = getCurrentUserIP();  // Define your function to get the current user's IP
const currentUserId = getCurrentUserId();  // Define your function to get the current user's ID

if (internalIPs.includes(currentUserIP) || internalUserIDs.includes(currentUserId)) {
  // Internal Widget
  Userback.widget_settings = {
    main_button_background_colour: "#4CAF50",
    main_button_text: "Internal Feedback",
    form_settings: {
      general: {
        display_priority: true,
        display_assignee: true
      }
    }
  };
} else {
  // External Widget
  Userback.widget_settings = {
    main_button_background_colour: "#f44336",
    main_button_text: "Customer Feedback",
    form_settings: {
      general: {
        display_priority: false,
        display_assignee: false
      }
    }
  };
}

Available settings

Here are the fully detailed attributes you can set:

Global settings

Setting	Description
`language`	Set the widget language. See Dynamic Language for options.
`style`	Set the widget style.
`position`	Specify the widget position.
`trigger_type`	Define how the widget is triggered.
`main_button_text`	Text displayed on the main button.
`main_button_background_colour`	Background colour of the main button.
`main_button_text_colour`	Text colour of the main button.
`device_type`	Specify which device types show the widget.
`help_link`	URL for the help link.
`help_title`	Title for the help link.
`help_message`	Help message text.
`logo`	URL for a custom logo.

Form settings

Setting	Description
`rating_type`	Type of rating symbols used.
`rating_help_message`	Prompt message for the rating.
`name_field`	Show or hide the name field.
`name_field_mandatory`	Make the name field mandatory or optional.
`email_field`	Show or hide the email field.
`email_field_mandatory`	Make the email field mandatory or optional.
`title_field`	Show or hide the title field.
`title_field_mandatory`	Make the title field mandatory or optional.
`comment_field`	Show or hide the comment field.
`comment_field_mandatory`	Make the comment field mandatory or optional.
`display_category`	Show or hide the category option.
`display_feedback`	Show or hide the feedback option.
`display_attachment`	Show or hide the attachment option.
`display_assignee`	Show or hide the assignee option.
`display_priority`	Show or hide the priority option.

Need help? Visit the Help Center or use the chat bubble on this page to contact our support team.