Skip to main content
O SDK permite personalização completa através do objeto hubOptions.

Idiomas Suportados

const hubOptions = {
  locale: 'pt-BR', // 'pt-BR' | 'en-US' | 'custom'
};
ValorDescrição
pt-BRPortuguês (Brasil)
en-USInglês (Estados Unidos)
customTextos personalizados

Personalização de Textos

Você pode customizar todos os textos exibidos na interface usando locale: 'custom':
const hubOptions = {
  locale: 'custom',
  strings: {
    // Botões de ação
    actions: {
      ready: 'INICIAR VERIFICAÇÃO',
      tryAgain: 'TENTAR NOVAMENTE',
    },

    // Textos de acessibilidade
    accessibility: {
      cancelButton: 'Cancelar verificação',
      tapGuidance: 'Toque duas vezes para orientação',
    },

    // Instruções iniciais
    instructions: {
      title: 'Verificação Biométrica',
      subtitle: 'Posicione seu rosto dentro do círculo',
    },

    // Mensagens de feedback em tempo real
    feedback: {
      centerFace: 'Centralize o rosto',
      faceNotFound: 'Rosto não detectado',
      moveCloser: 'Aproxime-se da câmera',
      moveBack: 'Afaste-se um pouco',
      moveLeft: 'Mova-se para a esquerda',
      moveRight: 'Mova-se para a direita',
      moveUp: 'Levante a câmera',
      moveDown: 'Abaixe a câmera',
      moveToEyeLevel: 'Posicione na altura dos olhos',
      lookStraightAhead: 'Olhe para frente',
      faceNotUpright: 'Mantenha a cabeça reta',
      keepHeadStraight: 'Mantenha a cabeça reta',
      holdStill: 'Fique parado',
      useEvenLighting: 'Melhore a iluminação',
      tooBlurry: 'Imagem borrada',
      multipleFacesDetected: 'Múltiplos rostos detectados',
      onlyOneFaceAllowed: 'Apenas um rosto permitido',
      perfect: 'Perfeito!',
      readyToCapture: 'Pronto para capturar',
    },

    // Mensagens de status
    status: {
      loading: 'Carregando...',
      processing: 'Processando biometria...',
      uploading: 'Enviando dados...',
      analyzing: 'Analisando...',
      initializing: 'Inicializando...',
      connectingCamera: 'Conectando à câmera...',
      success: 'Sucesso!',
      captureComplete: 'Captura concluída',
      verificationComplete: 'Verificação finalizada',
    },

    // Tela de nova tentativa
    retry: {
      title: 'Vamos Tentar Novamente',
      subtitle: 'Siga as instruções para melhorar a captura',
      yourImageLabel: 'Sua foto',
      idealImageLabel: 'Posição ideal',
      instructionBetterLighting: 'Use melhor iluminação',
      instructionNeutralExpression: 'Mantenha expressão neutra',
      instructionCleanCamera: 'Limpe a câmera',
      instructionBetterPosition: 'Melhore o posicionamento',
    },

    // Mensagens de erro
    errors: {
      cameraPermissionDenied: 'Permissão de câmera negada',
      cameraNotFound: 'Câmera não encontrada',
      cameraInUse: 'Câmera em uso por outra aplicação',
      networkError: 'Erro de conexão',
      uploadFailed: 'Falha ao enviar dados',
      sessionExpired: 'Sessão expirada',
      sessionFailed: 'Falha ao criar sessão',
      faceNotDetected: 'Rosto não detectado',
      faceNotClear: 'Rosto não está nítido',
      multipleFaces: 'Múltiplos rostos detectados',
      unexpectedError: 'Erro inesperado',
      tryAgainLater: 'Tente novamente mais tarde',
    },
  },
};

Personalização de Cores (Tema)

Customize a aparência visual da interface:
const hubOptions = {
  colorTheme: {
    // Cores principais
    primaryColor: '#667eea', // Cor da marca principal
    secondaryColor: '#764ba2', // Cor de destaque

    // Fundos
    backgroundColor: '#ffffff', // Fundo principal
    surfaceColor: '#f8f9fa', // Fundo de cards e painéis
    overlayColor: 'rgba(0, 0, 0, 0.6)', // Sobreposição de modal

    // Textos
    textColor: '#333333', // Texto principal
    textColorSecondary: '#666666', // Texto secundário
    textColorLight: '#ffffff', // Texto claro (em fundos escuros)

    // Botões
    buttonColor: '#667eea', // Fundo do botão principal
    confirmButtonColor: '#5FCC17', // Botão de confirmar
    cancelButtonColor: '#FF453A', // Botão de cancelar
    buttonTextColor: '#ffffff', // Texto dos botões
    buttonHoverColor: '#5a67d8', // Hover do botão
    buttonDisabledColor: '#e2e8f0', // Botão desabilitado

    // Estados
    successColor: '#5FCC17', // Sucesso
    errorColor: '#f56565', // Erro
    warningColor: '#ed8936', // Aviso
    infoColor: '#4299e1', // Informação

    // Elementos da face
    frameColor: '#ffffff', // Moldura de detecção facial
    progressColor1: '#667eea', // Cor do progresso
    progressColor2: '#764ba2', // Cor secundária do progresso
    maskColor: 'rgba(0, 0, 0, 0.6)', // Máscara de sobreposição

    // Loading
    loadingColor: '#ffffff', // Indicador de carregamento
  },
};

Exemplos de Temas

Tema Escuro

const hubOptions = {
  locale: 'pt-BR',
  colorTheme: {
    primaryColor: '#818cf8',
    secondaryColor: '#a78bfa',
    backgroundColor: '#1f2937',
    surfaceColor: '#374151',
    overlayColor: 'rgba(0, 0, 0, 0.8)',
    textColor: '#f9fafb',
    textColorSecondary: '#d1d5db',
    textColorLight: '#f9fafb',
    buttonColor: '#818cf8',
    confirmButtonColor: '#34d399',
    cancelButtonColor: '#f87171',
    buttonTextColor: '#1f2937',
    successColor: '#34d399',
    errorColor: '#f87171',
    warningColor: '#fbbf24',
    infoColor: '#60a5fa',
    frameColor: '#818cf8',
    maskColor: 'rgba(0, 0, 0, 0.7)',
  },
};

Tema Claro

const hubOptions = {
  locale: 'pt-BR',
  strings: {
    instructions: {
      title: 'Verificação de Identidade',
      subtitle: 'Olhe diretamente para a câmera',
    },
    actions: {
      ready: 'COMEÇAR',
    },
  },
  colorTheme: {
    primaryColor: '#003366',
    secondaryColor: '#0066cc',
    backgroundColor: '#f5f5f5',
    buttonColor: '#003366',
    confirmButtonColor: '#28a745',
    frameColor: '#003366',
  },
};

Exemplo Completo com Personalização

const hub = ValidHub.createHub();

const config = {
  apiKey: 'sua-api-key',
  cek: cekData,
  mount: '#camera-container',
  backendBaseUrl: 'https://api.valid.com/liveness',
  appName: 'minha-aplicacao',
  risk: 'LIVENESS_RISK_HIGH',

  hubOptions: {
    locale: 'pt-BR',
    strings: {
      instructions: {
        title: 'Verificação de Identidade',
        subtitle: 'Posicione seu rosto no centro da tela',
      },
      actions: {
        ready: 'ESTOU PRONTO',
        tryAgain: 'TENTAR NOVAMENTE',
      },
      feedback: {
        centerFace: 'Centralize seu rosto',
        faceNotFound: 'Rosto não encontrado',
        perfect: 'Perfeito! Mantenha a posição',
        holdStill: 'Fique parado...',
      },
      status: {
        processing: 'Analisando sua biometria...',
        success: 'Verificação concluída!',
      },
    },
    colorTheme: {
      primaryColor: '#667eea',
      secondaryColor: '#764ba2',
      buttonColor: '#667eea',
      confirmButtonColor: '#10b981',
      cancelButtonColor: '#ef4444',
      frameColor: '#667eea',
      successColor: '#10b981',
      errorColor: '#ef4444',
    },
  },

  onSuccess: (result) => {
    console.log('Sucesso:', result);
  },
  onFailure: (error) => {
    console.error('Erro:', error);
  },
  onProgress: (state) => {
    console.log('Estado:', state);
  },
};

const result = await hub.run(config);
Você pode combinar idioma predefinido com customização parcial de textos. As strings não especificadas usarão os valores padrão do idioma selecionado.

Próximos Passos