Feedback

Add a simple user feedback widget to any page.

On this page

Overview

Legacy Knockout pattern — kept here for reference only.

Please do not write new code like this. When you next work in this area, consider replacing this example with an equivalent Alpine / HTMX pattern (if appropriate), following the Knockout → Alpine (+HTMX) migration guide , or removing it when no longer needed.

HQ has a custom feedback component that uses Knockout Components. See feedback.js for full documentation.

Usage

The best way to learn how to use this component is to look at existing code to see how it's being used in HQ.

OData Feeds make use of the feedback component. In this use case the component is placed outside of a knockout model, so data-apply-bindings="false" is not required, as in example below.

A Working Example

The example below demonstrates the feedback component inside of a knockout model. The feedback url is taken from initialPageData which "reverses" the styleguide_submit_feedback_demo URL from the registerurl template tag.

HTML
<div id="feedback-example">
  <feedback
    data-apply-bindings="false"
    params="
      featureName: featureName,
      url: url
    "
  ></feedback>
</div>
JS
import $ from 'jquery';
import initialPageData from 'hqwebapp/js/initial_page_data';
import 'hqwebapp/js/components/bootstrap5/feedback';

$(function () {
    $("#feedback-example").koApplyBindings(function () {
        let self = {};

        self.featureName = 'My New Feature';

        self.url = initialPageData.reverse("styleguide_submit_feedback_demo");

        return self;
    });
});