تصميم واجهة مستخدم مخصصة للتحقق من الهوية

في المشهد التنافسي اليوم، تعتبر تجربة المستخدم السلسة والمتوافقة مع علامتك التجارية أمرًا بالغ الأهمية. عندما يتعلق الأمر بالتحقق من الهوية، يمكن أن تعطل الواجهات العامة التدفق وتقوض الثقة. يوفر Didit مجموعة أدوات SDK قوية للتحقق من الهوية مع خيارات تخصيص واسعة، مما يسمح لك بـ وضع علامة بيضاء كاملة على عملية التحقق لتتناسب مع مظهر وهوية علامتك التجارية. يستكشف هذا المنشور الطرق المختلفة لتحقيق التحكم الكامل في واجهة المستخدم، بدءًا من تخصيص CSS الأساسي وصولاً إلى إنشاء تجربة مخصصة بالكامل.

ملخص رئيسي 1: يقدم Didit مجموعة من خيارات التخصيص، بدءًا من تجاوزات CSS البسيطة إلى نهج العرض على جانب الخادم الكامل للتحكم الأقصى في واجهة المستخدم.

ملخص رئيسي 2: يؤدي التنفيذ السليم لـ وضع العلامة البيضاء إلى تعزيز ثقة المستخدم واتساق العلامة التجارية طوال عملية التحقق.

ملخص رئيسي 3: تم تصميم واجهة برمجة التطبيقات (API) الخاصة بـ Didit لدعم كل من مكونات واجهة المستخدم الجاهزة وواجهات المستخدم الأمامية المخصصة بالكامل.

ملخص رئيسي 4: يسمح تخصيص CSS المتقدم بالتحكم الدقيق في مظهر مجموعة الأدوات SDK دون تعديل التعليمات البرمجية الأساسية.

فهم خيارات وضع العلامة البيضاء

يدرك Didit أن لكل علامة تجارية متطلبات فريدة. نقدم عدة طرق لتخصيص واجهة المستخدم:

• تخصيص CSS (أساسي): أبسط طريقة، تسمح لك بتجاوز الأنماط الافتراضية باستخدام CSS مخصص. هذا مثالي للتعديلات الطفيفة على العلامة التجارية مثل الألوان والخطوط وأنماط الأزرار.
• تخصيص الصفحة المستضافة (متوسط): قم بتعديل صفحة التحقق المستضافة من خلال خيارات التنسيق المحدودة المتاحة في وحدة تحكم Didit.
• دمج SDK مع واجهة مستخدم مخصصة (متقدم): تحكم كامل. قم بدمج Didit SDK في تطبيقك وقم ببناء واجهة مستخدم مخصصة بالكامل باستخدام الأُطر المفضلة لديك (React و Angular و Vue.js، وما إلى ذلك). هذا يستخدم واجهات برمجة التطبيقات (APIs) الخاصة بنا للمعالجة الخلفية.
• العرض على جانب الخادم (خبير): تعامل مع عملية التحقق بأكملها على خوادمك، باستخدام واجهة برمجة التطبيقات (API) الخاصة بـ Didit لإجراء فحوصات الهوية الأساسية وبناء واجهة أمامية مخصصة بالكامل.

الاستفادة من تخصيص CSS

للحصول على تحديثات سريعة للعلامة التجارية، يعد تخصيص CSS أداة قوية. يسمح Didit SDK بحقن قواعد CSS مخصصة تتجاوز الأنماط الافتراضية. يتم تحقيق ذلك عن طريق إضافة علامة style إلى HTML التي تحتوي على أداة التحقق، أو عن طريق توفير عنوان URL لورقة أنماط.

مثال:

<style>
  .didit-button {
    background-color: #2567FF !important; /* أزرق Didit */
    color: white !important;
    border-radius: 5px !important;
  }
  .didit-input {
    font-family: 'الخط المخصص', sans-serif !important;
  }
</style>

اعتبارات مهمة:

• استخدم !important للتأكد من أن أنماطك تتجاوز الأنماط الافتراضية لمجموعة الأدوات SDK.
• افحص هيكل HTML لمجموعة الأدوات SDK لتحديد فئات CSS ذات الصلة.
• اختبر بدقة عبر متصفحات وأجهزة مختلفة.

بناء واجهة مستخدم مخصصة باستخدام SDK

للحصول على تحكم كامل في واجهة المستخدم، ستحتاج إلى دمج Didit SDK في تطبيقك وبناء واجهة أمامية مخصصة. يتطلب هذا النهج مزيدًا من جهد التطوير ولكنه يوفر مرونة لا مثيل لها.

البنية:

1. قم بتهيئة Didit SDK في تطبيقك.
2. أنشئ عناصر واجهة مستخدم مخصصة (أزرار وحقول إدخال وما إلى ذلك) تتطابق مع علامتك التجارية.
3. استخدم Didit API لتشغيل خطوات التحقق (التقاط مستند الهوية واكتشاف الحيوية وما إلى ذلك).
4. تعامل مع نتائج التحقق وقم بتحديث واجهة المستخدم الخاصة بك وفقًا لذلك.

مثال: بدء التحقق من الهوية باستخدام JavaScript SDK.

didit.launchIDVerification({
  container: '#didit-container',
  onSuccess: function(result) {
    console.log('تم التحقق بنجاح:', result);
  },
  onFailure: function(error) {
    console.error('فشل التحقق:', error);
  }
});

التصميم المتقدم والتخصيص الممتد

بالإضافة إلى CSS الأساسي، يمكنك تحقيق تخصيص أكثر تطوراً من خلال الاستفادة من Didit API للتحكم في تدفق التحقق وعرض عناصر واجهة مستخدم مخصصة. يتيح ذلك إجراء تغييرات ديناميكية بناءً على حالة التحقق أو الموقع أو عوامل أخرى. على سبيل المثال، يمكنك إظهار أو إخفاء العناصر ديناميكيًا بناءً على بلد المستخدم، أو عرض رسائل خطأ مخصصة.

تتضمن خيارات التصميم الممتدة الخاصة بـ Didit القدرة على تخصيص:

• محركات التحميل
• رسائل الخطأ
• رسوم متحركة للنجاح
• أصول الصور

كيف يساعد Didit

يمكّن Didit الشركات من تقديم تجربة تحقق من الهوية ذات علامة تجارية وسلسة. توفر مجموعة الأدوات SDK الشاملة وواجهة برمجة التطبيقات (API) الشاملة الأدوات التي تحتاجها لـ:

• تعزيز اتساق العلامة التجارية.
• زيادة ثقة المستخدم.
• تحسين معدلات التحويل.
• تقليل تكاليف الدعم.
• الحفاظ على تجربة مستخدم سلسة.

هل أنت مستعد للبدء؟

هل أنت مستعد للتحكم في واجهة مستخدم التحقق من الهوية الخاصة بك؟ استكشف وثائقنا وموارد التكامل:

• وثائق Didit
• مركز عروض Didit
• أسعار Didit