Бесшовная кастомизация интерфейса: JavaScript SDK Didit и Tailwind CSS (RU)

Единообразие бренда — ключ к успехуПоддержание единого фирменного стиля во всех точках взаимодействия, включая верификацию личности, укрепляет доверие и лояльность пользователей. Гибкие возможности интеграции Didit позволяют этого достичь.

JavaScript SDK для полного контроляJavaScript SDK Didit предлагает полный программный контроль над процессом верификации, обеспечивая глубокую кастомизацию и бесшовную интеграцию в современные веб-фреймворки, такие как React, Vue и Angular.

Tailwind CSS для быстрого оформленияИспользуйте подход Tailwind CSS, ориентированный на утилиты, чтобы быстро и эффективно стилизовать компоненты пользовательского интерфейса Didit, обеспечивая идеальное соответствие вашей существующей дизайн-системе без сложных переопределений.

White-Label решение DiditПомимо прямого стилизования, Didit предоставляет широкие возможности white-label в своей Бизнес-консоли, позволяя обширно настраивать брендинг, включая пользовательские домены, цвета и логотипы, которые легко применяются к вашим рабочим процессам.

Важность бесшовного пользовательского опыта при верификации личности

В современном цифровом мире пользовательский опыт (UX) имеет первостепенное значение. Когда пользователи взаимодействуют с вашим приложением, каждая точка контакта влияет на их общее восприятие вашего бренда. Это включает в себя такие критически важные процессы, как верификация личности. Неуклюжий, не соответствующий бренду процесс верификации может нарушить путь пользователя, привести к отказу и подорвать доверие. И наоборот, бесшовно интегрированный и красиво оформленный процесс верификации повышает профессионализм и укрепляет уверенность пользователя.

Многие решения для верификации личности предлагают общие, универсальные пользовательские интерфейсы, которые противоречат тщательно разработанным рекомендациям бренда компании. Это вынуждает компании выбирать между надежной безопасностью и единообразным пользовательским опытом. Didit понимает эту проблему и предоставляет мощные инструменты, такие как свой JavaScript SDK и обширные возможности white-label, чтобы гарантировать, что вам не придется идти на компромиссы. Благодаря глубокой кастомизации Didit гарантирует, что ваш процесс верификации личности будет восприниматься как неотъемлемая часть вашего приложения, а не как внешнее, раздражающее прерывание.

Интеграция JavaScript SDK Didit для максимальной гибкости

JavaScript SDK Didit разработан для разработчиков, которым нужен максимальный контроль и гибкость. Это рекомендуемый метод интеграции для производственных приложений благодаря его комплексным функциям, включая управление сессиями, обратные вызовы событий и поддержку популярных фреймворков, таких как React, Vue, Angular, NextJS, Nuxt и Svelte, а также чистого JS. В отличие от более простых встраиваний iframe или перенаправлений, JavaScript SDK позволяет программно управлять потоком верификации и обрабатывать события непосредственно в вашем приложении.

Базовая интеграция проста:

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

DiditSdk.init({
  session_token: 'YOUR_BACKEND_GENERATED_TOKEN',
  onSuccess: (session) => {
    console.log('Verification completed:', session.sessionId, session.status);
    // Handle successful verification, e.g., redirect user, update UI
  },
  onError: (error) => {
    console.error('SDK error:', error.code, error.message);
    // Handle errors appropriately
  },
  onCancel: () => {
    console.log('User cancelled verification');
    // Handle user cancellation
  }
});

Этот SDK позволяет вам контролировать, отображается ли верификация как модальное окно или встроенно, предоставляя вам детальный контроль над взаимодействием с пользователем. Используя этот SDK, вы получаете возможность оборачивать компоненты Didit в структуру вашего собственного приложения, делая их доступными для пользовательского стилизования.

Стилизация компонентов Didit с помощью Tailwind CSS

Tailwind CSS стал фаворитом среди разработчиков благодаря своему подходу «utility-first», обеспечивающему быструю разработку пользовательского интерфейса и высоко согласованный дизайн. При интеграции JavaScript SDK Didit вы можете применять свои стили Tailwind CSS к элементам-контейнерам, в которых размещается пользовательский интерфейс Didit, обеспечивая целостный внешний вид. Хотя основные компоненты Didit разработаны для надежности и функциональности, их представление может зависеть от окружающей структуры DOM и глобальных стилей вашего приложения.

Например, если SDK Didit рендерит модальное окно или встроенный компонент внутри определенного div, вы можете применить классы Tailwind к этому div, чтобы контролировать его размер, отступы и даже некоторые аспекты его внешнего вида. Для более глубокой кастомизации внутренних элементов фактического потока верификации (таких как кнопки, поля ввода и текст) Didit предлагает обширные возможности white-labeling через свою Бизнес-консоль, что часто является более эффективным и поддерживаемым подходом, чем попытка переопределить стили напрямую.

Однако для элементов-оберток или пользовательского интерфейса, который вы создаете вокруг Didit SDK, Tailwind CSS идеален. Представьте, что вы хотите представить процесс верификации в определенном компоненте карточки вашего приложения:

<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">Verify Your Identity</h2>
    <!-- Didit SDK will render its UI here -->
    <div id="didit-verification-container"></div>
  </div>
</div>

В этом примере все внешнее стилизование (фон, внешний вид карточки, стили текста) обрабатывается Tailwind. Затем Didit SDK будет инициализирован для рендеринга внутри #didit-verification-container, наследуя некоторые контекстные стили и обеспечивая визуальное соответствие окружающему приложению. Для элементов внутри потока Didit функции white-label Didit обеспечивают окончательную кастомизацию.

Комплексное White-Label решение Didit

Хотя прямое манипулирование CSS может обрабатывать некоторые аспекты, основным и наиболее мощным методом кастомизации пользовательского интерфейса Didit является его встроенная функция white-labeling, доступная через Бизнес-консоль Didit. Это выходит далеко за рамки того, что можно было бы достичь с помощью простых переопределений CSS, предоставляя надежное решение для по-настоящему брендированного опыта. С возможностями white-label Didit вы можете:

• Настраивать цвета: Контролируйте кнопки, текст, панели и фоны, чтобы они соответствовали вашей фирменной палитре.
• Настраивать типографику: Применяйте шрифты вашего бренда для единообразного внешнего вида.
• Загружать логотипы: Интегрируйте ваши квадратные и прямоугольные логотипы непосредственно в поток верификации.
• Настраивать макет: Точно настраивайте радиусы границ для панелей и кнопок.
• Настраивать экран входа: Решайте, показывать или пропускать начальный экран входа.
• Использовать пользовательские домены: Размещайте поток верификации на вашем собственном домене (например, verify.yourcompany.com) вместо verify.didit.me, обеспечивая полностью бесшовный путь пользователя без какого-либо внешнего брендинга.

Этот уровень кастомизации применяется непосредственно в ваших рабочих процессах Didit, что означает, что после настройки в Бизнес-консоли все сессии верификации, инициированные через этот рабочий процесс, будут автоматически отражать ваш брендинг. Это особенно эффективно для продуктов Didit, таких как верификация личности, пассивная и активная проверка живости и оценка возраста, гарантируя, что каждый шаг взаимодействия пользователя с этими функциями идеально соответствует вашему бренду.

Как Didit помогает

Didit выделяется как AI-нативная, ориентированная на разработчиков платформа для идентификации, которая позволяет компаниям полностью настраивать свой опыт верификации личности. Благодаря нашей модульной архитектуре вы получаете подключаемые проверки личности, которые легко интегрируются в ваши существующие системы. Наш JavaScript SDK обеспечивает программный контроль, необходимый для глубокой интеграции с современными веб-фреймворками, а наши комплексные функции white-label в Бизнес-консоли позволяют широко настраивать брендинг — от цветов и шрифтов до пользовательских доменов. Это обеспечивает единообразный и надежный пользовательский опыт для всех продуктов Didit, включая нашу надежную верификацию личности (OCR, MRZ, штрих-коды), пассивное и активное обнаружение живости для предотвращения мошенничества и конфиденциальную оценку возраста. Didit предлагает бесплатный Core KYC и модель оплаты за успешную проверку без платы за установку, что делает расширенную верификацию личности доступной и эффективной.

Готовы начать?

Готовы увидеть Didit в действии? Получите бесплатную демонстрацию сегодня.

Начните бесплатно верифицировать личности с бесплатным тарифом Didit.