A simple to use popup for collecting feedback from users about the sites that they are using. Currently it captures a screenshot of the page the user is browsing, the users OS and browser name + versions and also a personal message from the user. It then sends all data to an API.
More features to come!
To use the popup in your project run
npm install feedback-popup
Import the popup into your project, create a new instance of it and then call the WidgetButton method on it.
import FeedbackPopup from 'feedback-popup';
var newFeedbackPopup = new FeedbackPopup(widgetTitle, title, snapshotBody, placeholderText, emailEndpoint);
newFeedbackPopup.buttonWidget();
"Widget button title", "Header welcome message", "div-id-to-screenshot", "Text area placeholder text", "API URL"
Also make sure to add the html below to the component or page that you want the popup to appear on
<div class="feedback-popup js-feedback-popup" data-html2canvas-ignore="true">
<div class="js-feedback-popup-btn-show"></div>
<div class="js-feedback-popup-content"></div>
<div class="js-feedback-popup-confiramtion"></div>
</div>
If you want to use the styles included with this project be sure to import the main.scss file into your main stylesheet.
The popup now sends an object using axios to the URL of you chosen API. The object sent includes the below keys:
userPlatform
userFeedback
screenshotIncluded
userScreenshot
Clone this project to get involved
git@github.com:in-touch-dev/feedback-popup.git
Node.js >= v4 must be installed.
- Running
npm install
in the app's root directory will install everything you need for development.
npm start
will run the app's development server at http://localhost:3000, automatically reloading the page on every JS change.gulp
will proxy the server to http://localhost:3001, compile the SCSS and automatically reload the page on every SCSS change
-
node_modules/babel-cli/bin/babel.js src --out-dir lib
will transpile the js to es5 in the /lib folder. Then copy the styles folder into the /lib folderTo create a development build, set the
NODE_ENV
environment variable todevelopment
while running this command. -
npm run clean
will delete built resources.