BricksBuilder の Popup Builder（ポップアップビルダー） は、柔軟でカスタマイズ性の高いポップアップを、サイト内の好きな場所に表示するための機能です。
この機能を使えば、訪問者にコンテンツやオファーを効果的に見せることができます。
なお、この記事はBricksBuilderオフィシャルサイトの日本語解説です。
ポップアップは「テンプレート」として作成する
Bricks におけるポップアップは、テンプレート で作成します。
まずは、Bricks のテンプレート新規作成で 「Popup」 を選び、編集画面へ進みます。
ほかのテンプレートと見た目が少し違い、
・ポップアップ内容がキャンバス中央に表示される
・「Template Settings」に Popup セクション がある
・「Populated Content」がない
という特徴があります。
ポップアップ内容の作成は、ほかのページ同様に ドラッグ & ドロップで要素を追加・編集 していくだけです。
ポップアップの基本設定
条件（Conditions）
どのページ・投稿・アーカイブにポップアップを表示するか指定します。
この設定がないと、ポップアップは表示されません。
テンプレート条件はたとえば：
- サイト全体
- 特定ページ
- 投稿タイプ
- アーカイブ
- エラーページ
など、細かく指定可能です。
Popup 固有の設定
Popup Settings
Settings > Template Settings > Popup に、ポップアップ固有の設定が揃っています。
ここでは：
- オーバーレイ（背景の影付きレイヤー）スタイル
- コンテンツのスタイル
- グローバル設定（Theme Styles 内のPopupsセクション）
などを設定できます。
ポップアップのトリガー（Interactions）
Popup Builder の大きな特徴は、様々なブラウザイベントをトリガーとして設定できることです。
代表的なトリガー例
- ページのコンテンツ読み込み後
- スクロール位置（px / % / vh）
- マウスがウィンドウ外に出たとき
- クリック
- ホバー など
たとえば、ニュースレターの登録促進や特別オファー表示のために、「Content Loaded（読み込み後）」 をトリガーにするのがよく使われます。
※オーバーレイ部分や ESCキー押下でポップアップを閉じる のはデフォルトで有効です。
ポップアップの表示制限（Popup Limit）
ポップアップは、通常トリガーが発火するたびに毎回表示されますが、回数制限を設けることもできます。
制限は ポップアップテンプレート編集内の「Popup Limit」 で設定できます。
LIMIT 種類と特徴
| 種類 | 保存場所 | リセットタイミング |
|---|---|---|
| Per page load | window.brx_popup_{id}_total | ページロードごと |
| Per session | sessionStorage.brx_popup_{id}_total | タブを閉じるまで |
| Across sessions | localStorage.brx_popup_{id}_total | ブラウザストレージ削除まで |
開発者向け機能：イベント & JavaScript API
Popup Builder は JavaScript API も提供しており、より高度な制御が可能です。
JavaScript でポップアップを開閉
bricksOpenPopup(3321)
bricksClosePopup(3321)
上記のように、テンプレートIDか要素ノードを指定して開閉できます。
イベントリスナー例
ポップアップが開かれたとき／閉じられたときに、イベントを補足することもできます：
document.addEventListener('bricks/popup/open', (event) => {
console.log(`Popup ${event.detail.popupId} opened`)
})
document.addEventListener('bricks/popup/close', (event) => {
console.log(`Popup ${event.detail.popupId} closed`)
})
このようにして、追加のアニメーションやログ処理などを実装することが可能です。
まとめ
Bricks の Popup Builder は、テンプレートを使って 完全カスタマイズ可能なポップアップ を作成できる機能です。
主なポイントは：
- ポップアップもテンプレートとして作成できる
- 表示条件（Conditions）を設定する必要がある
- 豊富なトリガーで表示タイミングを制御できる
- 表示回数制限も可能
- JavaScript API で高度な制御ができる
これらを活用することで、コンバージョン率の向上や、ユーザーのアクションを促す効果的なポップアップを実装できます。
