統合ウィジェット

Passlyをウェブサイトに簡単に統合

クイックスタート

3 行だけでサイトにジェネレーターを表示できます。

スクリプトを読み込む

ページのどこにでも置けるタグ 1 つ。依存関係はありません。

コンテナーを配置する

ジェネレーターを表示したい場所に passly-widget クラスの div を置きます。

以上です

ウィジェットは自動的に初期化されます。後から追加された要素にも対応します。

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

<div class="passly-widget"
     data-length="16"
     data-format="random"
     data-lang="ja"></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スクリプトのオリジンAPI の URL を上書きします — <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);
}