npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fabapp/feedback

v0.0.1

Published

**A tiny widget to collect feedback anywhere on your website. That’s it.**

Downloads

2

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

fabappfabapp

Keywords

Readme

Feedback Fin

A tiny widget to collect feedback anywhere on your website. That’s it.

npm version Package size

Try the widget ↗

Quick Start

  1. Load the widget on your page:

    <script src="https://unpkg.com/feedbackfin@^1" defer></script>

  2. Setup a webhook URL (read instructions in the next section) and configure that in the script. Optionally, add any user info that you want to pass in from the website:

    <script>
  window.feedbackfin = { config: {}, ...window.feedbackfin };
  window.feedbackfin.config.url = "https://rowy-hooks.run.app/wh/...";
  window.feedbackfin.config.user = { name: "...", email: "..." };
</script>

  3. Set a button to open the widget:

    <button data-feedbackfin-button>Feedback</button>

Setting up a webhook URL

This is the URL to send the feedback to. The widget will make a POST request to this URL with the feedback data as a JSON body.

Generate a webhook URL easily using Rowy's low-code platform and manage feedback data on a collaborative spreadsheet-UI. Optionally, you can further automate on incoming feedback with Rowy's built-in code-editor (eg: notify on team slack/discord, email follow up etc).

End-to-end video instructions on the website ↗

Options

Options are set in the window.feedbackfin.config object:

url

The URL to send the feedback to. The widget will make a POST request to this URL with the data as a JSON body. See Setting up a webhook URL above.

user

An object whose contents will be submitted as part of the form. Note: feedbackType, message, and timestamp are reserved fields and will be overwritten by form values.

Typically:

window.feedbackfin.config.user = {
  name: "...",
  email: "...",
};

disableErrorAlert

Optionally, disables displaying alerts if no URL is set or the request fails. Default: disableErrorAlert: false

How it works

When the script is loaded, it looks for any elements with the data-feedbackfin-button attribute and opens the widget when any of those elements are clicked.

<button data-feedbackfin-button>Feedback</button>

The window.feedbackfin object exposes the open, close, and submit methods, so they can also be called directly.

<button onclick="window.feedbackfin.open(event)">Feedback</button>

The widget uses event.target to compute its position using Floating UI.

Customization

The widget is attached just before the closing </body> tag when it is open and respects your page’s font-family. Styles are attached just before the opening <head> tag so your customizations take precedence.

You can customize the widget’s appearance by:

  • Overriding the CSS variables.

    For example, you can change the primary button color using:

    :root {
  --feedbackfin-primary-color: #007aff;
  --feedbackfin-primary-color-text: #fff;
}

  • Overriding the CSS rules. Class names are prefixed with feedbackfin__.

Dark mode

Dark mode is activated when either:

  • the user sets their system theme to dark
    i.e. @media (prefers-color-scheme: dark) is true, or

  • any parent element has a data-theme attribute whose value contains dark.
    Example: <body data-theme="dark">

Dark mode colors are set using CSS variables. You can override them with:

@media (prefers-color-scheme: dark) {
  :root {
    ...;
  }
}

[data-theme*="dark"] {
  ...;
}

Accessibility

This widget is built using standard HTML form elements with the appropriate labels.

Focus is trapped within the widget when it is open using focus-trap. Be careful when nesting this widget inside another element with a focus trap.

Contributing

Contribute to Feedback Fin with issues and pull requests in the GitHub repo.

Support