Widget di integrazione

Integra facilmente Passly nel tuo sito web

Avvio rapido

Bastano tre righe per mostrare un generatore sul tuo sito.

Carica lo script

Un tag da inserire ovunque nella pagina. Nessuna dipendenza.

Inserisci un contenitore

Un div con la classe passly-widget, dove deve comparire il generatore.

È tutto

Il widget si inizializza da solo, anche sugli elementi aggiunti in seguito.

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

<div class="passly-widget"
     data-length="16"
     data-format="random"
     data-lang="it"></div>
Anteprima dal vivo

Esempi di utilizzo

Widget di base

Un widget semplice con le opzioni predefinite

<div class="passly-widget"></div>
Anteprima dal vivo

Password forte

Genera una password di 24 caratteri con tutti i tipi di caratteri

<div class="passly-widget"
     data-length="24"
     data-special="true"
     data-exclude-similar="true"></div>
Anteprima dal vivo

Integrazione con un modulo

Compila automaticamente un campo del modulo

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

<div class="passly-widget"
     data-target="#my-password-field"
     data-length="20"></div>
Anteprima dal vivo

Passphrase memorizzabile

Genera una passphrase facile da ricordare

<div class="passly-widget"
     data-format="passphrase"></div>
Anteprima dal vivo

Opzioni widget

Comportamento

AttributoTipoPredefinitoDescrizione
data-formatstringrandomrandom, pronounceable o passphrase
data-lengthinteger16Lunghezza della password (4–128)
data-wordsinteger4Passphrase: numero di parole (3–10)
data-separatorstring-Passphrase: separatore tra le parole
data-auto-generatebooleantrueGenera una password non appena la pagina è caricata

Composizione della password

AttributoTipoPredefinitoDescrizione
data-lowercasebooleantrueLettere minuscole (a-z)
data-uppercasebooleantrueLettere maiuscole (A-Z)
data-digitsbooleantrueNumeri (0-9)
data-specialbooleanfalseCaratteri speciali (!@#$...)
data-exclude-similarbooleanfalseEscludi caratteri simili (il1Lo0O)

Aspetto e integrazione

AttributoTipoPredefinitoDescrizione
data-targetstring—Selettore CSS del campo da compilare automaticamente
data-langstringfrLingua del widget (fr, en, es, de, it, pt, nl, ru, ja, zh)
data-classstring—Classi CSS aggiuntive (temi, varianti)
data-apistringorigine dello scriptSovrascrive l’URL dell’API — da impostare sul tag <script>

Temi pronti all’uso

Scegli un tema per vederne l’anteprima e recuperarne il foglio di stile.

.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;
}

Personalizzazione CSS

Personalizza completamente l’aspetto del widget con le variabili CSS e le classi disponibili:

La dicitura «Fornito da Passly» non può essere nascosta: viene ripristinata automaticamente. Puoi però personalizzarne liberamente lo stile.

Generatore di temi interattivo

Crea il tuo tema personalizzato in tempo reale:

Colori

Dimensioni e tipografia

Temi predefiniti

.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;
}

Integrazione avanzata

// 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);
}