Check out the example page for a demo of how it works. You can use the source of this page as boilerplate for your own widget.
The widget is easy to get up and running and is comprised of three key parts:
You may define whatever markup and styles you like as long as you attach the data-* attributes to the correct elements. We have provided a boilerplate example to help get you started!
To help with your design workflow, you can activate "design mode" using the window.Feedback.designMode JavaScript property. Look out for the comments around this in the example page source.
The included JavaScript magically adds all of the functionality to the widget. We have provided a script for you to use, but you are free to customise this further if you wish.
This is hosted by us and is where all of the feedback responses are sent to be stored.
You will need to set your API key using the window.Feedback.apiKey JavaScript property. Look out for the comments around this in the example page source.
The attributes are used to connect the markup to the functionality of the JavaScript.
Indicates the root element of the widget that everything else should be contained within.
No value is required.
Used to prevent the widget from flashing before JavaScript kicks in. Must be used in combination with the [data-cloak] {display: none !important;} CSS rule.
No value is required.
Indicates a section, often containing a question and answer(s), but also used to display a thank you message at the end.
The first section usually doesn't require a value, however subsequent sections should contain a unique value that you can reference using the data-next-section attribute on buttons in previous sections.
Indicates an element containing the question.
You may set a value that will be sent as the question in the response to the API. If you do not set a value, it will use the innerText of the element it is set on.
Indicates a closed answer button.
You may set a value that will be sent as the answer in the response to the API. If you do not set a value, it will use the innerText of the button it is set on.
Must be defined on the same button element as data-answer. Sent as the sentiment of the answer in the response to the API.
The attribute is optional, but if used, the value must be either "positive" or "negative".
Must be defined on the same button element as data-answer.
The value should match that of the data-section you wish to show next.
Indicates an open question button.
The value should be set to the ID of the input element the user will type their answer into, for example a textarea.
Open question fields, such as textarea, may use browser validation attributes like required.