Feedback Widget

Last updated on May 31, 2023

Feedback Widget

You can embed the feedback widget into your website or product to collect feedback. Using the widget, you'll be able to follow collected feedback on Producter and not skip any of them.

Below are instructions on how to embed Producter's feedback widget into your website or product.

1. Embed the script
Embed the following script link in the source HTML file of your website, inside the <head> or <body> tags, via the <script> tag.
Script link: https://producter-team.github.io/Widget-Builds/feedback/index.js

2. Create an element
Create an element with id producter-feedback-widget

3. Create a widget
When the page's DOM content is loaded, create a new ProducterFeedbackWidget Object with new keyword and pass your client id as a parameter.

4. Ready to go
That is it. Now you are ready to collect feedback 👌🏻

Examples:

Plain HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My awesome website</title>
		<script src="https://producter-team.github.io/Widget-Builds/feedback/index.js"></script>
  </head>
  <body>    
	<div id="producter-feedback-widget"></div>
    <script>
      window.addEventListener("DOMContentLoaded", () => {
        new ProducterFeedbackWidget("your-client-id");
      });
    </script>
  </body>
</html>

React.JS (Assuming you embed the script):

import React from 'react'

export default class HomePage extends React.Component {
  componentDidMount() {
	  new ProducterFeedbackWidget("your-client-id");
  }

  render() {
    return (
      <div id="producter-feedback-widget"></div>
    );
  }
}

Vue.JS (Assuming you embed the script):

<template>
  <div>
    <h1>My Awesome Website</h1>
		<div id="producter-feedback-widget"></div>
  </div>
</template>

<script>
export default {
  mounted() {
		new ProducterFeedbackWidget("your-client-id");
	}
};
</script>

<style scoped></style>

You can use the code below to embed widget via Google Tag Manager:

<script>
    var el = document.createElement("div");
    el.id = "producter-feedback-widget";
    document.body.appendChild(el);
    var script = document.createElement("script");
    script.src =
    "https://producter-team.github.io/Widget-Builds/feedback/index.js";
    document.body.appendChild(script);
    script.onload = function () {
      var clientId = "your-client-id";
      new ProducterFeedbackWidget(clientId);
    };
</script>

Just replace the "your-client-id" string (value of clientId variable) with your client id. That is all.

The feedback widget has several useful APIs for developers:

ProducterFeedbackWidgetInitialize - Dispatch global event when the widget is initialized
ProducterFeedbackWidgetStep1 - Dispatch global event when the widget is opened (Type selection step)
ProducterFeedbackWidgetStep2 - Dispatch global event when a user moves to the second step to enter the feedback details (Feedback info step)

For get selected type:

window.addEventListener("ProducterFeedbackWidgetStep2", function (e) {
  console.log("Step 2 (Feedback info)");
  console.log(`Selected type: ${e.detail.type}`);
});

ProducterFeedbackWidgetStep2FormError - Dispatch global event when an error occurs in the second step (Feedback info step)
ProducterFeedbackWidgetStep3 - Dispatch global event when a user moves to the third step to enter her/his contact info (User info step)
ProducterFeedbackWidgetStep3FormError - Dispatch global event when an error occurs in the third step (User info step)
ProducterFeedbackWidgetStep4 - Dispatch global event when a user moves to the fourth step (Success step)
ProducterFeedbackWidgetClose - Dispatch global event when the widget is closed

Here is how you can use APIs:

window.addEventListener("ProducterFeedbackWidgetStep1", function () {
  console.log("Step 1 (Type selection)");
});
window.addEventListener("ProducterFeedbackWidgetStep2", function (e) {
  console.log("Step 2 (Feedback info)");
  console.log(`Selected type: ${e.detail.type}`);
});
window.addEventListener("ProducterFeedbackWidgetStep2FormError", function () {
  console.log("Error on step 2 (Feedback info)");
});
window.addEventListener("ProducterFeedbackWidgetStep3", function () {
  console.log("Step 3 (User info)");
});
window.addEventListener("ProducterFeedbackWidgetStep3FormError", function () {
  console.log("Error on step 3 (User info)");
});
window.addEventListener("ProducterFeedbackWidgetStep4", function () {
  console.log("Step 4 (Success page)");
});
window.addEventListener("ProducterFeedbackWidgetClose", function () {
  console.log("Widget closed");
});
window.addEventListener("ProducterFeedbackWidgetInitialize", function () {
  console.log("Widget initialize");
});

💡

You can also use our APIs to override the style or text. If you'd like to use the feedback widget in your local language, this is the easiest solution for now.

If you have any questions, feel free to contact us: hello@producter.co

Feedback Widget

Examples:

Embed widget via Google Tag Manager

Feedback Widget API Reference