/
【ボタン設定】最初にボタンの設定を作ってみよう！

【ボタン設定】最初にボタンの設定を作ってみよう！

Owned by 空色　小鮒 俊太朗
Last updated: 2024/12/04 by 尾関沙紀
4 min read

まずは管理画面になれるため、手順通りに設定をしてみましょう。

この手順で簡単なボタン設定ができます！

 

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

チャットボタン設定方法

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

 

こちらの設定では、全てのページに同じボタン設定が適用されます。
特定のページに表示をさせたい場合はアドバンス設定をご確認ください。

 

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

     

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

     

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

    image-20241204-030053.png

     

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

    image-20241204-030155.png


    ボタンの種類の中から「画像＋テキスト」を選択

    image-20241204-031128.png

     

  5. 表示優先度を設定

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

    image-20241204-031050.png

     

  6. ボタンテキストを設定
    画像ボタンの上部に表示されるテキストを設定します。

    image-20241204-031634.png


    下記ボタンテキストのサンプルを参考にご設定ください。
    ・ボタンテキスト…商品を探す

    image-20241204-031712.png

     

  7. 画像URLを設定
    ボタンに表示される画像のURLを設定します。

    image-20241204-031748.png


    下記画像URLのサンプルを参考にご設定ください。
    ・画像URL…https://ser-solairo.sakura.ne.jp/ser-image/search_item_banner.png
    （画像は弊社素材ですのでご自由にお使いいただいて構いません。）

    image-20241204-031843.png

  8. ボタン要素IDを設定

    チャットボタンのHTML上のIDを設定します。
    ボタン要素ID欄に「button1」とご記入ください。

    image-20241204-032134.png

     

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

    image-20241204-032210.png

     

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


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


    「ページのURL」を選択し、domainの「追加」ボタンをクリック

     

    今回はドメイン配下の全ページにボタン設定を適用するため、ドメインを指定します。
    例）URL：https://ser-solairo.sakura.ne.jp/ec-solairo/の場合
    ・ドメイン…ser-solairo.sakura.ne.jp　※環境に合わせてご変更下さい
    任意のURLのドメイン（ホスト名）を指定し、「確定」ボタン をクリック

     

    次に、テスト環境で動かすため、テスト環境のドメインを追加します。
    domainの「追加」ボタンをクリック


    下記のテスト環境のドメインを指定し、「確定」ボタン をクリック
    ・ドメイン…whatya.solairo-api.com


    2つのドメインを追加しましたら、「確定」ボタンをクリックし、ボタン有効化条件の設定が完了となります。

     

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

     

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

    image-20241204-032350.png

     

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

     

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


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

     

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


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


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


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

     

  16. レビュー画面（テスト環境）での動作確認
    テスト環境に反映したボタン設定をレビュー画面（テスト環境）で動作確認します。
    ページ右上の「Testing」ボタンをクリック

    image-20241204-032934.png


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

    image-20241204-033234.png

     

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


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


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

     

  18. レビュー画面（本番環境）での動作確認
    本番環境に反映したボタン設定をレビュー画面（本番環境）で動作確認します。
    ページ右上の「Main」ボタンをクリック


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

    image-20241204-033728.png

     

サンプルボタン設定のインポート方法


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

 

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

     

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


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


    画面右下に「保存されました」というダイアログが表示されると、インポートが完了となります。
    ※テスト環境、本番環境への反映確認方法はこちらの手順15〜18と同じ流れとなるため、割愛させていただきます。

     

Related content