开源项目安装与配置指南：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操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

386

272

RuoYi-Vue3

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

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

Java