Integration Widget

Easily integrate Passly on your website

Quick start

Three lines are enough to put a generator on your site.

Load the script

One tag, anywhere on the page. No dependency.

Add a container

A div with the passly-widget class, where the generator should appear.

That's it

The widget initialises itself, including on nodes added later.

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

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

Usage examples

Basic widget

A simple widget with default options

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

Strong password

Generates a 24-character password with every character type

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

Form integration

Automatically fills a form field

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

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

Memorable passphrase

Generates an easy-to-remember passphrase

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

Widget Options

Behaviour

AttributeTypeDefaultDescription
data-formatstringrandomrandom, pronounceable or passphrase
data-lengthinteger16Password length (4–128)
data-wordsinteger4Passphrases: number of words (3–10)
data-separatorstring-Passphrases: separator between words
data-auto-generatebooleantrueGenerate a password as soon as the page loads

Password composition

AttributeTypeDefaultDescription
data-lowercasebooleantrueLowercase letters (a-z)
data-uppercasebooleantrueUppercase letters (A-Z)
data-digitsbooleantrueNumbers (0-9)
data-specialbooleanfalseSpecial characters (!@#$...)
data-exclude-similarbooleanfalseExclude similar characters (il1Lo0O)

Appearance and integration

AttributeTypeDefaultDescription
data-targetstring—CSS selector of the field to fill automatically
data-langstringfrWidget language (fr, en, es, de, it, pt, nl, ru, ja, zh)
data-classstring—Additional CSS classes (themes, variants)
data-apistringscript originOverride the API URL — set it on the <script> tag

Ready-made themes

Pick a theme to preview it and copy its stylesheet.

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

Fully restyle the widget through its CSS variables and public class names:

The “Powered by Passly” credit cannot be hidden: it is restored automatically. You are free to style it however you like, though.

Interactive theme generator

Build your own theme in real time:

Colors

Dimensions & typography

Presets

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

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