Виджет интеграции

Легко интегрируйте Passly на ваш сайт

Быстрый старт

Достаточно трёх строк, чтобы разместить генератор на вашем сайте.

Подключите скрипт

Один тег, который можно поставить в любом месте страницы. Без зависимостей.

Разместите контейнер

Элемент div с классом passly-widget там, где должен появиться генератор.

Готово

Виджет инициализируется сам, в том числе для элементов, добавленных позже.

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

<div class="passly-widget"
     data-length="16"
     data-format="random"
     data-lang="ru"></div>
Предпросмотр в реальном времени

Примеры использования

Базовый виджет

Простой виджет с настройками по умолчанию

<div class="passly-widget"></div>
Предпросмотр в реальном времени

Надёжный пароль

Генерирует пароль из 24 символов со всеми типами символов

<div class="passly-widget"
     data-length="24"
     data-special="true"
     data-exclude-similar="true"></div>
Предпросмотр в реальном времени

Интеграция с формой

Автоматически заполняет поле формы

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

<div class="passly-widget"
     data-target="#my-password-field"
     data-length="20"></div>
Предпросмотр в реальном времени

Запоминающаяся парольная фраза

Генерирует лёгкую для запоминания парольную фразу

<div class="passly-widget"
     data-format="passphrase"></div>
Предпросмотр в реальном времени

Опции виджета

Поведение

АтрибутТипПо умолчаниюОписание
data-formatstringrandomrandom, pronounceable или passphrase
data-lengthinteger16Длина пароля (4–128)
data-wordsinteger4Парольные фразы: количество слов (3–10)
data-separatorstring-Парольные фразы: разделитель между словами
data-auto-generatebooleantrueГенерировать пароль сразу при загрузке

Состав пароля

АтрибутТипПо умолчаниюОписание
data-lowercasebooleantrueСтрочные буквы (a-z)
data-uppercasebooleantrueЗаглавные буквы (A-Z)
data-digitsbooleantrueЦифры (0-9)
data-specialbooleanfalseСпециальные символы (!@#$...)
data-exclude-similarbooleanfalseИсключить похожие символы (il1Lo0O)

Внешний вид и интеграция

АтрибутТипПо умолчаниюОписание
data-targetstring—CSS-селектор поля для автоматического заполнения
data-langstringfrЯзык виджета (fr, en, es, de, it, pt, nl, ru, ja, zh)
data-classstring—Дополнительные CSS-классы (темы, варианты)
data-apistringисточник скриптаПереопределяет URL API — указывается на теге <script>

Готовые темы

Выберите тему, чтобы увидеть предпросмотр и получить её таблицу стилей.

.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

Полностью настройте внешний вид виджета с помощью доступных CSS-переменных и классов:

Надпись «Разработано Passly» нельзя скрыть: она восстанавливается автоматически. Однако вы можете свободно её оформлять.

Интерактивный генератор тем

Создайте собственную тему в реальном времени:

Цвета

Размеры и типографика

Готовые темы

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

Расширенная интеграция

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