feedbackfin
v1.0.3
วิดเจ็ตเล็ก ๆ เพื่อรวบรวมข้อเสนอแนะทุกที่บนเว็บไซต์ของคุณ แค่นั้นแค่นั้น
เว็บไซต์ • Discord • Twitter
ลองใช้วิดเจ็ต↗
โหลดวิดเจ็ตในหน้าของคุณ:
< script src =" https://unpkg.com/feedbackfin@^1 " defer > </ script >ตั้งค่า URL WebHook (อ่านคำแนะนำในส่วนถัดไป) และกำหนดค่าในสคริปต์ เลือกเพิ่มข้อมูลผู้ใช้ใด ๆ ที่คุณต้องการส่งผ่านจากเว็บไซต์:
< 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 ในการส่งข้อเสนอแนะไปยัง วิดเจ็ตจะทำการร้องขอโพสต์ไปยัง URL นี้พร้อมข้อมูลข้อเสนอแนะเป็นร่างกาย JSON
สร้าง URL WebHook ได้อย่างง่ายดายโดยใช้แพลตฟอร์มรหัสต่ำของ Rowy และจัดการข้อมูลข้อเสนอแนะเกี่ยวกับสเปรดชีตที่ทำงานร่วมกัน ทางเลือกคุณสามารถทำข้อเสนอแนะที่เข้ามาโดยอัตโนมัติด้วยรหัสรหัสในตัวของ Rowy (เช่น: แจ้งให้ทราบเกี่ยวกับ Team Slack/Discord การติดตามอีเมล ฯลฯ )
คำแนะนำวิดีโอแบบครบวงจรบนเว็บไซต์↗
ตัวเลือกถูกตั้งค่าใน window.feedbackfin.config Object:
urlURL เพื่อส่งข้อเสนอแนะไปยัง วิดเจ็ตจะทำการร้องขอโพสต์ไปยัง URL นี้พร้อมข้อมูลเป็นตัว JSON ดูการตั้งค่า URL WebHook ด้านบน
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) เป็นจริงหรือ
องค์ประกอบหลักใด ๆ มีแอตทริบิวต์ data-theme ที่มีค่ามี dark
ตัวอย่าง: <body data-theme="dark">
สีโหมดมืดถูกตั้งค่าโดยใช้ตัวแปร CSS คุณสามารถแทนที่พวกเขาด้วย:
@media ( prefers-color-scheme : dark) {
: root {
...;
}
}
[ data-theme *= "dark" ] {
...;
}วิดเจ็ตนี้สร้างขึ้นโดยใช้องค์ประกอบแบบฟอร์มมาตรฐาน HTML พร้อมป้ายกำกับที่เหมาะสม
โฟกัสติดอยู่ภายในวิดเจ็ตเมื่อเปิดโดยใช้กับดักโฟกัส ระวังเมื่อทำรังวิดเจ็ตนี้ภายในองค์ประกอบอื่นด้วยกับดักโฟกัส
มีส่วนร่วมในการตอบรับครีบพร้อมปัญหาและดึงคำขอใน repo gitHub
