商品画像を待っています

Terms & Conditions Popups

商品コード: popup-maker-terms-conditions-popups カテゴリー:

Terms & Conditions Popups アドオンは、Popup Maker プラグインで作成したポップアップ画面を利用して、ソフトウェア利用許諾契約書などの条文を表示して同意の操作をする画面を作ることができます。

規約の確認・同意を必ずさせるフローを作成

ソフトウェアやサービスに関する利用許諾や契約書の文面をページにポップアップ画面で表示させます。

利用者が契約書の文面を確認（条項の画面を最後までスクロールする）を強制してから同意の操作を許可する設定を追加することが可能です。

また、同意されるまで特定の操作（ページ閲覧、フォーム送信 など）を無効にするオプション設定をすることができます。

Terms & Conditions Popups アドオンは、ソフトウェア利用許諾契約書などの条文を表示して利用者から同意の操作をする機能をポップアップ画面に追加するプラグインです。

契約書の文面が最後までスクロールするまで同意の操作を受け付けない設定や、同意されるまでページ上の特定の操作（ページ閲覧、フォーム送信 など）を無効にするオプション設定をすることが可能です。

Terms & Conditions Popupsの使い方

規約の同意を確認するポップアップ画面の作成方法

 

  1. [Popup Maker] > [ポップアップを作成] メニューを選択します。
  2. 表示された [新しいポップアップを作成] 画面のコンテンツを入力する部分の[Popup Makerのショートコード] をクリックします。
  3. 表示されたメニューの一覧から [利用規約ボックス] を選択します。
    規約の同意を確認するポップアップ画面の作成方法
  4. 表示された [利用規約ボックス] 画面で表示する契約書の内容を入力して [保存] ボタンをクリックします。
    規約の同意を確認するポップアップ画面の作成方法
  5. 契約書の文面と [同意する] チェックボックスが追加されます。
    規約の同意を確認するポップアップ画面の作成方法
  6. [ポップアップ設定] 画面の [新しいトリガーを追加] ボタンをクリックします。
    規約の同意を確認するポップアップ画面の作成方法
  7. 表示された [どのタイプのトリガーを追加しますか？] 画面に表示された一覧から [要素のクリック] を選択して [追加] ボタンをクリックします。
    規約の同意を確認するポップアップ画面の作成方法
  8. 表示された [クリックトリガーの設定] 画面で [追加] ボタンをクリックします。
    規約の同意を確認するポップアップ画面の作成方法
  9. [公開] ボタンをクリックしてポップアップ画面を保存します。
  10. 管理画面の [Popup Maker] > [すべてのポップアップ] メニューを選択して表示された一覧からポップアップ画面の [CSS クラス] をコピーします。
    規約の同意を確認するポップアップ画面の作成方法
  11. ポップアップを表示する投稿（または固定ページ）の編集画面を開きます。
  12. ポップアップを表示する場所のブロックを選択して表示された設定画面の [高度な設定] > [追加 CSS クラス] に手順10. でコピーしておいたCSSクラスを貼り付けます。
    規約の同意を確認するポップアップ画面の作成方法
  13. 投稿（または固定ページ）を表示して、[追加 CSS クラス] を設定したブロックをクリックします。
  14. ポップアップ画面で表示されます。
    規約の同意を確認するポップアップ画面の作成方法

規約を確認を強制するポップアップの設定

表示される規約の内容をすべて表示するまで同意操作ができないポップアップ画面を設定することができます。

  1. [Popup Maker] > [ポップアップを作成] メニューを選択します。
  2. 表示された [新しいポップアップを作成] 画面のコンテンツを入力する部分の[Popup Makerのショートコード] をクリックします。
  3. 表示されたメニューの一覧から [利用規約ボックス] を選択します。
    規約を確認を強制するポップアップの設定
  4. [利用規約ボックス] 画面の [規約を最後読むように強制する]  チェックボックスを有効（チェックを入れる）にして [保存] ボタンをクリックします。
    規約を確認を強制するポップアップの設定
  5. 契約書の文面と [同意する] チェックボックスが追加されます。
    規約を確認を強制するポップアップの設定
  6. [ポップアップ設定] 画面の [新しいトリガーを追加] ボタンをクリックします。
    規約を確認を強制するポップアップの設定
  7. 表示された [どのタイプのトリガーを追加しますか？] 画面に表示された一覧から [要素のクリック] を選択して [追加] ボタンをクリックします。
    規約を確認を強制するポップアップの設定
  8. 表示された [クリックトリガーの設定] 画面で [追加] ボタンをクリックします。
    規約を確認を強制するポップアップの設定
  9. [公開] ボタンをクリックしてポップアップ画面を保存します。
  10. 管理画面の [Popup Maker] > [すべてのポップアップ] メニューを選択して表示された一覧からポップアップ画面の [CSS クラス] をコピーします。
    規約を確認を強制するポップアップの設定
  11. ポップアップを表示する投稿（または固定ページ）の編集画面を開きます。
  12. ポップアップを表示する場所のブロックを選択して表示された設定画面の [高度な設定] > [追加 CSS クラス] に手順10. でコピーしておいたCSSクラスを貼り付けます。
    規約を確認を強制するポップアップの設定
  13. 投稿（または固定ページ）を表示して、[追加 CSS クラス] を設定したブロックをクリックします。
  14. 規約の内容がポップアップ画面で表示されます。
    規約を確認を強制するポップアップの設定
  15. 表示直後は [同意する] チェックボックスが無効になっていますが、表示されている文面を最後までスクロールすると有効になります。

トリガーとクッキーの設定方法について

アドオンを有効化にすると、[ポップアップの設定] 画面に新しく２種類のトリガーが追加されます。

利用規約への同意を強制トリガー

ポップアップが表示された場合に、キャンセル操作を無効にすることができます。

  1. [ポップアップ設定] 画面の [新しいトリガーを追加] ボタンをクリックします。
    利用規約への同意を強制トリガー
  2. 表示された [どのタイプのトリガーを追加しますか？] 画面の一覧から [利用規約への同意を強制] を選択して[追加] ボタンをクリックします。
    利用規約への同意を強制トリガー
  3. [利用規約への同意を強制するトリガー設定] 画面で [追加] ボタンをクリックします。
    利用規約への同意を強制トリガー

[利用規約への同意を強制] トリガーを設定した場合、表示されるポップアップ画面には [閉じる] ボタンが非表示になり [同意する] 操作をしない限り、ページ上のコンテンツに戻れなくなります。

利用規約への同意を強制トリガー

クリック防止トリガー

表示されたポップアップで同意するまでページ内のコンテンツを無効にすることができます。

  1. [ポップアップ設定] 画面の [新しいトリガーを追加] ボタンをクリックします。
    クリック防止トリガー
  2. 表示された [どのタイプのトリガーを追加しますか？] 画面の一覧から [クリック防止] を選択して[追加] ボタンをクリックします。
    クリック防止トリガー
  3. [クリック防止のトリガー設定] 画面の [追加する CSS セレクター]  に無効にするコンテンツに設定する要素のCSSを追加します。
    クリック防止トリガー
  4. [追加] ボタンをクリックします。

ポップアップ画面で同意を行うまで、ページ上のコンテンツが無効になります。

クッキーの設定

他のアドオン同様に、有効期限を設定したクッキーを作成することで、同意の操作による制限解除に期間を設定することができます。

  1. [ポップアップ設定] 画面の [新しいクッキーを追加] ボタンをクリックします。
    クッキーの設定
  2. 表示された [いつクッキーを作成しますか？] 画面の一覧から [規約に同意した時] を選択して[追加] ボタンをクリックします。
    クッキーの設定
  3. [クッキーの設定] 画面の [クッキーの有効期限]  に期間を入力します。
    クッキーの設定
  4. [更新] ボタンをクリックします。

[クッキーの有効期限] には次のような期間の単位が利用できます。

seconds（秒）、minutes（分）、hours（時間）、days（日）、months（月）、years（年）
例えば、[クッキーの有効期限] に”3 days” と入力した場合、ポップアップ画面が表示されたページを再表示しても3日間はポップアップ画面は表示されなくなります。