How do I add Custom Data to Feedback?

Elevate your feedback collection strategy by using setData() or custom_data to attach custom data to feedback submitted through the Userback widget on your website or app.

This enhances your interaction with the widget, allowing you to provide additional context that can be invaluable for analysis. It's an effective way to enrich the feedback you collect, offering a more comprehensive view of the user experience. 

This feature is available only on select plans and requires the JavaScript SDK. For comprehensive technical guidance, please refer to our developer docs.

Using the setData() Method

To attach custom data to the Userback Widget, you can use the setData() method. This is especially useful for providing additional context that Userback can't automatically detect.

Userback.setData({
  key: value,
  another_key: another_value
});

• The setData() method can be called multiple times, overwriting previous data.
• Key names must not contain unsupported characters like periods, dollar signs, or special characters. Unsupported characters will be replaced with underscores.
• Data values must be JSON strings, numbers, or booleans. Objects, nested hashes, and array data formats are not supported.

Using the custom_data Method

Use custom_data when the JavaScript SDK hasn't been added to your project, especially when using the basic widget embed option. This allows you to still attach custom data to the feedback, which will be displayed on the feedback page.

Userback.custom_data = {
  key: value,
  another_key: another_value
};

Practical Examples

Here are some examples to demonstrate the setData() and custom_data methods:

Attach App Information using setData()

Userback.setData({
  app_version: "1.2.3",
  feature_flag: true
});

Provide Page Context using setData()

Userback.setData({
  page_url: window.location.href,
  section: "Pricing"
});

Comprehensive Example using custom_data

Userback.custom_data = {
  // Feature Flags: Know which features are enabled for the user
  'feature_A_enabled': true,
  'feature_B_enabled': false,

  // A/B Test Groups: Correlate feedback with specific test groups
  'AB_test_group': 'Group_A',

  // Performance Metrics: Capture page load and API response times
  'page_load_time': 3.2, // in seconds
  'api_response_time': 120, // in milliseconds

  // Application State: Pinpoint the current page and module
  'current_page': 'Dashboard',
  'current_module': 'Analytics',

  // Custom Metrics: Include interaction rate or scroll depth
  'interaction_rate': 70, // percentage
  'scroll_depth': '75%', // percentage of page scrolled

  // Additional Context: Capture UI mode and language settings
  'is_dark_mode': true,
  'language': 'en-US'
};