الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

ردود الفعل زعنفة

عنصر واجهة مستخدم صغيرة لجمع التعليقات في أي مكان على موقع الويب الخاص بك. هذا كل شيء.

الموقع • Discord • Twitter

GIF التجريبي

جرب القطعة ↗

بداية سريعة

  1. قم بتحميل القطعة على صفحتك: 

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

  2. قم بإعداد عنوان 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 >

  3. اضبط زرًا لفتح عنصر واجهة المستخدم: 

     < button data-feedbackfin-button > Feedback </ button >

إعداد عنوان URL webhook

هذا هو عنوان URL لإرسال التعليقات إلى. ستقوم القطعة بتقديم طلب نشر إلى عنوان URL هذا مع بيانات التعليقات كهيئة JSON.

قم بإنشاء عنوان URL لـ WebHook بسهولة باستخدام منصة Rowy ذات الرمز المنخفض وإدارة بيانات التعليقات على جدول بيانات تعاوني UI. اختياريا ، يمكنك زيادة أتمتة التعليقات الواردة مع محرر الرمز المدمج من Rowy (على سبيل المثال: إخطار في Team Slack/Discord ، ومتابعة البريد الإلكتروني وما إلى ذلك).

تعليمات الفيديو من طرف إلى طرف على الموقع ↗

خيارات

يتم تعيين الخيارات في window.feedbackfin.config كائن:

url

عنوان URL لإرسال التعليقات إلى. ستقوم القطعة بتقديم طلب نشر إلى عنوان 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 لحساب موضعه باستخدام واجهة المستخدم العائمة.

التخصيص

يتم إرفاق القطعة قبل علامة الإغلاق </body> عندما تكون مفتوحة وتحترم font-family صفحتك. يتم إرفاق الأنماط قبل علامة <head> الفتح مباشرة ، لذا فإن التخصيصات الخاصة بك لها الأسبقية.

يمكنك تخصيص مظهر القطعة بواسطة:

  • تجاوز متغيرات CSS.

    على سبيل المثال ، يمكنك تغيير لون الزر الأساسي باستخدام: 

     : root {
  --feedbackfin-primary-color : # 007aff ;
  --feedbackfin-primary-color-text : # fff ;
}

  • تجاوز قواعد CSS. أسماء الفصول مسبوقة مع feedbackfin__ .

الوضع المظلم

يتم تنشيط الوضع المظلم عند:

  • يقوم المستخدم بتعيين موضوع نظامه على الظلام
    IE @media (prefers-color-scheme: dark) صحيح ، أو

  • أي عنصر من عناصر الوالدين لديه سمة data-theme التي تحتوي قيمتها على dark .
    مثال: <body data-theme="dark">

يتم تعيين ألوان الوضع المظلم باستخدام متغيرات CSS. يمكنك تجاوزهم بـ: 

 @media ( prefers-color-scheme : dark) {
  : root {
    ...;
  }
}

[ data-theme *= "dark" ] {
  ...;
}

إمكانية الوصول

تم تصميم هذه القطعة باستخدام عناصر نموذج HTML القياسية مع الملصقات المناسبة.

التركيز محاصر داخل القطعة عندما يكون مفتوحًا باستخدام مصنع التركيز. كن حذرًا عند تعشيش هذه القطعة داخل عنصر آخر مع فخ التركيز.

المساهمة

المساهمة في ردود الفعل زعنفة مع القضايا وسحب الطلبات في جيثب ريبو.

يدعم

  • انضم إلى مجتمع من المطورين على الخلاف
  • تابعنا على Twitter وساعد في نشر الكلمة
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل