🌈 Widget Customization

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.

Prerequisites

• 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 = ['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 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.