@blaze/customer-feedback

Customer Feedback

A framework free and themeable web component that captures an annotated screenshot and description of a web page.

Getting Started

Vanilla HTML

Add the following to the head of the document.

<script type="module" src="https://cdn.jsdelivr.net/npm/@blaze/customer-feedback/dist/customer-feedback/customer-feedback.esm.js"></script>

Place this web component at the bottom of the body element:

<customer-feedback></customer-feedback>

Under the hood customer-feedback uses it's position in HTML and a high z-index to ensure it remains on top of the content of your web page, however you may still experience layering issues if you have similar code that overlays all content.

React

If you'd like to use this component inside a React app firstly install the package:

npm i @blaze/customer-feedback

then add the following code to the start up routine (usually index.js):

import { defineCustomElements } from '@blaze/customer-feedback/loader';
defineCustomElements();

Further reading on integrating in other frameworks

https://stenciljs.com/docs/overview

Usage

Attributes

header - the header for the modal

instruction - the text that appears above the description box

screenshot - a boolean attribute to enable screen capture

<customer-feedback header="..." instruction="..." screenshot></customer-feedback>

Methods

show() - opens the modal

close() - resets the data and closes the modal

await document.querySelector('customer-feedback').show();

Events

feedback - event emitted with the description and screenshot data

document.querySelector('customer-feedback').addEventListener('feedback', function (e) {
  console.log(e.detail);
});

Run Locally

Copy and paste the following into a terminal and press enter.

git clone [e-mail]:BlazeSoftware/customer-feedback.git
cd customer-feedback
npm i
npm start

It's as simple as that.

Contributing

Get it running locally, make changes and raise a PR 🔥