@ fasterfixes/ widget (帮助)
这个 更快的图像 任何网站的反馈部件,不需要框架。 审查者在页面中注释元素,并向您的项目提交可视反馈. 它工作于WordPress,Webflow,静态HTML和任何框架所构建的应用程序. React, Vue, Angular 和 Svelte 应用程序也可以使用 @fasterfixes/react, (中文(简体) ), @fasterfixes/vue, (中文(简体) ), @fasterfixes/angular 财务报告和审定财务报表 @fasterfixes/svelte。 。 。 .
元件船没有框架运行时间,在开放的Shadow DOM内制造出,所以你的站点CSS并不影响它.
脚本标签
粘贴一个标记到您的站点, 用您的站点替换工程 ID :
<script
src="https://cdn.jsdelivr.net/npm/@fasterfixes/widget@1/dist/widget.iife.js"
data-project-id="proj_your_project_id"
defer
></script>
标签在 <head> 与 defer,在 <body>,或在该页面已加载后注入。 这个 @1 channel服务每1.x放出一次:在不编辑片段的情况下修正到达,在新的主要版本下只进行破解更改.
属性
| 属性 | 需求 | 说明 |
|---|---|---|
data-project-id | 对 | 你的项目ID。 没有它,脚本会加载但不会初始化部件. |
data-api-origin | 没有 | 快速Fixes API的出处. 默认为 https://www.faster-fixes.com。 。 。 . |
data-color | 没有 | 赤色相为相. 接受任何 CSS 颜色值。 默认为 #02527E。 。 。 . |
data-position | 没有 | 浮动按钮位置 。 默认为 bottom-right。 。 。 . |
data-capture-diagnostics | 没有 | 设定为 "false" 以禁用诊断道。 默认启用 . |
data-capture-recording | 没有 | 设定为 "false" 以禁用记录。 默认启用 . |
labels 无法通过属性设置 。 要设置它们,或通过完整的选项对象,请参见下方的"手册"初始化.
手动初始化
别管了 data-project-id 在不挂载部件的情况下装入脚本,然后调用 window.FasterFixes.init 自己,例如从一个框架的挂钩:
<script src="https://cdn.jsdelivr.net/npm/@fasterfixes/widget@1/dist/widget.iife.js"></script>
<script>
window.FasterFixes.init({
projectId: "proj_your_project_id",
labels: { submitButton: "Send" },
});
</script>
通话 init 当一个部件被挂载时, 首先会破坏上一个实例, 因此部件永远不会挂载两次 。 初始化后, window.FasterFixes.instance 持有当前实例.
无
用捆绑器安装软件包并导入 init包件装入带有类型Script的无害环境管理条目.
npm install @fasterfixes/widget
import { init } from "@fasterfixes/widget";
const widget = init({ projectId: "proj_your_project_id" });
window.FasterFixes 仅由脚本标记定义.
可见度
部件只为审查者挂载:必须有一个审查者符号(来自 ff_token URL参数,然后是本地存储)和工程必须启用部件. 公众访问者看不到任何东西,任何配置请求都会在没有符号的情况下发出.
选项
init 接受一个选项对象 :
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
projectId | string | 所需经费 | 你的项目公开身份证, proj_...。 。 。 . |
apiOrigin | string | https://www.faster-fixes.com | 快速Fixes API的出处. |
color | string | #02527E | 赤色相为相. |
position | WidgetPosition | bottom-right | 一个 bottom-right, (中文(简体) ), bottom-left, (中文(简体) ), top-right, (中文(简体) ), top-left, (中文(简体) ), middle-right, (中文(简体) ), middle-left。 。 。 . |
labels | Partial<Labels> | 英语默认值 | 替换任何可见或已宣布的字符串。 Oconduct 密钥保存它们的默认值 . |
captureDiagnostics | boolean | true | 记录控制台和网络历史 导致一个报告. |
captureRecording | boolean | true | 将最后一分记录在页面上,每回反馈一次。 见 记录。 。 。 . |
customMetadata | CustomMetadata | (() => CustomMetadata) | 无 | 随每一份反馈发送的密钥/值对 。 见下文. |
一个未知 position页:1 projectId 这不是一个非空字符串, a labels 非对象或对象的值 customMetadata 既非对象又非函数的值会阻止部件的上架。 开发建立日志 .
customMetadata 显示在您的团队,在代理 API 和镜像的问题, 从来没有给审查者。 通过一个对象, 或每个提交时调用的同步函数, 这样一个值, 如签名的用户 ID 保持当前 。 值是字符串、数字、布尔或 null。最多保存50个密钥,密钥被缩短为40个字符,值被缩短为500个,开发时会发出控制台警告。 一个从不屏蔽提交文件的函数:反馈在没有自定义元数据的情况下发送。 它是否发送 captureDiagnostics 或者说 captureRecording 开始.
实例
init 返回 a Widget其成员与 useFeedback 钩子 @fasterfixes/react,则 useFeedback 混凝土 @fasterfixes/vue, (中文(简体) ), injectFeedback 联 合 国 @fasterfixes/angular 财务报告和审定财务报表 getFeedback 联 合 国 @fasterfixes/svelte数字 :
| 成员 | 说明 |
|---|---|
show() | 后显示部件 hide()。 。 。 . |
hide() | 从页面中删除部件直至 show()。 。 。 . |
isVisible | true 当部件在页面上. |
startAnnotation() | 显示部件并进入注释模式. |
feedbackItems | 项目的反馈项目迄今已装入. |
togglePins() | 隐藏或显示页面上的每一针. |
showPins | true 并显示指针. |
subscribe(listener) | 电话 listener 之后 isVisible, (中文(简体) ), feedbackItems 或者说 showPins 变化。 返回删除听众的函数. |
destroy() | 删除部件、 停止诊断拖拉并恢复 console 财务报告和审定财务报表 fetch。 。 。 . |
<button type="button" onclick="window.FasterFixes.instance?.startAnnotation()">
Report an issue
</button>
subscribe 让你自己的UI在没有投票的情况下跟随Widget州. 听者不接受参数:读取实例中的值. destroy() 删除每个听众.
const widget = init({ projectId: "proj_your_project_id" });
const unsubscribe = widget.subscribe(() => {
counter.textContent = String(widget.feedbackItems.length);
});
标签
屏幕阅读器显示或宣布的每个字符串来自 labels。通过部分覆盖;省略的密钥保留其英语默认值. pinAriaLabel 是接收反馈注释摘录的函数 :
window.FasterFixes.init({
projectId: "proj_your_project_id",
labels: {
submitButton: "Envoyer",
cancelButton: "Annuler",
textareaPlaceholder: "Décrivez le problème...",
pinAriaLabel: (comment) => `Retour : ${comment}`,
},
});
密钥和默认值的完整列表在 自定义文件。 。 。 .
他们
主题 CSS 自定义属性的部件 [data-ff-widget] 主机 :
[data-ff-widget] {
--ff-background: #ffffff;
--ff-foreground: #18181b;
}
| 财产 | 默认 |
|---|---|
--ff-accent | 页:1 color 选项 |
--ff-background | #1c1c1c |
--ff-foreground | #e4e4e7 |
--ff-radius | 8px |
--ff-font-family | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif |
--ff-z-index | 2147483647 |
--ff-accent 设置从 color 选项,所以倾向于 color 来改变它。 接触更深的元素 ::part()数字 : button, (中文(简体) ), overlay, (中文(简体) ), popover, (中文(简体) ), textarea, (中文(简体) ), pin, (中文(简体) ), list 财务报告和审定财务报表 list-item。 。 。 .
[data-ff-widget]::part(button) {
box-shadow: none;
}
许可证
麻省理工学院