开源项目安装与配置指南：Feedback Fin

2025-04-17 01:04:24作者：尤峻淳Whitney

Feedback Fin 是一个轻量级的网页反馈收集工具，它允许用户在网站上任何位置收集反馈。该项目主要使用以下编程语言和技术：

编程语言：CSS、TypeScript、HTML 和 JavaScript
框架：无特定框架，使用了原生 JavaScript 和 CSS

关键技术和框架

Floating UI：用于计算和定位反馈窗口的位置。
focus-trap：在反馈窗口打开时，将焦点限制在窗口内。
CSS Variables：用于定制化反馈窗口的样式。

安装和配置准备工作

在开始安装 Feedback Fin 之前，请确保您的开发环境满足以下要求：

Node.js 环境
npm 或 yarn 包管理器

以下是详细的安装和配置步骤：

步骤 1：克隆项目仓库

首先，您需要从 GitHub 克隆项目仓库到本地环境。打开命令行界面，执行以下命令：

git clone https://github.com/rowyio/feedbackfin.git
cd feedbackfin

步骤 2：安装依赖

在项目根目录下，使用 npm 或 yarn 安装项目依赖：

npm install
# 或者
yarn install

步骤 3：配置 webhook URL

Feedback Fin 使用 webhook URL 来接收反馈数据。您需要生成一个 webhook URL，并将其配置到项目中。您可以使用 Rowy 的低代码平台轻松生成 webhook URL，并管理反馈数据。

步骤 4：配置用户信息（可选）

如果您希望在提交的反馈中包含用户信息，您可以在 window.feedbackfin.config 对象中配置用户信息：

window.feedbackfin.config.user = {
  name: "用户名",
  email: "用户邮箱"
};

步骤 5：在网页中添加 Feedback Fin 脚本

将以下脚本添加到您的网页中，确保在 <head> 标签结束之前添加：

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

步骤 6：设置反馈按钮

在网页中添加一个按钮，并使用 data-feedbackfin-button 属性：

<button data-feedbackfin-button>反馈</button>

步骤 7：配置 Feedback Fin

在 <script> 标签中配置 Feedback Fin，设置 webhook URL 和其他选项：

window.feedbackfin.config = {
  url: "https://rowy-hooks.run.app/wh/...",
  // 其他配置项
};

完成以上步骤后，您的 Feedback Fin 应该已经可以正常使用了。用户点击反馈按钮时，会打开反馈窗口，用户可以提交反馈信息，这些信息会通过 POST 请求发送到您配置的 webhook URL。

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

leetcode

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解