Integratie-widget

Integreer Passly eenvoudig in uw website

Snelstart

Drie regels volstaan om een generator op uw site te tonen.

Laad het script

Eén tag, overal op de pagina te plaatsen. Zonder afhankelijkheden.

Plaats een container

Een div met de klasse passly-widget, daar waar de generator moet verschijnen.

Dat is alles

De widget initialiseert zichzelf, ook op later toegevoegde elementen.

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

<div class="passly-widget"
     data-length="16"
     data-format="random"
     data-lang="nl"></div>
Live voorbeeld

Gebruiksvoorbeelden

Eenvoudige widget

Een eenvoudige widget met de standaardopties

<div class="passly-widget"></div>
Live voorbeeld

Sterk wachtwoord

Genereert een wachtwoord van 24 tekens met alle tekentypes

<div class="passly-widget"
     data-length="24"
     data-special="true"
     data-exclude-similar="true"></div>
Live voorbeeld

Integratie met een formulier

Vult automatisch een formulierveld in

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

<div class="passly-widget"
     data-target="#my-password-field"
     data-length="20"></div>
Live voorbeeld

Onthoudbare wachtwoordzin

Genereert een gemakkelijk te onthouden wachtwoordzin

<div class="passly-widget"
     data-format="passphrase"></div>
Live voorbeeld

Widget-opties

Gedrag

AttribuutTypeStandaardBeschrijving
data-formatstringrandomrandom, pronounceable of passphrase
data-lengthinteger16Wachtwoordlengte (4–128)
data-wordsinteger4Wachtwoordzinnen: aantal woorden (3–10)
data-separatorstring-Wachtwoordzinnen: scheidingsteken tussen de woorden
data-auto-generatebooleantrueMeteen bij het laden een wachtwoord genereren

Samenstelling van het wachtwoord

AttribuutTypeStandaardBeschrijving
data-lowercasebooleantrueKleine letters (a-z)
data-uppercasebooleantrueHoofdletters (A-Z)
data-digitsbooleantrueCijfers (0-9)
data-specialbooleanfalseSpeciale tekens (!@#$...)
data-exclude-similarbooleanfalseVergelijkbare tekens uitsluiten (il1Lo0O)

Uiterlijk en integratie

AttribuutTypeStandaardBeschrijving
data-targetstring—CSS-selector van het automatisch in te vullen veld
data-langstringfrTaal van de widget (fr, en, es, de, it, pt, nl, ru, ja, zh)
data-classstring—Aanvullende CSS-klassen (thema’s, varianten)
data-apistringoorsprong van het scriptOverschrijft de API-URL — op de <script>-tag te plaatsen

Kant-en-klare thema’s

Kies een thema om het voorbeeld te bekijken en het stijlblad op te halen.

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

CSS-aanpassing

Pas het uiterlijk van de widget volledig aan met de beschikbare CSS-variabelen en klassen:

De vermelding «Aangeboden door Passly» kan niet worden verborgen: ze wordt automatisch hersteld. U mag ze wel vrij vormgeven.

Interactieve themagenerator

Maak in realtime uw eigen aangepaste thema:

Kleuren

Afmetingen en typografie

Vooraf ingestelde thema’s

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

Geavanceerde integratie

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