Boxzillaの使い方とメリット

 サイトを運営しているともっとお問い合わせフォームから連絡が欲しかったり、メールマガジンを始めたい、と思ったことがありませんか?

 私はメールマガジンなどはやっておりませんが、もっと気軽な気持ち(荒らしは遠慮しますが(笑))で問合せが来てほしいなぁと思うことは多々あります。

 しかし、大手のホームページみたいに画面の中心にポップアップ広告が出てきて閉じないと本文が見えない、という閲覧者に手間をかけさせたくないという気持ちもわかります。

 興味を引きたい、利便性を高めたい、だけど閲覧者に嫌がられたくないというのはホームページを作成する側としては悩むところですね。

 そこで簡単に設定可能かつ見栄えの変更も出来て邪魔になりにくいポップアップを作成できるプラグイン『Boxzilla』の使い方とメリットをご紹介いたします。

 


 こちらのプラグインは2019/6/20現在では日本語に対応しておりませんが、簡単に設定が可能なので是非ご利用ください。

メリット

・簡単にポップアップウィンドウが作成できる

・表示する位置を調整可能

・他プラグイン呼び出しのショートコードが使用できる


 私的には他プラグイン呼び出しのショートコードが使用できるのが一番の魅力かな、と思います。

 Contact FormやMailChimpなどのお問い合わせフォームやメール配信サービスと連携を組むことで、より他のプラグインに対して使用しやすい環境が実現できます。

 今回は使用例でContact Formと連携した使用方法をご説明いたします。

 最初に述べた通り、ポップアップは欲しいですがそれがユーザーの邪魔になって、結果的に滞在率などが落ちてしまったら本末転倒です。

 あくまでユーザーの邪魔にならず、かつ自身のページで主張したい事、ユーザーにとって役立つことを伝えるプラグインとして使いましょう。

 下記の手順にしてご説明いたします。

1.Boxzillaのインストール


 ダッシュボードより『プラグイン』→『新規追加』の順に選択します。

 


 プラグインを追加ページの右枠「プラグインの検索」に『Boxzilla』と入力。


 一番最初にBoxzillaのアイコンが現れますので、『今すぐインストール』→『有効化』と進めましょう。


 有効化まで終了したら左側の一覧に『Boxzilla』の枠が追加されます。
 これでインストール~有効化までの作業は終了です、次は実際に使ってみましょう。

2.使い方の説明


 ダッシュボードより『Boxzilla』→『Add New』の順に選択します。


 ポップアップの新規作成画面になります、各設定の説明をいたします。
 


 表示する内容の入力欄です。ここにお問い合わせフォームへの直リンクや広告の内容を入力します。


 Box Appearance(ボックスの外観)設定を出来ます

 ①Background color : ボックスの背景色

 ②Text color : ボックス内の文字色

 ③Box width : ボックスの幅(px単位)

 ④Border color : 枠線の色

 ⑤Border width : 枠線の幅(px単位)

 ⑥Border style : 枠線の種類
   Solid  : 実線 / Dashed   : ダッシュ線 /Dotted  : 点線 / Double : 二重線

 

 

 Box option ボックスの表示方法などを設定できます。

 ①Load this box if : ポップアップ画面を表示する条件
  any : 特定 all : 全て
   anyにした場合、下記の条件を指定することが出来ます。
    everywhere  : 全て
    if page     : 固定ページの指定 スラッグかIDで指定可能
    if post      : 投稿記事の指定 スラッグかIDで指定可能
    if post tag   : タグの指定 タグ名で指定可能
    if post category : カテゴリーの指定 カテゴリー名で指定可能
    if post type   : 投稿のタイプでの指定
    if URL      : URLでの指定
    if referer   : リファラーでの指定
    if user    : 特定のユーザーでの指定

 ②Box Position : 表示位置設定

 ③Animation : 表示方法 フェードインかスライドインで指定可能

 ④Auto-show box? : 表示する条件 時間、ページ位置、エレメントで指定可能

 ⑤Cookie expiration : 再表示可能までの時間指定

 ⑥Screen width : 表示する端末のサイズを指定、すべての端末に表示したい場合は0のままにする
 スマホ : ~767 / タブレット : 768~991 / PC : 992~

 ⑦Auto-hide? : 自動非表示設定 上にスクロールしたら消す設定

 ⑧Show close icon? : 閉じるボタンアイコンの表示

 ⑨Enable test mode? : テストモードを有効にするか 有効になっている場合、クッキーが設定にかかわらず、すべてのボックスが表示される

 設定は以上になります。

 次は実際の使い方の例と設定を動画でご説明いたします。

 

3.使用例

 

 自分で作る際はまずコンセプトを決めましょう。
 ポップアップを作成することで問合せ数を増やしたいのか、メールマガジンの登録を行いたいのか、特定のページに移動させたいのか、広告として出したいのか。
 そのコンセプトによって作成するポップアップも内容、表示のさせ方、その後の処理なども変わることとなります。

 今回は例としてユーザーの邪魔にならない範囲で問合せ数を増やす、メールマガジンの登録をイメージして作成します。 

 通常の投稿記事を作成していれば簡単に作れますので是非チャレンジしてみてください

 例をご紹介するため下記のように設定しております。

 Box Position  : Bottom Right(画面右下にポップアップを表示)
 Animation   : Slide In(スライドインで表示)
 Auto-show box?  : Yes, after 3 seconds on the page.(ページを開いて3秒後に表示)
 Screen width  : Only show on screens larger than 992px.(992pxーパソコンサイズ以上で表示)
 Show close icon?: はい(閉じるボタンの表示)

 

①問合せ数を増やす(お問い合わせページへのリンク)

 

 まずはクリックしたらリンク先に飛ぶというシンプルなポップアップを作成します。


 Background color : #85f2a4


 リンク先は私のお問い合わせフォームのリンクになっておりますのでhref以降部分はご自身のリンクに書き換えください。
 画面右下にポップアップが表示され、クリックされたらお問い合わせフォームに移動していることがわかります。

②問合せ数を増やすー画像付き(お問い合わせページへのリンク) 

 

 タイトルに下部分にある『メディアを追加』部分より画像を追加し、より興味を引けるポップアップを作成します。

 
 画像は素材ラボ(https://www.sozailab.jp/)麦さんの「正解!の看板を持ったアヒル先生のイラスト」を使用させていただいております。直リンクは良くないのでトップへのリンクを貼らせていただきました。

 
 やはり、画像の方が見栄えが良いですね。
 画像とテキストを組み合わせることで、より閲覧者の興味を引くポップアップを表示させることが可能です。

③メルマガ登録依頼メールを作成する。

  メリット欄にてショートコードでプラグインの呼び出しが可能、と記述させていただきました。③ではコンタクトフォームのショートコードを入力し、メルマガ登録依頼メールを送信できるように設定します。

  コンタクトフォームの自動返信での設定については別記事にてご説明いたします。

  今回使用するものは簡単にメルマガ登録依頼メールを送りたいので出来るだけ簡素なフォームを作成しました。

 


 メールアドレスの入力欄と送信ボタンのみを設置しました。
 フォームの内容を参考にしたい方で入力が面倒でしたら下記をコピーしてください。

 例:メルマガ登録用

お得な情報を配信中!
メルマガ登録はこちらから^^
[email* your-email] </label>
[submit “登録メールを送る”]

 
 作成したお問い合わせフォームのショートコードをコピーして、ポップアップを新規に作成します。


 コンタクトフォームのショートコードをそのまま貼り付けます。
 背景が寂しいのでBackground colorは#「c5eff7」にしておきました。


 メールを送信できたと結果が返ります。
 送った先のメールアドレスを確認します。


 無事にメールが送れていますね、これでBoxzillaを経由してもContact Formが問題なく起動していることが確認出来ました。

 いかがでしょうか。

 Boxzillaは簡単にポップアップを表示することが可能、また他のプラグインプと連携して使用できるプラグインです。

 今回紹介した例ではcssを使用した例などは紹介しておりませんが、cssで体裁を整えればより閲覧者に対して興味を引けるポップアップが作成可能です。

 こちらの記事が皆様の少しでもお役に立てば幸いです。

 

 著者 : マエヒロ

画像を押して、質問に来てね!

タイトルとURLをコピーしました