> For the complete documentation index, see [llms.txt](https://docs.facephi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.facephi.com/docs.facephi-pt-br/sdks/sdk-web/personalizacion.md). # Personalização ## Personalização de assets visuais As animações do SDK Web podem ser configuradas com a propriedade `customAnimations` em ``. Com essa propriedade, é possível substituir uma ou várias animações dos componentes oferecidos pelo SDK Web: * SDK Provider * SelphID * Selphi * FileUploader * QRWidget Para mais informações, consulte a [documentação da propriedade customAnimations](/docs.facephi-pt-br/sdks/sdk-web/componentes/sdk-provider/propiedades/customanimations.md). **Exemplo:** ```jsx // Ejemplo de configuración const customAnimations = { sdkProvider: { loading: "/assets/anim/custom-loading.gif", }, selphi: { loading: "/assets/anim/custom-loading.gif", }, selphid: { loading: "/assets/anim/custom-loading.gif", } }; // HTML (...) ``` {% hint style="info" %} **Nota**: Caso configure uma animação por meio dessa propriedade e da prop direta (Por exemplo: `customAnimations.sdkProvider.loading` e `loadingAnimation`), prevalecerá o valor configurado em `customAnimations`. {% endhint %} ## Personalização de estilos Os componentes SDK Provider e os oferecidos por ele, como Selphi e SelphID, podem ser personalizados com as seguintes variáveis CSS aplicadas à tag `facephi-sdk-provider`: **Exemplo**: {% hint style="info" %} A configuração CSS deve estar definida com a encapsulação correta (global, scoped, ...). Em caso de integrações de componentes, recomenda-se adicionar a configuração CSS de `facephi-sdk-provider` e sua configuração dentro da tag do componente `:host`. Além disso, uma configuração CSS global do componente também funcionará da mesma forma. {% endhint %} | Variável CSS | Descrição | Valor padrão | Componentes | | --------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------- | ---------------------------------------------------------------------------------------------------------------- | | **Variáveis de cor** | | | | | `--backgroundColor` | Cor de fundo principal do contêiner | `transparent` | File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget | | `--color-state-loading` | Cor da animação de carregamento do Provider | `#243760` | Loading Ellipsis | | `--color-background-primary` | Cor de fundo dos elementos principais (área de soltar, menus suspensos, áreas de conteúdo) | `#ffffff` | File Uploader, Choose Document, QR Widget | | `--color-background-hover` | Cor de fundo ao passar o mouse sobre elementos interativos | `#cedafc` | File Uploader, Choose Document | | `--color-background-disabled` | Cor de fundo de elementos desabilitados | `#eaeef6` | File Uploader, Choose Document, QR Widget | | `--color-text-primary` | Cor de texto principal | `#1d2c4d` | File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget | | `--color-text-secondary` | Cor de texto secundário e placeholders | `#526080` | File Uploader, Choose Document | | `--color-text-disabled` | Cor de texto de elementos desabilitados | `#afb8cc` | File Uploader, Choose Document, QR Widget | | `--color-text-on-primary` | Cor do texto sobre fundos de cor primária | `#ffffff` | File Uploader, Choose Document, QR Widget, Tip Widget | | `--color-border-primary` | Cor da borda dos elementos | `#ccd4e5` | File Uploader, Choose Document | | `--color-state-error` | Cor para estados de erro | `#dd3631` | File Uploader | | `--color-state-success` | Cor para estados de sucesso | `#0f8837` | File Uploader | | `--color-icon-primary` | Cor primária para ícones | `#243760` | File Uploader, Error View | | `--color-icon-secondary` | Cor secundária para ícones | `#7d879c` | File Uploader | | `--primaryColor` | Cor de fundo dos elementos selecionados | `transparent` | Choose Document | | `--secondaryColor` | Cor primária de botões e elementos ativos | `#3167fc` | File Uploader, Choose Document, QR Widget, Tip Widget | | `--tertiaryColor` | Cor de hover e foco de botões | `#2b50b6` | File Uploader, Choose Document, QR Widget, Tip Widget | | **Cores de animação do tutorial** | | | | | `--color-tutorial-computer-bg` | Cor de fundo da tela do computador nas animações do tutorial | `#4c7cfc` | Lottie Widget (tutoriais Selphi, SelphID) | | `--color-tutorial-tshirt` | Cor da roupa do avatar nas animações do tutorial | `#1d2c4d` | Lottie Widget (tutoriais QR, Selphi, SelphID) | | `--color-tutorial-avatar-bg` | Cor de fundo do avatar nas animações do tutorial | `#d5dae9` | Lottie Widget (tutoriais QR, Selphi) | | `--color-tutorial-scan-line` | Cor da linha de escaneamento na animação do tutorial QR | `#5fc982` | Lottie Widget (tutorial QR) | | `--color-tutorial-earrings` | Cor dos brincos e acessórios nas animações do tutorial | `#f4a485` | Lottie Widget (tutorial QR) | | `--color-tutorial-check` | Cor do check de sucesso no tutorial Selphi | `#07a13a` | Lottie Widget (tutorial Selphi) | | `--color-tutorial-progress` | Cor da barra de progresso circular no tutorial Selphi | `#5fc982` | Lottie Widget (tutorial Selphi) | | `--color-tutorial-capture` | Cor de sucesso da captura no tutorial móvel | `#07a13a` | Lottie Widget (tutorial móvel SelphID) | | `--color-tutorial-device-bg` | Cor de fundo da tela do dispositivo no tutorial SelphID | `#2b50b6` | Lottie Widget (tutorial desktop SelphID) | | **Variáveis de tipografia** | | | | | `--wrapper-primary-font` | Família de fontes principal dos componentes | `'Verdana', sans-serif` | File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget | | `--title-font` | Fonte do título principal | `"Poppins-Semibold"` | File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget | | `--text-font` | Fonte do texto principal | `"Poppins-Regular"` | File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget | | `--wrapper-font-family` | Família de fontes do componente de arrastar e soltar | `'Verdana', sans-serif` | File Uploader (drag-drop) | | `--wrapper-text-font-size` | Tamanho da fonte do texto | `1em` | File Uploader | | `--secondary-font-weight` | Peso da fonte dos títulos secundários | `600` | File Uploader | | `--primary-font-weight` | Peso da fonte do texto principal | `400` | File Uploader | | **Variáveis de design** | | | | | `--wrapper-border-radius` | Raio da borda dos elementos | `0.5em` | File Uploader | | `--height-field` | Altura dos campos do formulário | `40px` | Choose Document | **Exemplo**: ```css facephi-sdk-provider { --color-text-primary: #000000; --secondaryColor: #ff6600; --tertiaryColor: #cc5200; } ``` > **Nota**: A configuração CSS deve ser aplicada com a encapsulação correta (global, scoped, ...). Em integrações com componentes, recomenda-se adicionar a configuração CSS de `facephi-sdk-provider` e suas variáveis dentro da tag do componente `:host`. Além disso, uma configuração CSS global do componente funcionará da mesma forma. *** #### Variáveis de Selphi Estas variáveis controlam o estilo do componente Selphi para a captura facial. Todas as variáveis se aplicam à tag `facephi-sdk-provider`. | Variável CSS | Descrição | Valor padrão | | ------------------------------------------- | ---------------------------------------------------------------------------- | -------------------- | | **Variáveis de cor** | | | | `--wrapper-color-background` | Cor de fundo principal do widget | `#FFFFFF` | | `--wrapper-color-primary` | Cor de elementos principais | `#3167FC` | | `--wrapper-color-secondary` | Cor de elementos secundários | `#FFFFFF` | | `--wrapper-color-hover` | Cor do efeito hover | `#2B50B6` | | `--wrapper-color-primary-text` | Cor do texto principal | `#1D2C4D` | | `--wrapper-color-secondary-text` | Cor do texto secundário | `#1D2C4D` | | `--wrapper-color-progress-bar` | Cor da barra de progresso durante a extração | `#3167FC` | | `--wrapper-color-progress-bar-background` | Cor de fundo da barra de progresso ao redor do stream da câmera | `transparent` | | `--wrapper-color-capture-success` | Cor da borda quando o rosto é capturado corretamente | `#60C782` | | `--wrapper-color-capture-fail` | Cor do texto e da barra de progresso quando a extração falha | `#F24B45` | | `--wrapper-color-capture-warning` | Cor da falha no teste de atividade durante o desafio de Liveness Ativo | `#EB6A00` | | `--wrapper-color-liveness-arrow` | Cor da seta direcional durante a verificação de atividade | `#5FC982` | | `--wrapper-color-icon` | Cor dos ícones no componente | `#243760` | | `--wrapper-color-error-icon` | Cor principal do ícone de erro na tela de erro | `#DD3631` | | `--wrapper-color-browser-icon-background` | Cor de fundo do ícone do navegador na tela BrowserError | `transparent` | | `--wrapper-color-debug-error-message` | Cor da mensagem de erro interna quando o Debug está ativado | `#DD3631` | | `--wrapper-color-loading-camera-background` | Cor de fundo da câmera antes de ser carregada completamente no DOM | `#000000` | | `--wrapper-color-loading` | Cor principal da animação de carregamento padrão | `#1D2C4D` | | **Cores de animação do tutorial** | | | | `--wrapper-color-tutorial-background` | Cor de fundo nas animações do tutorial padrão | `#EAEEF6` | | `--wrapper-color-tutorial-progress` | Cor da barra de progresso nas animações do tutorial padrão | `#5FC982` | | `--wrapper-color-tutorial-tshirt` | Cor da camiseta nas animações do tutorial padrão | `#3167FC` | | `--wrapper-color-tutorial-earrings` | Cor dos brincos e óculos de sol nas animações do tutorial padrão | `#F4A485` | | `--wrapper-color-tutorial-border-error` | Cor da borda de erro nas animações do tutorial padrão | `#F24B45` | | `--wrapper-color-tutorial-glow-error` | Cor do glow/preenchimento de erro nas animações do tutorial padrão | `#F24B45` | | **Variáveis de tipografia** | | | | `--wrapper-primary-font` | Fonte do texto principal | `"Poppins-Regular"` | | `--wrapper-primary-font-weight` | Peso da fonte principal | `400` | | `--wrapper-secondary-font` | Fonte do texto secundário | `"Poppins-Semibold"` | | `--wrapper-secondary-font-weight` | Peso da fonte secundária | `600` | | `--wrapper-text-font-size` | Tamanho da fonte do texto do widget | `1em` | | `--wrapper-title-font-size` | Tamanho da fonte do título do widget | `1.4em` | | `--wrapper-line-height` | Altura da linha do texto | `1.3125em` | | `--wrapper-vertical-align` | Alinhamento vertical do texto no contêiner | `center` | | `--wrapper-text-align` | Alinhamento horizontal do texto no contêiner | `center` | | **Variáveis de design** | | | | `--wrapper-progress-bar-width` | Largura da barra de progresso | `0.5em` | | `--wrapper-border-radius` | Raio da borda dos botões | `0.5em` | | `--wrapper-error-icon-max-width` | Largura máxima do ícone da tela de erro | `unset` | | **Visibilidade do logo** | | | | `--wrapper-display-logo` | Mostrar ou ocultar o logo (usar `block` para mostrar ou `none` para ocultar) | `none` | **Exemplo**: ```css facephi-sdk-provider { --wrapper-color-primary: #3f2eff; --wrapper-color-secondary: #ffffff; --wrapper-color-hover: rgb(106, 93, 250); } ``` *** #### Variáveis de SelphID Estas variáveis controlam o estilo do componente SelphID para a captura de documentos. Todas as variáveis se aplicam à tag `facephi-sdk-provider`. | Variável CSS | Descrição | Valor padrão | | ------------------------------------------ | -------------------------------------------------------------------------------------------- | -------------------- | | **Variáveis de cor** | | | | `--wrapper-color-background` | Cor de fundo principal do widget | `#FFFFFF` | | `--wrapper-color-primary` | Cor de elementos principais | `#3167FC` | | `--wrapper-color-secondary` | Cor de elementos secundários | `#FFFFFF` | | `--wrapper-color-hover` | Cor do efeito hover | `#2B50B6` | | `--wrapper-color-primary-text` | Cor do texto principal | `#1D2C4D` | | `--wrapper-color-secondary-text` | Cor do texto secundário | `#1D2C4D` | | `--wrapper-color-capture-success` | Cor da borda quando o documento é capturado corretamente | `#07A13A` | | `--wrapper-color-capture-fail` | Cor do texto, da barra de progresso e da borda do documento quando a extração falha | `#F24B45` | | `--wrapper-color-capture-neutral` | Cor da borda do documento no estado neutro (por padrão, a cor primária) | `#3167FC` | | `--wrapper-color-diagnostic-primary` | Cor de fundo do texto informativo | `#EAEEF6` | | `--wrapper-color-diagnostic-secondary` | Cor de fundo do texto informativo quando cameraOverflow está ativado | `#243760` | | `--wrapper-color-background-camera` | Cor de fundo do stream de vídeo na tela de captura | `#10192B` | | `--wrapper-color-background-preview-image` | Cor de fundo da imagem de pré-visualização | `#FFFFFF` | | `--wrapper-color-camera-overflow` | Cor de fundo do widget na tela de captura de documento quando cameraOverflow está ativado | `#10192b85` | | `--wrapper-color-camera-overflow-filter` | Filtro de fundo do widget na tela de captura de documento quando cameraOverflow está ativado | `#00000030` | | `--wrapper-color-icon` | Cor dos ícones no componente | `#243760` | | `--wrapper-color-error-icon` | Cor principal do ícone de erro na tela de erro | `#DD3631` | | `--wrapper-color-browser-icon-background` | Cor de fundo do ícone do navegador na tela BrowserError | `transparent` | | `--wrapper-color-debug-error-message` | Cor da mensagem de erro interna quando o Debug está ativado | `#DD3631` | | `--wrapper-color-loading` | Cor principal da animação de carregamento padrão | `#1D2C4D` | | **Cores de animação do tutorial** | | | | `--wrapper-color-tutorial-background` | Cor de fundo nas animações do tutorial padrão | `#3167FC` | | `--wrapper-color-tutorial-success` | Cor da camada de sucesso nas animações do tutorial padrão | `#5BBF7E` | | **Variáveis de tipografia** | | | | `--wrapper-primary-font` | Fonte do texto principal | `"Poppins-Regular"` | | `--wrapper-primary-font-weight` | Peso da fonte principal | `400` | | `--wrapper-secondary-font` | Fonte do texto secundário | `"Poppins-Semibold"` | | `--wrapper-secondary-font-weight` | Peso da fonte secundária | `600` | | `--wrapper-text-font-size` | Tamanho da fonte do texto do widget | `1em` | | `--wrapper-title-font-size` | Tamanho da fonte do título do widget | `1.4em` | | `--wrapper-title-font-size-mobile` | Tamanho da fonte do título do widget em resoluções móveis | `1.125em` | | `--wrapper-line-height` | Altura da linha do texto | `1.75em` | | `--wrapper-vertical-align` | Alinhamento vertical do texto no contêiner | `center` | | `--wrapper-text-align` | Alinhamento horizontal do texto no contêiner | `center` | | **Variáveis de design** | | | | `--wrapper-document-border-width` | Largura da borda da transmissão de vídeo | `0.225em` | | `--wrapper-diagnostic-border-width` | Largura da borda da mensagem informativa | `0.175em` | | `--wrapper-border-radius` | Raio da borda dos botões | `0.5em` | | `--wrapper-error-icon-max-width` | Largura máxima do ícone da tela de erro | `unset` | | **Visibilidade do logo** | | | | `--wrapper-display-logo` | Mostrar ou ocultar o logo (usar `block` para mostrar ou `none` para ocultar) | `none` | **Exemplo**: ```css facephi-sdk-provider { --wrapper-color-primary: #3f2eff; --wrapper-color-capture-success: #00aa00; --wrapper-color-diagnostic-primary: #f0f0f0; } ``` *** ## Personalização do modo escuro Os componentes do SDK Provider podem ser facilmente adaptados a temas de modo escuro sobrescrevendo as variáveis CSS pelos valores de cor adequados. A seguir, são mostrados exemplos de configuração mínima para cada categoria de componentes. ### Modo escuro para os componentes do SDK Aplique estas variáveis para personalizar File Uploader, Choose Document, QR Widget e o restante dos componentes principais do SDK em modo escuro: ```css facephi-sdk-provider { /* Componentes del SDK */ --backgroundColor: #1D2C4D; --color-background-primary: #17223B; --color-background-hover: #0E1B3D; --color-background-disabled: #243760; --color-text-primary: #ffffff; --color-text-secondary: #ffffff; --color-text-disabled: #6b7a90; --color-text-on-primary: #10192B; --color-border-primary: #3d4a6c; --color-state-error: #e85550; --color-state-success: #2d9d5f; --secondaryColor: #5b8def; --tertiaryColor: #4a6bc9; /* Animações do tutorial */ --color-tutorial-computer-bg: #4c7cfc; --color-tutorial-avatar-bg: #2B50B6; --color-tutorial-check: #2d9d5f; --color-tutorial-progress: #5fc982; --color-tutorial-capture: #2d9d5f; --color-tutorial-device-bg: #2B50B6; --color-tutorial-scan-line: #5fc982; --color-tutorial-earrings: #f4a485; /* Selphi e SelphID */ --wrapper-color-background: #1D2C4D; --wrapper-color-primary: #5b8def; --wrapper-color-secondary: #1D2C4D; --wrapper-color-hover: #4a6bc9; --wrapper-color-primary-text: #ffffff; --wrapper-color-secondary-text: #ffffff; --wrapper-color-progress-bar: #5b8def; --wrapper-color-loading: #ffffff; --wrapper-color-tutorial-background: #526080; --wrapper-color-tutorial-success: #2d9d5f; --wrapper-color-diagnostic-primary: #243760; } ``` {% hint style="info" %} **Dica**: Você pode combinar essas variáveis de modo escuro com uma media query CSS para mudar de tema automaticamente de acordo com as preferências do usuário: {% endhint %} ```css @media (prefers-color-scheme: dark) { facephi-sdk-provider { /* Aplique aqui as variáveis de modo escuro */ } } ``` *** ## Propriedade de Language A propriedade de Language neste componente provedor do SDK oferece uma abordagem sólida e flexível para a seleção de idioma e a internacionalização. Suporta traduções predefinidas para Espanhol (padrão), Inglês e Português, e também pode ser estendida com arquivos de tradução personalizados. Esta propriedade aceita três tipos: um enum `Language` integrado, uma string (como URL para um JSON de tradução) ou um objeto para configuração personalizada. Idiomas padrão: * `é`: Textos em espanhol (valor padrão). * `en`: Textos em inglês. * `pt`: Textos em português. Tipo de propriedade: `Language | string | object` ### Tipos suportados e uso **1. Enum Language** Use o enum predefinido para os idiomas suportados por padrão. Uso: ```jsx ``` **2. String (URL para JSON de Tradução)** Passe uma string para a propriedade de Language para obter um arquivo JSON que contenha traduções completas ou parciais para um ou mais widgets dentro do componente provedor do SDK. Exemplos: ```jsx // Diretório local // CDN ``` Esquema JSON: O nível raiz deve ser um objeto que contenha uma ou mais das seguintes chaves de Widget: * `sdk` * `selphi` * `selphid` {% hint style="info" %} A configuração dos seguintes componentes é realizada dentro do elemento `sdk`: * **FileUploader** (Upload de arquivos). * **VideoProvider** (Serviço de gravação de vídeo). {% endhint %} Cada objeto permitirá a edição total ou parcial dos textos utilizados dentro de seus componentes. Estrutura de exemplo: ```json { "sdk": { ... }, "selphi": { ... }, "selphid": { ... }, } ``` > Observação: Se nenhuma dessas quatro chaves estiver presente, o componente provedor do SDK voltará para o idioma padrão: espanhol. Estrutura JSON – Opções **1. Seleção de idioma padrão: Especifique um idioma existente para um Widget:** ```json { "sdk": "en", "selphi": "pt" } ``` **2. Substituições parciais de tradução: Isso fornece uma forma de sobrescrever literais específicos para um widget/idioma.** ```json { "sdk": "en", "selphi": { "en": { "Initializing...": "Espere um segundo..." } }, "selphid": { "en": { "Initializing...": "Espere um segundo..." } } } ``` {% hint style="info" %} O literal substituído deve coincidir exatamente com uma chave de tradução existente. Consulte a seção de Literais de Widget para uma lista completa. {% endhint %} **3. Adicionar um Novo Idioma: Para definir um idioma completamente novo, forneça todos os literais necessários para o(s) widget(s) correspondente(s).** ```json { "sdk": { "Literal 1": "Tradução para literal 1", "Literal 2": "Tradução para literal 2", "...": "..." } } ``` Exemplo em coreano: ```json { "sdk": { "The process has been completed": "프로세스가 완료되었습니다", "Ready": "안녕, 친구", // ... todos os demais literais } } ``` {% hint style="warning" %} Ao adicionar um novo idioma, você deve fornecer todos os literais necessários para cada widget afetado. {% endhint %} **4. Combinação de Opções: Você pode combinar seleções de idioma padrão, substituições parciais e novas definições de idioma dentro do mesmo objeto ou JSON, conforme necessário.** Exemplo: ```json { "sdk": "en", "selphid": { "en": { "Initializing...": "Espere um segundo..." } }, "recruitment": { "Start": "Vamos começar", "Finish": "Fim" // ...restante dos literais necessários para este widget } } ``` **3. Objeto (Atribuição Direta)** Você também pode passar diretamente um objeto com o mesmo esquema do JSON descrito anteriormente. ```javascript myComponent.language = { sdk: { /* ... */ }, selphi: { /* ... */ } } ``` #### Comportamento de reserva (fallback) * Se a tradução fornecida (seja por URL ou por objeto) não contiver nenhuma chave raiz válida (sdk, selphi, selphid, recruitment), será usado o idioma padrão: espanhol. * Qualquer literal ausente para um idioma novo também voltará aos valores padrão desse literal em espanhol. *** ### Modelos de literais A lista completa de literais de tradução para cada widget, necessários para criar substituições completas ou parciais, pode ser encontrada aqui: **Literais do SDK Provider**: {% columns %} {% column %} **Espanhol** {% file src="/files/474e71728ce7f8ad366fa5db8cbbbf7fa48b9142" %} {% endcolumn %} {% column %} **Inglês** {% file src="/files/20248b3724beda81cfdff838237104a6c30b2799" %} {% endcolumn %} {% column %} **Português** {% file src="/files/fac84f70c1eacfb291a4757a8e9eddd2a9b0eef5" %} {% endcolumn %} {% column %} **Modelo** {% file src="/files/0a60873b98279009d1eee6354171eb51d87efbc8" %} {% endcolumn %} {% endcolumns %} {% hint style="info" %} Neste objeto/arquivo também são configuradas as strings dos componentes: * FileUploader * VideoProvider * VideoAssistance {% endhint %} ```typescript // Exemplo de uso language = { sdk = sdkCustomJson } ``` **Literais do SelphID**: {% columns %} {% column %} Espanhol {% file src="/files/3d82c0e9f8bfda4ec2486a7e5c3c8cbff91c3ac6" %} {% endcolumn %} {% column %} Inglês {% file src="/files/51d659c92de7a7e02d2231e4df0187c3b8e6328c" %} {% endcolumn %} {% column %} Português {% file src="/files/d56105db894dec9b8a7b1c6eb8c302fcc664e97a" %} {% endcolumn %} {% column %} Modelo {% file src="/files/7a4e71b2181354fcdbc8933f9365de784cc2e2c2" %} {% endcolumn %} {% endcolumns %} ```typescript // Exemplo de uso language = { sdk = { ... }, selphid: selphidCustomJson } ``` **Literais do Selphi**: {% columns %} {% column %} **Espanhol** {% file src="/files/54b0644629b7df0463479cea828a9ef54a10194f" %} {% endcolumn %} {% column %} **inglês** {% file src="/files/05db141b59eae1018e83b27e2c5b1d9c559f89ff" %} {% endcolumn %} {% column %} **Português** {% file src="/files/bcc3bddcfc84121d6b450e68614b06648b2b10bd" %} {% endcolumn %} {% column %} **Modelo** {% file src="/files/fbe893c94a68d37ee2723a253d1874cb89f46087" %} {% endcolumn %} {% endcolumns %} ```typescript // Exemplo de uso language = { sdk = { ... }, selphi: selphiCustomJson } ``` *** ### Exemplos de casos de uso Alterar o componente para inglês ```jsx ``` Adicionar coreano usando um JSON de CDN ```jsx ``` Onde `kr.json` es: ```json { "sdk": { // ... Traduções coreanas para todos os literais do SDK } } ``` Combinar diferentes cenários ```json { "sdk": "en", "selphi": { "en": { "Starting camera...": "Preparando a câmera...", "Initializing...": "Espere um segundo..." } }, "recruitment": { // ...conjunto completo de literais chineses necessários } } ``` #### Notas e recomendações * Ao substituir ou adicionar traduções, certifique-se de que todos os literais necessários para o widget desejado sejam fornecidos para garantir uma experiência de usuário completa no novo idioma. * Para resultados consistentes, certifique-se de que as chaves dos literais coincidam exatamente com as dos pacotes de tradução padrão. * Se um pacote de tradução ou um esquema não corresponder aos requisitos, a reserva (espanhol) será aplicada. #### Apêndice Consulte a Referência de Literais de Widget para obter uma lista completa das chaves de tradução de cada widget separadamente em sua seção de personalização. *** ## Dicas úteis de personalização ### Personalização de animações de carregamento É possível modificar as animações padrão (alterar cores) ou substituí-las por animações personalizadas. #### Alterar a cor das animações de carregamento Para alterar a cor das animações, serão usadas as variáveis CSS oferecidas para esse fim: * Provedor do SDK (reticências de carregamento): `--color-state-loading`. * Componentes Selphi e SelphID: `--wrapper-color-loading`. #### Alterar animação de carregamento As animações de carregamento podem ser substituídas por meio da propriedade `loadingAnimation`. Esta propriedade está disponível para os componentes: * SDK Provider ([link](/docs.facephi-pt-br/sdks/sdk-web/componentes/sdk-provider/propiedades/loadinganimation.md)). * Widget SelphID ([link](/docs.facephi-pt-br/sdks/sdk-web/componentes/selphid-documentos/propiedades/loadinganimation.md)). * Widget Selphi ([link](/docs.facephi-pt-br/sdks/sdk-web/componentes/selphi-biometria-facial/propiedades/loadinganimation.md)). *** ### Ocultar os tempos de carregamento Quando se utiliza uma tela de carregamento personalizada em vez das telas padrão oferecidas pelos componentes do SDK, é possível ocultar as telas de carregamento com um elemento sobreposto até que o primeiro widget esteja totalmente carregado. Isso pode ser controlado por meio dos eventos de "fim de carregamento" dos widgets. **Exemplo (JSX):** overlay controlado por estado; fica oculto quando SelphID emite `moduleLoaded`. ```jsx
{showLoadingOverlay && }
let showLoadingOverlay = true; function handleSelphIDLoaded(ev) { let showLoadingOverlay = false; } ``` {% hint style="info" %} **Observação:** O carregamento do próximo componente (normalmente Selphi) pode ser ocultado da mesma forma, ou então personalizando a animação de carregamento do widget por meio da propriedade `loadingAnimation`. {% endhint %} {% hint style="warning" %} **Aviso:** Certifique-se de que essa sobreposição não cubra possíveis componentes, telas de erro ou fluxos de erro. Esse comportamento é de responsabilidade do implementador. {% endhint %}