Widget d'intégration

Intégrez facilement Passly sur votre site

Démarrage rapide

Trois lignes suffisent pour afficher un générateur sur votre site.

Chargez le script

Une balise à placer n'importe où dans la page. Aucune dépendance.

Placez un conteneur

Un div avec la classe passly-widget, là où le générateur doit apparaître.

C'est tout

Le widget s'initialise seul, y compris sur les éléments ajoutés après coup.

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

<div class="passly-widget"
     data-length="16"
     data-format="random"
     data-lang="fr"></div>
Aperçu en direct

Exemples d'utilisation

Widget basique

Un widget simple avec les options par défaut

<div class="passly-widget"></div>
Aperçu en direct

Mot de passe fort

Génère un mot de passe de 24 caractères avec tous les types de caractères

<div class="passly-widget"
     data-length="24"
     data-special="true"
     data-exclude-similar="true"></div>
Aperçu en direct

Intégration avec formulaire

Remplit automatiquement un champ de formulaire

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

<div class="passly-widget"
     data-target="#my-password-field"
     data-length="20"></div>
Aperçu en direct

Passphrase mémorisable

Génère une phrase de passe facile à retenir

<div class="passly-widget"
     data-format="passphrase"></div>
Aperçu en direct

Options du widget

Comportement

AttributTypePar défautDescription
data-formatstringrandomrandom, pronounceable ou passphrase
data-lengthinteger16Longueur du mot de passe (4–128)
data-wordsinteger4Phrases de passe : nombre de mots (3–10)
data-separatorstring-Phrases de passe : séparateur entre les mots
data-auto-generatebooleantrueGénérer un mot de passe dès le chargement

Composition du mot de passe

AttributTypePar défautDescription
data-lowercasebooleantrueLettres minuscules (a-z)
data-uppercasebooleantrueLettres majuscules (A-Z)
data-digitsbooleantrueChiffres (0-9)
data-specialbooleanfalseCaractères spéciaux (!@#$...)
data-exclude-similarbooleanfalseExclure les caractères similaires (il1Lo0O)

Apparence et intégration

AttributTypePar défautDescription
data-targetstring—Sélecteur CSS du champ à remplir automatiquement
data-langstringfrLangue du widget (fr, en, es, de, it, pt, nl, ru, ja, zh)
data-classstring—Classes CSS additionnelles (thèmes, variantes)
data-apistringorigine du scriptSurcharge de l'URL de l'API — à poser sur la balise <script>

Thèmes prêts à l'emploi

Choisissez un thème pour en voir l'aperçu et récupérer sa feuille de style.

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

Personnalisation CSS

Personnalisez complètement l'apparence du widget avec les variables CSS et les classes disponibles :

La mention « Propulsé par Passly » ne peut pas être masquée : elle est restaurée automatiquement. Vous pouvez en revanche la styler librement.

Générateur de thème interactif

Créez votre propre thème personnalisé en temps réel :

Couleurs

Dimensions & typographie

Thèmes prédéfinis

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

Intégration avancée

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