URLを変えない様にするため、ここで作成をした後

↓このページにコピペして下さい。

チャットボタン設定クイックスタートガイド

2021/10/26 update（作成完了）

ここにラベルが表示されるxxxxxx xxxxxxx xxxxxx 
└ボタンの表示場所の変更（有効化条件）
└ボタンの種類
└ボタンアニメーション
└ボタン表示条件
└ボタン非表示条件
└設定の初期化（インポート）

サンプルを参考にボタン設定をしてみましょう。

こちらでは画像タイプのボタン設定方法をご紹介いたします。
（※表示のイメージは、下記サンプル動画をご確認ください。）
まず、どのようにボタン設定ができるか確認したい場合は、こちらの設定をそのままコピーしてお使いください。

1. チャットボタン設定 ＞ 新しく設定をはじめる をクリック

   

2. 01.[通常のボタン] ラベル未設定をクリック

   

3. ラベルを設定
   01.[通常のボタン]のラベルを設定します。
   ラベルの設定は必須ではありませんので、任意の文字列をご入力ください。

   

4. ボタンの種類を選択
   適用するボタンの種類を選択します。「通常のボタン」をクリック

   

   
   ボタンの種類を下記の中から「画像」を選択

   

5. 表示優先度を設定

   ボタンの表示優先度を設定します。
   今回のサンプルでは単一のボタン設定のため、スキップします。

   

6. ボタンテキストを設定
   画像ボタンの上部に表示されるテキストを設定します。
   下記ボタンテキストのサンプルを参考にご設定ください。

   • ボタンテキスト…商品を探す

   

7. 画像URLを設定
   ボタンに表示される画像のURLを設定します。
   下記画像URLのサンプルを参考にご設定ください。

   • 画像URL…https://ser-solairo.sakura.ne.jp/ser-image/search_item_banner.png
     （画像は弊社素材ですのでご自由にお使いいただいて構いません。）

   

8. ボタン要素IDを設定

   チャットボタンのHTML上のIDを設定します。
   下記ボタン要素IDのサンプルを参考にご設定ください。

   • ボタン要素ID…button1

   

9. ボタンアニメーションを設定
   適用するボタンアニメーションを設定します。
   今回のサンプルではアニメーションを適用しないため、「無効」をご選択ください。

   

10. ボタン有効化条件を設定

    ボタン設定を適用させるドメイン/パス/パラメターの条件を設定します。
    ボタン有効化条件をクリック

    

    
    「設定を追加する」ボタンをクリック

    

    
    domainの「追加」ボタンをクリック

    

    今回はドメイン配下の全ページにボタン設定を適用するため、ドメインを指定します。
    例）URL：https://ser-solairo.sakura.ne.jp/ec-solairo/の場合

    • ドメイン…ser-solairo.sakura.ne.jp　※環境に合わせてご変更下さい
      任意のURLのドメイン（ホスト名）を指定し、設定 をクリック

    

    
    「確定」ボタンをクリックし、ボタン有効化条件の設定が完了となります。

    

     

11. ボタン表示条件を設定
    ボタンが表示される条件を設定します。
    今回のサンプルではボタンが表示される条件を設定しないため、スキップします。

    

     

12. ボタン非表示条件を設定
    ボタンを非表示（消える）にする条件を設定します。
    今回のサンプルではボタンを非表示にする条件を設定しないため、スキップします。

    

13. チャットを閉じた後の挙動を設定
    チャットウィンドウのXボタンで閉じた後のボタン表示の挙動を設定します。
    今回のサンプルではチャットを閉じた後の挙動を設定しないため、スキップします。

    

    
    「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック

    

    
    画面右下に「保存されました」というダイアログが表示されると、ボタンの設定が完了となります。

    

14. テスト環境に反映
    設定したボタン設定をテスト環境に反映します。
    チャットボタン設定 ＞ 保存済み一覧の中から設定したボタン設定をクリック

    

    
    「テスト環境に反映」ボタンをクリック

    

    
    任意のコメントを入力し、「確定」ボタンをクリック

    

    
    画面右下に「環境への反映が完了しました」というダイアログが表示されると、テスト環境への反映が完了となります。

    

15. レビュー画面（テスト環境）での動作確認
    テスト環境に反映したボタン設定をレビュー画面（テスト環境）で動作確認します。
    チャットボタン設定 ＞ 適用中の中からテスト環境に反映したボタン設定の「Testing」ボタンをクリック

    

    
    レビュー画面（テスト環境）に遷移し、設定したボタン設定を確認いただけます。

    

16. 本番環境に反映
    設定したボタン設定をテスト環境に反映します。
    チャットボタン設定 ＞ 「テスト環境を本番環境へ反映」ボタンをクリック

    

    
    任意のコメントを入力し、「確定」ボタンをクリック

    

    
    画面右下に「環境への反映が完了しました」というダイアログが表示されると、本番環境への反映が完了となります。

    

17. レビュー画面（本番環境）での動作確認
    本番環境に反映したボタン設定をレビュー画面（本番環境）で動作確認します。
    チャットボタン設定 ＞ 適用中の中から本番環境に反映したボタン設定の「Main」ボタンをクリック

    

    
    レビュー画面（本番環境）に遷移し、設定したボタン設定を確認いただけます。

    

サンプルボタン設定をそのままインポートすることが可能です。
※下記サンプルボタン設定のインポートファイルを任意の場所に保存してください。

サンプルボタン設定のインポート手順をご紹介いたします。

1. チャットボタン設定 ＞ 「設定をインポート」ボタン をクリック

   

2. 任意の場所に保存したサンプルボタン設定のインポートファイルをクリックしてファイル選択、
   もしくは、水色点線枠内にファイルをドロップ

   

   
   ファイルがアップロードされたことを確認し、「確定」ボタンをクリック

   

   
   画面右下に「保存されました」というダイアログが表示されると、インポートが完了となります。