🌈 Widget Customization

Personalize Widget Aesthetics for Seamless Use-Case Integration

Personalize the look and feel of your Userback widget. Style Customization lets you adjust colors, shapes, and other visual elements to align with your brand identity.

πŸ” Company Plan or higher required - Uses JavaScript SDK, more details here.


  • Userback Widget installed

Basic Usage

Widget Customization

Assign values to the widget_settings object for dynamic customization:

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"

Basic Use Cases

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 = ['', ''];
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 widget_settings Attributes

Here are the fully detailed attributes you can set:

Global Settings

  • language: Set widget language. Dynamic Language Details.
  • style: Set widget style.
  • position: Specify widget position.
  • trigger_type: Define how the widget is triggered.
  • main_button_text: Text on the main button.
  • main_button_background_colour: Background color of the main button.
  • main_button_text_colour: Text color of the main button.
  • device_type: Specify the device types.
  • help_link: URL for the help link.
  • help_title: Title for the help link.
  • help_message: Help message text.
  • logo: URL for custom logo.

Form Settings

General, bug, or feature request Feedback Form

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

Support & Further Reading

For more information, consult the JavaScript SDK Documentation.

Encounter issues? Please send a message to our support team.