This library helps you build a feedback form similar to Google.
This library uses html2canvas built by [Niklas von Hertzen himself. The entire screenshot is created on the client side using vanilla Javascript. The rendered image may not be 100% accurate but should be fine for sending feedback.
Supports almost all ECMAScript 5 compliant browsers.
<script src="https://cdn.jsdelivr.net/npm/shotify/lib/index.min.js"></script>
npm install shotify
// or
yarn add shotify
import Shotify from 'shotify';
const shotify = new Shotify({
previewContainer: this.$refs.previewContainer as HTMLElement
});
shotify.init();
Below are the options you can pass during booting up of Shotify.
Option | Type | Required | Description |
---|---|---|---|
previewContainer | HTMLDivElement | Yes | HTML Div element that act has placeholder for preview canvas |
dialogContainer | HTMLElement | No | Modal container that holds your feedback form |
update | Function | No | Callback event listeners |
classes | Object | No | Class names to be applied for elements controlled by shotify |
html2canvasOptions | Object | No | html2canvas library options |
Below are the classes that points maps to the UI elements controlled by Shotify
- highlight - Highlighted sections
- blackout - Blackouted sections
- toolbar - Wrapper class for toolbar containing highlight and blackout options
- toolbar_action - Wrapper class for actions used inside toolbar
- toolbar_action_highlight - Highlight toolbar action class
- toolbar_action_blackout - Blackout toolbar action class
- toolbar_action_done - Done toolbar action class
- grippy - Class used for grippy section of the toolbar
- grippy_icon - Grippy icon for the toolbar
- remove_action - Wrapper class for remove action
- remove_icon - Class for remove icon of the user marked sections
- alert - Alert Info class used for showing toolbar alert message
Below are the events that are emitted during the life cycle of the Shotify
- processing
- Shotify is preparing the feedback screenshot
- You can use this event to show loaders as this may take a while. Depends on the complexity of the page
- drawing
- User has selected to highlight/blackout areas of the page
- You can use this event to hide the feedback modal for example.
- processed
- Feedback image is ready to be used.
- You can use the payload image data being passed to be sent to the server.
-
init()
Mounts the Shotify. Shotify will create DOMs needed to capture the user feedback screenshot.
-
destroy()
Will destroy Shotify instance. Though modern browsers will remove listeners attached to deleted DOMs it is a best practice to call this method when your feedback component is being destroyed so that there is no memory leak
Shotify includes Typescript definitions.
Inspired by Niklas von Hertzen
MIT © Bharathvaj Ganesan