Widget de integração

Integre facilmente o Passly em seu site

Início rápido

Bastam três linhas para apresentar um gerador no seu site.

Carregue o script

Uma etiqueta a colocar em qualquer parte da página. Sem dependências.

Coloque um contentor

Uma div com a classe passly-widget, onde o gerador deve aparecer.

É tudo

O widget inicializa-se sozinho, incluindo nos elementos adicionados posteriormente.

<!-- Passly Widget -->
<script src="https://passly.fr/widget.js" ></script>

<div class="passly-widget"
     data-length="16"
     data-format="random"
     data-lang="pt"></div>
Pré-visualização em direto

Exemplos de utilização

Widget básico

Um widget simples com as opções predefinidas

<div class="passly-widget"></div>
Pré-visualização em direto

Palavra-passe forte

Gera uma palavra-passe de 24 caracteres com todos os tipos de caracteres

<div class="passly-widget"
     data-length="24"
     data-special="true"
     data-exclude-similar="true"></div>
Pré-visualização em direto

Integração com formulário

Preenche automaticamente um campo de formulário

<input type="text" id="my-password-field">

<div class="passly-widget"
     data-target="#my-password-field"
     data-length="20"></div>
Pré-visualização em direto

Frase-passe memorizável

Gera uma frase-passe fácil de memorizar

<div class="passly-widget"
     data-format="passphrase"></div>
Pré-visualização em direto

Opções do widget

Comportamento

AtributoTipoPredefinidoDescrição
data-formatstringrandomrandom, pronounceable ou passphrase
data-lengthinteger16Comprimento da palavra-passe (4–128)
data-wordsinteger4Frases-passe: número de palavras (3–10)
data-separatorstring-Frases-passe: separador entre as palavras
data-auto-generatebooleantrueGerar uma palavra-passe logo ao carregar a página

Composição da palavra-passe

AtributoTipoPredefinidoDescrição
data-lowercasebooleantrueLetras minúsculas (a-z)
data-uppercasebooleantrueLetras maiúsculas (A-Z)
data-digitsbooleantrueNúmeros (0-9)
data-specialbooleanfalseCaracteres especiais (!@#$...)
data-exclude-similarbooleanfalseExcluir caracteres similares (il1Lo0O)

Aspeto e integração

AtributoTipoPredefinidoDescrição
data-targetstring—Seletor CSS do campo a preencher automaticamente
data-langstringfrIdioma do widget (fr, en, es, de, it, pt, nl, ru, ja, zh)
data-classstring—Classes CSS adicionais (temas, variantes)
data-apistringorigem do scriptSubstitui o URL da API — colocar na etiqueta <script>

Temas prontos a usar

Escolha um tema para ver a pré-visualização e obter a respetiva folha de estilos.

.passly-widget-wrapper.blue-theme {
    --passly-primary: #2563EB;
    --passly-primary-hover: #1D4ED8;
    --passly-primary-light: #3B82F6;
    --passly-bg: #111827;
    --passly-bg-card: #1F2937;
    --passly-text: #F3F4F6;
    --passly-text-light: #9CA3AF;
    --passly-border: #374151;

    background: linear-gradient(135deg, var(--passly-bg), var(--passly-bg-card)) !important;
    border: 1px solid var(--passly-primary) !important;
}

.passly-widget-wrapper.blue-theme .passly-generate-btn {
    background: linear-gradient(135deg, var(--passly-primary), var(--passly-primary-hover)) !important;
}

Personalização CSS

Personalize completamente o aspeto do widget com as variáveis CSS e as classes disponíveis:

A menção «Desenvolvido por Passly» não pode ser ocultada: é reposta automaticamente. Pode, no entanto, personalizar livremente o seu estilo.

Gerador de temas interativo

Crie o seu próprio tema personalizado em tempo real:

Cores

Dimensões e tipografia

Temas predefinidos

.passly-widget-wrapper.custom-theme {
    --passly-primary: #DC2626;
    --passly-primary-hover: #c81212;
    --passly-primary-light: #f03a3a;
    --passly-bg: #1A1A1A;
    --passly-text: #E8E8E8;
    --passly-border: #2A2A2A;
    --passly-radius: 10px;
    --passly-font-size: 15px;
}

Integração avançada

// Le widget s'initialise seul ; il suffit d'écouter ses événements.
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.passly-widget').forEach((widget) => {
        widget.addEventListener('passly:generated', (event) => {
            console.log('Mot de passe généré :', event.detail.password);
            console.log('Entropie :', event.detail.entropyBits, 'bits');
        });
    });
});

// Création dynamique
function createWidget(container) {
    const widget = document.createElement('div');
    widget.className = 'passly-widget';
    widget.dataset.length = '20';
    widget.dataset.special = 'true';
    container.appendChild(widget);

    // Facultatif : l'observateur interne détecte déjà les nouveaux nœuds.
    window.PasslyWidget?.init(container);
}