Integrations-Widget

Integrieren Sie Passly einfach in Ihre Website

Schnellstart

Drei Zeilen genügen, um einen Generator auf Ihrer Website anzuzeigen.

Skript einbinden

Ein Tag, das an beliebiger Stelle der Seite stehen kann. Ohne Abhängigkeiten.

Container platzieren

Ein div mit der Klasse passly-widget, dort wo der Generator erscheinen soll.

Das war’s

Das Widget initialisiert sich selbst — auch bei nachträglich hinzugefügten Elementen.

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

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

Anwendungsbeispiele

Einfaches Widget

Ein einfaches Widget mit den Standardoptionen

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

Starkes Passwort

Generiert ein Passwort mit 24 Zeichen und allen Zeichentypen

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

Integration in ein Formular

Füllt automatisch ein Formularfeld aus

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

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

Merkbare Passphrase

Generiert eine leicht zu merkende Passphrase

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

Widget-Optionen

Verhalten

AttributTypStandardBeschreibung
data-formatstringrandomrandom, pronounceable oder passphrase
data-lengthinteger16Passwortlänge (4–128)
data-wordsinteger4Passphrasen: Anzahl der Wörter (3–10)
data-separatorstring-Passphrasen: Trennzeichen zwischen den Wörtern
data-auto-generatebooleantrueBeim Laden der Seite sofort ein Passwort generieren

Zusammensetzung des Passworts

AttributTypStandardBeschreibung
data-lowercasebooleantrueKleinbuchstaben (a-z)
data-uppercasebooleantrueGroßbuchstaben (A-Z)
data-digitsbooleantrueZahlen (0-9)
data-specialbooleanfalseSonderzeichen (!@#$...)
data-exclude-similarbooleanfalseÄhnliche Zeichen ausschließen (il1Lo0O)

Aussehen und Integration

AttributTypStandardBeschreibung
data-targetstring—CSS-Selektor des automatisch auszufüllenden Feldes
data-langstringfrSprache des Widgets (fr, en, es, de, it, pt, nl, ru, ja, zh)
data-classstring—Zusätzliche CSS-Klassen (Themes, Varianten)
data-apistringUrsprung des SkriptsÜberschreibt die API-URL — auf dem <script>-Tag setzen

Sofort einsetzbare Themes

Wählen Sie ein Theme, um die Vorschau zu sehen und sein Stylesheet zu erhalten.

.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-Anpassung

Passen Sie das Erscheinungsbild des Widgets mit den verfügbaren CSS-Variablen und Klassen vollständig an:

Der Hinweis „Bereitgestellt von Passly“ kann nicht ausgeblendet werden: Er wird automatisch wiederhergestellt. Sie können ihn jedoch frei gestalten.

Interaktiver Theme-Generator

Erstellen Sie Ihr eigenes Theme in Echtzeit:

Farben

Abmessungen & Typografie

Vordefinierte Themes

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

Erweiterte Integration

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