【ボタン設定】ポップアップ設定方法について
ポップアップの設定方法についての記事です。
その他のチャットボタン設定をご利用したい場合は以下のチャットボタン設定の記事をご参照ください。
- 1 サンプルを参考にボタン設定をしてみましょう。
- 1.1 チャットボタン設定方法
- 1.2 設定済みボタン設定の編集方法について
- 1.3 設定済みボタンをコピーして作成する方法
- 1.4 チャットボタン設定をインポートする方法
- 1.4.1 リビジョン単位でインポートする手順
- 1.4.2 ボタン設定単位でインポートする手順
サンプルを参考にボタン設定をしてみましょう。
チャットボタン設定方法
こちらではポップアップタイプのボタン設定方法をご紹介いたします。
まず、どのようにボタン設定ができるか確認したい場合は、こちらの設定をそのままコピーしてお使いください。
こちらの設定では、全てのページに同じボタン設定が適用されます。
特定のページに表示をさせたい場合はアドバンス設定をご確認ください。
チャットボタン設定 ＞ 「新しく設定をはじめる」ボタン をクリック
「 01.[通常のボタン] ラベル未設定 」をクリック
ラベルを設定
「 01.[通常のボタン] 」のラベルを設定します。
ラベル名は設定自体には影響せず、必須ではありません。
複数ボタン設定を作成する場合は、他のボタン設定との識別のため任意の文字列を入力いただくことを推奨いたします。ボタンの種類を選択
適用するボタンの種類を選択します。「通常のボタン」をクリック
ボタンの種類の中から「ポップアップ」を選択表示優先度を設定
ボタンの表示優先度を設定します。
今回のサンプルでは単一のボタン設定のため、スキップします。画像URLを設定
ポップアップに使われる画像URLを設定します。
※参考：弊社が提供しているポップアップのサンプル画像一覧
https://solairo.atlassian.net/wiki/spaces/WHAT1/pages/2756673555リンクURLを設定
ポップアップボタンをクリック後に遷移するページのURLを設定します。ボタン位置を設定（横位置）
横位置のボタンが表示される位置を設定します。
※参考：横位置各配置イメージ
「左寄せ」もしくは「右寄せ」を選択した場合
余白を設定します。
※参考：横方向の余白イメージ
左寄せの場合は左側、右寄せの場合は右側の余白になります。ボタン位置を設定（縦位置）
縦位置のボタンが表示される位置を設定します。
※参考：縦位置各配置イメージ
縦方向の余白
縦方向の余白を設定します。
※参考：縦方向の余白イメージ
上寄せの場合は上側、下寄せの場合は下側の余白になります。z-indexの設定
ページ上でのボタンの重なり順の優先順位を設定します。画像サイズの設定
画像のサイズを設定します。基準方向の指定
幅を指定した場合は、高さのサイズはautoが指定されます。
高さを指定した場合は、幅のサイズはautoが指定されます。
サイズの指定
基準方向：幅を指定した場合は、指定したサイズが幅のサイズとなります。
基準方向：高さを指定した場合は、指定したサイズが高さのサイズとなります。ボタン要素IDを設定
チャットボタンのHTML上の任意のIDを設定します。
ボタンアニメーションを設定
適用するボタンアニメーションを設定します。適用可能なアニメーションは以下記事をご参照ください。
https://solairo.atlassian.net/wiki/spaces/WHAT1/pages/2137292814#%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E5%8B%95%E4%BD%9C%E3%81%A8%E8%A8%AD%E5%AE%9Aボタン有効化条件(ページのURL)を設定
ボタン設定を適用させるドメイン/パス/パラメーターの条件を設定します。
ボタン有効化条件をクリック
「設定を追加する」ボタンをクリック
「ページのURL」を選択し、domainの「追加」ボタンをクリック今回はドメイン配下の全ページにボタン設定を適用するため、ドメインを指定します。
例）URL：https://ser-solairo.sakura.ne.jp/ec-solairo/の場合
・ドメイン…ser-solairo.sakura.ne.jp ※環境に合わせてご変更下さい
任意のURLのドメイン（ホスト名）を指定し、「確定」ボタン をクリック次に、テスト環境で動かすため、テスト環境のドメインを追加します。
domainの「追加」ボタンをクリック
下記のテスト環境のドメインを指定し、「確定」ボタン をクリック
・ドメイン…whatya.solairo-api.com
2つのドメインを追加しましたら、「確定」ボタンをクリックし、ボタン有効化条件(ページのURL)の設定が完了となります。ボタン有効化条件(デバイスの種類)を設定
ボタン設定を適用させる「デバイスの種類」を設定します。
PCとスマートフォンで画像のサイズ等を変えたい場合は、こちらを設定ください。
条件の種類から「デバイスの種類」を選択ください。
PCのみ表示させたい場合
「パソコン」を選択ください。
スマホのみ表示させたい場合
「スマホ」を選択ください。
デバイスの種類を選択後、「確定」ボタンをクリックし、ボタン有効化条件の設定が完了となります。ボタン表示条件を設定
ボタンが表示される条件を設定します。
ボタン表示条件は以下記事をご参照ください。
https://solairo.atlassian.net/wiki/spaces/WHAT1/pages/2137292814#%E3%83%9C%E3%82%BF%E3%83%B3%E8%A1%A8%E7%A4%BA%E6%9D%A1%E4%BB%B6%E3%81%AE%E8%A8%AD%E5%AE%9Aボタン非表示条件を設定
ボタンを非表示（消える）にする条件を設定します。
ボタン非表示条件は以下記事をご参照ください。
コメントをつけてボタン設定を保存
ページ右下の「保存」ボタンをクリックします。任意のコメントを入力し、「確定」ボタンをクリック
画面右下に「保存されました」というダイアログが表示されると、ボタンの設定が完了となります。テスト環境に反映
設定したボタン設定をテスト環境に反映します。
チャットボタン設定 ＞ 保存済み一覧の中から設定したボタン設定をクリック
「テスト環境に反映」ボタンをクリック
任意のコメントを入力し、「確定」ボタンをクリック
画面右下に「環境への反映が完了しました」というダイアログが表示されると、テスト環境への反映が完了となります。レビュー画面（テスト環境）での動作確認
テスト環境に反映したボタン設定をレビュー画面（テスト環境）で動作確認します。
右上の「Testing」ボタンをクリック
レビュー画面（テスト環境）に遷移し、設定したボタン設定を確認いただけます。本番環境に反映
設定したボタン設定をテスト環境に反映します。
チャットボタン設定 ＞ 「テスト環境を本番環境へ反映」ボタンをクリック
任意のコメントを入力し、「確定」ボタンをクリック
画面右下に「環境への反映が完了しました」というダイアログが表示されると、本番環境への反映が完了となります。レビュー画面（本番環境）での動作確認
本番環境に反映したボタン設定をレビュー画面（本番環境）で動作確認します。
右上の「Main」ボタンをクリック
レビュー画面（本番環境）に遷移し、設定したボタン設定を確認いただけます。
設定済みボタン設定の編集方法について
設定済みのボタン設定の編集方法についてご紹介いたします。
チャットボタン設定 ＞ 保存済み一覧の中から設定したボタン設定をクリック
※適用中のボタン設定は編集ができないため、保存済み一覧からご選択ください。「編集」ボタンをクリック
ボタン画像のURLを変更したい場合
画像URLの入力内容をご変更ください。リンクURLを変更したい場合
ボタン画像をクリック後に遷移するページのURLを変更したい場合は、リンクURLの入力内容をご変更ください。ボタン位置（横位置）を変更したい場合
ボタン位置（横位置）を変更したい場合は、横位置の選択内容をご変更ください。
※参考：横位置各配置イメージ
ボタン位置（横位置）の横方向の余白を変更したい場合（中央寄席を選択した場合は設定なし）
余白の設定値を変更したい場合は、横方向の余白の入力内容をご変更ください。
※参考：横方向の余白イメージ
左寄せの場合は左側、右寄せの場合は右側の余白になります。
ボタン位置（縦位置）を変更したい場合
ボタン位置（縦位置）を変更したい場合は、縦位置の選択内容をご変更ください。
※参考：縦位置各配置イメージ
ボタン位置（横位置）の横方向の余白を変更したい場合
余白の設定値を変更したい場合は、縦方向の余白の入力内容をご変更ください。
※参考：縦方向の余白イメージ
上寄せの場合は上側、下寄せの場合は下側の余白になります。
ページ上でのボタンの重なり順の優先順位(z-index)を変更したい場合
ページ上でのボタンの重なり順の優先順位(z-index)の入力内容をご変更ください。
画像サイズを変更したい場合
画像サイズを変更したい場合は、画像サイズの設定内容をご変更ください。基準方向の指定
幅を指定した場合は、高さのサイズはautoが指定されます。
高さを指定した場合は、幅のサイズはautoが指定されます。サイズの指定
基準方向：幅を指定した場合は、指定したサイズが幅のサイズとなります。
基準方向：高さを指定した場合は、指定したサイズが高さのサイズとなります。
ポップアップ画像を表示するページを変更したい場合
ボタン設定を適用させるドメイン/パス/パラメーターの条件をご変更したい場合は、「ボタン有効化条件」をクリックします「ページのURL」の設定をクリック
設定条件の変更は、設定済みの項目をクリックし、ご変更ください。
設定条件を追加は、「追加」ボタンをクリックし、条件を入力してください。
※ 設定できるURLの条件の詳細は以下をご参照ください。
入力内容をご変更後、「確定」ボタン をクリック
設定内容を変更後、ページ右下の「保存」ボタンをクリックします。
任意のコメントを入力し、「確定」ボタンをクリック
画面右下に「保存されました」というダイアログが表示されると、ボタン設定の編集が完了となります。
※テスト環境、本番環境への反映確認方法はこちらの手順19〜22と同じ流れとなるため、割愛させていただきます。
設定済みのボタン設定をコピーして作成についてご紹介いたします。
設定済みのボタン設定の内容を直接編集せず、設定をコピーし設定したい場合は以下手順をご確認ください。
チャットボタン設定 ＞ 適用中もしくは保存済み一覧の中から設定したボタン設定をクリック
「コピーして作成」ボタンをクリック
任意のコメントを入力し、確定ボタンをクリックしてください。
画面右下に「保存されました」というダイアログが表示されると、ボタン設定のコピーが完了となります。
※設定の編集方法はこちらをご参照ください
チャットボタン設定をインポートする方法についてご紹介いたします。
チャットボタン設定のインポートは以下2種類あります。
リビジョン単位でインポートする
ボタン設定単位でインポートする
詳細は以下の各手順をご確認ください。
リビジョン単位でインポートする手順
リビジョン単位でのインポート手順をご紹介します。
設定をインポートをクリックします
インポートするファイルを四角の中へドロップ、もしくはクリックしてインポートするファイルを選択し確定をクリックします。
ファイルが認識されると赤枠のようにファイル名が表示されます。名前をつけて確定をクリックします
※インポート後、一覧に表示されたとき分かりやすい名前にする事をお勧めします。リビジョン一覧にインポートした設定が追加されます。
リビジョン単位でのインポート手順は以上です。
ボタン設定単位でインポートする手順
ボタン設定単位でのインポート手順をご紹介します。
ボタン設定を追加したいリビジョンをクリックします。
編集をクリックして編集モードにします。
ボタン設定をインポートをクリックします。
エクスポートしたファイルを四角の中へドロップして確定をクリックします。
※ファイルが認識されると赤枠のようにファイル名が表示されます。名前を付けて確定をクリックします
※インポート後、一覧に表示されたとき解りやすい名前にする事をお勧めします。一覧にインポートしたボタン設定が追加されます。
ボタン設定単位でのインポート手順は以上です。