Kustomisasi Antarmuka Pengguna yang Mulus: JavaScript SDK Didit dan Tailwind CSS (ID)

Konsistensi Merek adalah KunciMenjaga pengalaman merek yang terpadu di semua titik kontak, termasuk verifikasi identitas, membangun kepercayaan dan loyalitas pengguna. Opsi integrasi fleksibel Didit memungkinkan hal ini.

JavaScript SDK untuk KontrolJavaScript SDK Didit menawarkan kontrol programatik penuh atas alur verifikasi, memungkinkan kustomisasi mendalam dan integrasi mulus ke dalam kerangka kerja web modern seperti React, Vue, dan Angular.

Tailwind CSS untuk Penataan CepatManfaatkan pendekatan utility-first dari Tailwind CSS untuk menata komponen UI Didit dengan cepat dan efisien, memastikan kesesuaian sempurna dengan sistem desain Anda yang ada tanpa penimpaan yang rumit.

Solusi White-Label DiditSelain penataan langsung, Didit menyediakan kemampuan white-label komprehensif dalam Konsol Bisnisnya, memungkinkan kustomisasi merek yang ekstensif, termasuk domain kustom, warna, dan logo, diterapkan dengan mudah pada alur kerja Anda.

Pentingnya Pengalaman Pengguna yang Mulus dalam Verifikasi Identitas

Dalam lanskap digital saat ini, pengalaman pengguna (UX) adalah yang terpenting. Ketika pengguna berinteraksi dengan aplikasi Anda, setiap titik kontak berkontribusi pada persepsi keseluruhan mereka terhadap merek Anda. Ini termasuk proses penting seperti verifikasi identitas. Alur verifikasi yang canggung dan tidak sesuai merek dapat mengganggu perjalanan pengguna, menyebabkan pengabaian, dan mengikis kepercayaan. Sebaliknya, proses verifikasi yang terintegrasi dengan mulus dan bermerek indah meningkatkan profesionalisme dan memperkuat kepercayaan pengguna.

Banyak solusi verifikasi identitas menawarkan UI generik yang "satu ukuran untuk semua" yang bertentangan dengan pedoman merek yang dibuat dengan cermat oleh perusahaan. Hal ini memaksa bisnis untuk memilih antara keamanan yang kuat dan pengalaman pengguna yang konsisten. Didit memahami tantangan ini dan menyediakan alat yang ampuh, seperti JavaScript SDK dan opsi white-label yang ekstensif, untuk memastikan bahwa Anda tidak perlu berkompromi. Dengan memungkinkan kustomisasi mendalam, Didit memastikan bahwa proses verifikasi identitas Anda terasa seperti bagian integral dari aplikasi Anda, bukan interupsi eksternal yang mengganggu.

Mengintegrasikan JavaScript SDK Didit untuk Fleksibilitas Maksimal

JavaScript SDK Didit dirancang untuk pengembang yang mencari kontrol dan fleksibilitas maksimum. Ini adalah metode integrasi yang direkomendasikan untuk aplikasi produksi karena fitur-fiturnya yang komprehensif, termasuk manajemen sesi, callback peristiwa, dan dukungan untuk kerangka kerja populer seperti React, Vue, Angular, NextJS, Nuxt, dan Svelte, serta vanilla JS. Tidak seperti embed iframe atau pengalihan yang lebih sederhana, JavaScript SDK memungkinkan Anda mengelola alur verifikasi secara programatik dan menangani peristiwa langsung dalam aplikasi Anda.

Integrasi dasarnya mudah:

import DiditSdk from '@didit-protocol/sdk-web';

DiditSdk.init({
  session_token: 'YOUR_BACKEND_GENERATED_TOKEN',
  onSuccess: (session) => {
    console.log('Verifikasi selesai:', session.sessionId, session.status);
    // Tangani verifikasi berhasil, mis. arahkan pengguna, perbarui UI
  },
  onError: (error) => {
    console.error('SDK error:', error.code, error.message);
    // Tangani kesalahan dengan tepat
  },
  onCancel: () => {
    console.log('Pengguna membatalkan verifikasi');
    // Tangani pembatalan pengguna
  }
});

SDK ini memungkinkan Anda mengontrol apakah verifikasi muncul sebagai modal atau inline, memberi Anda kontrol granular atas interaksi pengguna. Dengan memanfaatkan SDK ini, Anda mendapatkan kemampuan untuk membungkus komponen Didit dalam struktur aplikasi Anda sendiri, membuatnya mudah untuk penataan kustom.

Menata Komponen Didit dengan Tailwind CSS

Tailwind CSS telah menjadi favorit di kalangan pengembang karena pendekatan utility-first-nya, memungkinkan pengembangan UI yang cepat dan desain yang sangat konsisten. Saat mengintegrasikan JavaScript SDK Didit, Anda dapat menerapkan gaya Tailwind CSS Anda ke elemen kontainer yang menampung UI Didit, memastikan tampilan dan nuansa yang kohesif. Meskipun komponen inti Didit dirancang agar kuat dan fungsional, presentasinya dapat dipengaruhi oleh struktur DOM di sekitarnya dan gaya global aplikasi Anda.

Misalnya, jika SDK Didit merender modal atau komponen inline dalam div tertentu, Anda dapat menerapkan kelas Tailwind ke div tersebut untuk mengontrol ukuran, spasi, dan bahkan beberapa aspek penampilannya. Untuk kustomisasi yang lebih dalam dari elemen internal alur verifikasi yang sebenarnya (seperti tombol, bidang input, dan teks), Didit menawarkan kemampuan white-label yang ekstensif melalui Konsol Bisnisnya, yang seringkali merupakan pendekatan yang lebih efektif dan dapat dipelihara daripada mencoba menimpa gaya secara langsung.

Namun, untuk elemen pembungkus atau UI kustom yang Anda bangun di sekitar Didit SDK, Tailwind CSS sangat ideal. Bayangkan Anda ingin menyajikan alur verifikasi dalam komponen kartu tertentu dari aplikasi Anda:

<div class="flex justify-center items-center h-screen bg-gray-100">
  <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-center">Verifikasi Identitas Anda</h2>
    <!-- Didit SDK akan merender UI-nya di sini -->
    <div id="didit-verification-container"></div>
  </div>
</div>

Dalam contoh ini, semua penataan luar (latar belakang, tampilan kartu, gaya teks) ditangani oleh Tailwind. Didit SDK kemudian akan diinisialisasi untuk merender dalam #didit-verification-container, mewarisi beberapa gaya kontekstual dan memastikan itu konsisten secara visual dengan aplikasi di sekitarnya. Untuk elemen di dalam alur Didit, fitur white-label Didit menyediakan kustomisasi definitif.

Solusi White-Label Komprehensif Didit

Meskipun manipulasi CSS langsung dapat menangani beberapa aspek, metode utama dan paling ampuh Didit untuk kustomisasi UI adalah fitur white-label bawaannya, yang dapat diakses melalui Konsol Bisnis Didit. Ini jauh melampaui apa yang dapat Anda capai dengan penimpaan CSS sederhana, menyediakan solusi yang kuat untuk pengalaman yang benar-benar bermerek. Dengan kemampuan white-label Didit, Anda dapat:

• Menyesuaikan Warna: Kontrol tombol, teks, panel, dan latar belakang agar sesuai dengan palet merek Anda.
• Menentukan Tipografi: Terapkan font merek Anda untuk tampilan yang konsisten.
• Mengunggah Logo: Integrasikan logo persegi dan persegi panjang Anda langsung ke alur verifikasi.
• Menyesuaikan Tata Letak: Sesuaikan radius batas untuk panel dan tombol.
• Mengonfigurasi Layar Masuk: Putuskan apakah akan menampilkan atau melewati layar masuk awal.
• Menggunakan Domain Kustom: Host alur verifikasi di domain Anda sendiri (misalnya, verify.yourcompany.com) alih-alih verify.didit.me, memastikan perjalanan pengguna yang sepenuhnya mulus tanpa branding eksternal apa pun.

Tingkat kustomisasi ini diterapkan langsung dalam alur kerja Didit Anda, yang berarti bahwa setelah dikonfigurasi di Konsol Bisnis, semua sesi verifikasi yang dimulai melalui alur kerja tersebut akan secara otomatis mencerminkan merek Anda. Ini sangat efektif untuk produk Didit seperti Verifikasi ID, Liveness Pasif & Aktif, dan Estimasi Usia, memastikan bahwa setiap langkah interaksi pengguna dengan fitur-fitur ini selaras sempurna dengan merek Anda.

Bagaimana Didit Membantu

Didit menonjol sebagai platform identitas berbasis AI dan berorientasi pengembang yang memberdayakan bisnis untuk sepenuhnya menyesuaikan pengalaman verifikasi identitas mereka. Dengan arsitektur modular kami, Anda mendapatkan pemeriksaan identitas plug-and-play yang terintegrasi dengan mulus ke dalam sistem Anda yang ada. JavaScript SDK kami menyediakan kontrol programatik yang diperlukan untuk integrasi mendalam dengan kerangka kerja web modern, sementara fitur white-label komprehensif kami di Konsol Bisnis memungkinkan kustomisasi branding yang ekstensif—mulai dari warna dan font hingga domain kustom. Ini memastikan pengalaman pengguna yang konsisten dan dapat dipercaya di semua produk Didit, termasuk Verifikasi ID kami yang kuat (OCR, MRZ, barcode), deteksi Liveness Pasif & Aktif untuk pencegahan penipuan, dan Estimasi Usia yang menjaga privasi. Didit menawarkan Core KYC Gratis dan model pembayaran per pemeriksaan yang berhasil tanpa biaya pengaturan, menjadikan verifikasi identitas canggih dapat diakses dan efisien.

Siap untuk Memulai?

Siap melihat Didit beraksi? Dapatkan demo gratis hari ini.

Mulai verifikasi identitas secara gratis dengan tingkat gratis Didit.