/wiki/spaces/SOL/pages/2138931214 骨子はこちらを確認
※最後に消してください。
URLを変えない様にするため、ここで作成をした後
↓このページにコピペして下さい。
2021/10/26 update（作成完了）
ここにラベルが表示されるxxxxxx xxxxxxx xxxxxx
└ボタンの表示場所の変更（有効化条件）
└ボタンの種類
└ボタンアニメーション
└ボタン表示条件
└ボタン非表示条件
└設定の初期化（インポート）
サンプルを参考にボタン設定をしてみましょう。
| 情報 |
|---|
チャットボタン設定方法 |
こちらでは画像タイプのボタン設定方法をご紹介いたします。
（※表示のイメージは、下記サンプル動画をご確認ください。）
まず、どのようにボタン設定ができるか確認したい場合は、こちらの設定をそのままコピーしてお使いください。
...
| 注意 |
|---|
こちらの設定では、全てのページに同じボタン設定が適用されます。 |
まず、適用するボタンの種類を下記の中から「画像」をご選択ください。
通常のボタン
画像
吹き出し（左向き/右向き）
ボタンテキストと画像URLを下記のサンプルを参考にご設定ください。
...
ボタンテキスト…商品を探す
...
チャットボタン設定 ＞ 新しく設定をはじめる 「新しく設定をはじめる」ボタン をクリック
01.[通常のボタン] ラベル未設定をクリックラベル未設定をクリック
ラベルを設定
01.[通常のボタン]のラベルを設定します。
ラベルの設定は必須ではありませんので、任意の文字列をご入力ください。
ボタンの種類を選択
適用するボタンの種類を選択します。「通常のボタン」をクリックします。適用するボタンの種類を選択します。「通常のボタン」をクリック
ボタンの種類を下記の中から「画像」をご選択ください。
ボタンの種類の中から「画像」を選択
表示優先度を設定
ボタンの表示優先度を設定します。
今回のサンプルでは単一のボタン設定のため、スキップします。
ーここからー
ボタンテキストを設定
画像ボタンの上部に表示されるテキストを設定します。
下記ボタンテキストのサンプルを参考にご設定ください。
・ボタンテキスト…商品を探す
ボタンテキストと画像URLを下記のサンプルを参考にご設定ください。
ボタンテキスト…商品を探す
画像URL…ボタン要素ID…button1
画像URLを設定
ボタンに表示される画像のURLを設定します。
下記画像URLのサンプルを参考にご設定ください。
・画像URL…https://ser-solairo.sakura.ne.jp/ser-image/search_item_banner.png
（画像は弊社素材ですのでご自由にお使いいただいて構いません。）
ボタン有効化条件 をクリックし、 設定を追加する をクリックします。
domain の 追加ボタンをクリックします。
任意のURLのドメイン（ホスト名）を指定し、設定 をクリックします。
追加 をクリックし、ボタン有効化条件の設定が完了となります。
保存 をクリックします。
コメント入力画面が表示されるので、任意のコメントを入力し、はい をクリックします。
「保存済」の一覧に表示されたことを確認し、該当の設定を開きます。
「テスト環境に反映」のボタンをクリックします。
「適用中」一覧の該当ボタン設定に「Testing」マークが表示されると、ボタン有効化条件で指定した環境での動作確認ができます。
...
ボタン要素IDを設定
チャットボタンのHTML上のIDを設定します。
ボタン要素ID欄に「button1」とご記入ください。
ボタンアニメーションを設定
適用するボタンアニメーションを設定します。
今回のサンプルではアニメーションを適用しないため、「無効」をご選択ください。
ボタン有効化条件を設定
ボタン設定を適用させるドメイン/パス/パラメターの条件を設定します。
ボタン有効化条件をクリック
「設定を追加する」ボタンをクリック
domainの「追加」ボタンをクリック
今回はドメイン配下の全ページにボタン設定を適用するため、ドメインを指定します。
例）URL：https://ser-solairo.sakura.ne.jp/ec-solairo/
...
ボタン要素ID…button1
...
ボタン要素ID
CSSでボタンデザインを設定する場合は記入して下さい。
今回は「button1」を設定。
※button1の部分をご自身で設定したボタン要素IDにご変更ください。
...
ボタンアニメーション
次に、適用するボタンアニメーションを下記の中から「無効」をご選択ください。
無効
スライドイン
フェードイン/フェードアウト
...
ボタン有効化条件
ボタン設定を適用させるドメイン/パス/パラメターの条件を下記のサンプルを参考にご設定ください。
今回はドメイン配下の全ページにボタン設定を適用するため、ドメインを下記のように指定します。
例）URL：https://ser-solairo.sakura.ne.jp/ec-solairo/の場合
ドメイン…ser-solairo.sakura.ne.jp ※環境に合わせてご変更下さい
...
ボタン表示条件
ボタン表示条件は設定なし
...
ボタン非表示条件
ボタン非表示条件は設定なし
...
チャットを閉じた後の挙動
チャットを閉じた後の挙動は設定なし
...
設定の初期化（インポート）
| 情報 |
|---|
XXXXXXX |
XXXXXX
①xxxx
②xxxx
③xxxx
...
の場合
・ドメイン…ser-solairo.sakura.ne.jp ※環境に合わせてご変更下さい
任意のURLのドメイン（ホスト名）を指定し、「確定」ボタン をクリック
次に、テスト環境で動かすため、テスト環境のドメインを追加します。
domainの「追加」ボタンをクリック
下記のテスト環境のドメインを指定し、「確定」ボタン をクリック
・ドメイン…whatya.solairo-api.com
2つのドメインを追加しましたら、「確定」ボタンをクリックし、ボタン有効化条件の設定が完了となります。
ボタン表示条件を設定
ボタンが表示される条件を設定します。
今回のサンプルではボタンが表示される条件を設定しないため、スキップします。
ボタン非表示条件を設定
ボタンを非表示（消える）にする条件を設定します。
今回のサンプルではボタンを非表示にする条件を設定しないため、スキップします。
チャットを閉じた後の挙動を設定
チャットウィンドウのXボタンで閉じた後のボタン表示の挙動を設定します。
今回のサンプルではチャットを閉じた後の挙動を設定しないため、スキップします。
コメントをつけてボタン設定を保存
「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
画面右下に「保存されました」というダイアログが表示されると、ボタンの設定が完了となります。
テスト環境に反映
設定したボタン設定をテスト環境に反映します。
チャットボタン設定 ＞ 保存済み一覧の中から設定したボタン設定をクリック
「テスト環境に反映」ボタンをクリック
任意のコメントを入力し、「確定」ボタンをクリック
画面右下に「環境への反映が完了しました」というダイアログが表示されると、テスト環境への反映が完了となります。
レビュー画面（テスト環境）での動作確認
テスト環境に反映したボタン設定をレビュー画面（テスト環境）で動作確認します。
チャットボタン設定 ＞ 適用中の中からテスト環境に反映したボタン設定の「Testing」ボタンをクリック
レビュー画面（テスト環境）に遷移し、設定したボタン設定を確認いただけます。
本番環境に反映
設定したボタン設定をテスト環境に反映します。
チャットボタン設定 ＞ 「テスト環境を本番環境へ反映」ボタンをクリック
任意のコメントを入力し、「確定」ボタンをクリック
画面右下に「環境への反映が完了しました」というダイアログが表示されると、本番環境への反映が完了となります。
レビュー画面（本番環境）での動作確認
本番環境に反映したボタン設定をレビュー画面（本番環境）で動作確認します。
チャットボタン設定 ＞ 適用中の中から本番環境に反映したボタン設定の「Main」ボタンをクリック
レビュー画面（本番環境）に遷移し、設定したボタン設定を確認いただけます。
...
| 情報 |
|---|
サンプルボタン設定のインポート方法 |
上記サンプルボタン設定をそのままインポートすることが可能です。
サンプルボタン設定のインポート手順をご紹介いたします。
※まず、下記サンプルボタン設定のインポートファイルを任意の場所に保存してください。
| View file | ||
|---|---|---|
|
チャットボタン設定 ＞ 「設定をインポート」ボタン をクリック
任意の場所に保存したサンプルボタン設定のインポートファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップ
ファイルがアップロードされたことを確認し、「確定」ボタンをクリック
画面右下に「保存されました」というダイアログが表示されると、インポートが完了となります。
※テスト環境、本番環境への反映確認方法はこちらの手順15〜18と同じ流れとなるため、割愛させていただきます。