1.0.0 • Published 10 months ago

@blaze/customer-feedback v1.0.0

Weekly downloads
104
License
MIT
Repository
github
Last release
10 months ago

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 git@github.com: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 🔥

1.0.0

10 months ago

0.2.0

10 months ago

0.1.0

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago