Widget de integración

Integra fácilmente Passly en tu sitio web

Inicio rápido

Bastan tres líneas para mostrar un generador en su sitio.

Cargue el script

Una etiqueta que puede colocarse en cualquier parte de la página. Sin dependencias.

Coloque un contenedor

Un div con la clase passly-widget, allí donde deba aparecer el generador.

Eso es todo

El widget se inicializa solo, incluso en los elementos añadidos posteriormente.

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

<div class="passly-widget"
     data-length="16"
     data-format="random"
     data-lang="es"></div>
Vista previa en directo

Ejemplos de uso

Widget básico

Un widget sencillo con las opciones por defecto

<div class="passly-widget"></div>
Vista previa en directo

Contraseña fuerte

Genera una contraseña de 24 caracteres con todos los tipos de caracteres

<div class="passly-widget"
     data-length="24"
     data-special="true"
     data-exclude-similar="true"></div>
Vista previa en directo

Integración con formulario

Rellena automáticamente un campo de formulario

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

<div class="passly-widget"
     data-target="#my-password-field"
     data-length="20"></div>
Vista previa en directo

Frase de contraseña memorizable

Genera una frase de contraseña fácil de recordar

<div class="passly-widget"
     data-format="passphrase"></div>
Vista previa en directo

Opciones del widget

Comportamiento

AtributoTipoPor defectoDescripción
data-formatstringrandomrandom, pronounceable o passphrase
data-lengthinteger16Longitud de la contraseña (4–128)
data-wordsinteger4Frases de contraseña: número de palabras (3–10)
data-separatorstring-Frases de contraseña: separador entre palabras
data-auto-generatebooleantrueGenerar una contraseña nada más cargar la página

Composición de la contraseña

AtributoTipoPor defectoDescripción
data-lowercasebooleantrueLetras minúsculas (a-z)
data-uppercasebooleantrueLetras mayúsculas (A-Z)
data-digitsbooleantrueNúmeros (0-9)
data-specialbooleanfalseCaracteres especiales (!@#$...)
data-exclude-similarbooleanfalseExcluir caracteres similares (il1Lo0O)

Apariencia e integración

AtributoTipoPor defectoDescripción
data-targetstring—Selector CSS del campo que se rellenará automáticamente
data-langstringfrIdioma del widget (fr, en, es, de, it, pt, nl, ru, ja, zh)
data-classstring—Clases CSS adicionales (temas, variantes)
data-apistringorigen del scriptSobrescribe la URL de la API — colóquelo en la etiqueta <script>

Temas listos para usar

Elija un tema para ver su vista previa y obtener su hoja de estilos.

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

Personalización CSS

Personalice por completo el aspecto del widget con las variables CSS y las clases disponibles:

La mención «Desarrollado por Passly» no puede ocultarse: se restaura automáticamente. En cambio, puede darle el estilo que desee.

Generador de temas interactivo

Cree su propio tema personalizado en tiempo real:

Colores

Dimensiones y tipografía

Temas predefinidos

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

Integración avanzada

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