feedbackfin
v1.0.3
웹 사이트의 어느 곳에서나 피드백을 수집하는 작은 위젯. 그게 다야.
웹 사이트 • 불화 • 트위터
위젯 ↗를 사용해보십시오
페이지에 위젯을로드하십시오.
< script src =" https://unpkg.com/feedbackfin@^1 " defer > </ script >WebHook URL을 설정하고 (다음 섹션에서 지침을 읽으십시오) 스크립트에서이를 구성하십시오. 선택적으로 웹 사이트에서 전달할 사용자 정보를 추가하십시오.
< script >
window . feedbackfin = { config : { } , ... window . feedbackfin } ;
window . feedbackfin . config . url = "https://rowy-hooks.run.app/wh/..." ;
window . feedbackfin . config . user = { name : "..." , email : "..." } ;
</ script >위젯을 열도록 버튼을 설정하십시오.
< button data-feedbackfin-button > Feedback </ button > 이것은 피드백을 보내는 URL입니다. 위젯은 피드백 데이터를 JSON 본체 로서이 URL에 대한 게시물 요청을 만듭니다.
Rowy의 로우 코드 플랫폼을 사용하여 Webhook URL을 쉽게 생성하고 협업 스프레드 시트 -UI에서 피드백 데이터를 관리하십시오. 선택적으로 Rowy의 내장 코드 편집기 (예 : Team Slack/Discord에서 알림, 이메일 후속 조치 등)를 사용하여 들어오는 피드백을 추가로 자동화 할 수 있습니다.
웹 사이트의 엔드 투 엔드 비디오 지침 ↗
옵션은 window.feedbackfin.config 객체에서 설정됩니다.
url피드백을 보내는 URL. 위젯은 데이터를 JSON 본체 로서이 URL에 대한 게시물 요청을 만듭니다. 위의 Webhook URL 설정을 참조하십시오.
user 양식의 일부로 내용이 제출되는 객체. 참고 : feedbackType , message 및 timestamp 는 예약 필드이며 양식 값으로 덮어 씁니다.
일반적으로:
window . feedbackfin . config . user = {
name : "..." ,
email : "..." ,
} ;disableErrorAlert 선택적으로 URL이 설정되어 있거나 요청이 실패한 경우 알림 표시를 비활성화합니다. 기본값 : disableErrorAlert: false
스크립트가로드되면 data-feedbackfin-button 속성이있는 모든 요소를 찾고 해당 요소 중 하나를 클릭하면 위젯이 열립니다.
< button data-feedbackfin-button > Feedback </ button > window.feedbackfin 객체는 open , close 및 submit 방법을 노출시켜 직접 호출 할 수 있습니다.
< button onclick =" window.feedbackfin.open(event) " > Feedback </ button > 위젯은 event.target 사용하여 플로팅 UI를 사용하여 위치를 계산합니다.
위젯은 닫는 </body> 태그가 열려있을 때 닫히고 페이지의 font-family 존중합니다. 스타일은 오프닝 <head> 태그 직전에 첨부되므로 사용자 정의가 우선합니다.
위젯의 모양을 다음과 같이 사용자 정의 할 수 있습니다.
CSS 변수를 우선합니다.
예를 들어 : 기본 버튼 색상을 사용하여 다음을 변경할 수 있습니다.
: root {
--feedbackfin-primary-color : # 007aff ;
--feedbackfin-primary-color-text : # fff ;
} CSS 규칙을 우선합니다. 클래스 이름은 feedbackfin__ 로 접두사입니다.
다크 모드는 다음 중 하나를 활성화합니다.
사용자는 시스템 테마를 어두운 곳으로 설정합니다
즉 @media (prefers-color-scheme: dark) 사실입니다
모든 부모 요소는 값에 값 dark data-theme 속성을 가지고 있습니다.
예 : <body data-theme="dark">
다크 모드 색상은 CSS 변수를 사용하여 설정됩니다. 다음과 같이 우선 할 수 있습니다.
@media ( prefers-color-scheme : dark) {
: root {
...;
}
}
[ data-theme *= "dark" ] {
...;
}이 위젯은 적절한 레이블과 함께 표준 HTML 양식 요소를 사용하여 구축됩니다.
포커스 트랩을 사용하여 열릴 때 위젯 내에 포커스가 갇혀 있습니다. 초점 트랩으로 다른 요소 내부 에이 위젯을 둥지에 둥지를 틀면주의하십시오.
Github Repo에서 문제가있는 피드백 핀에 기여하고 요청을 가져옵니다.
