Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

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

...

 

Note

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

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

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


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

    Image RemovedImage Added

  5. 表示優先度を設定

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

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


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

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


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

  8. ボタン要素IDを設定

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

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

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

    Image RemovedImage Added


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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added

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

    Image RemovedImage Added


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

    Image RemovedImage Added


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

    Image RemovedImage Added

     

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

    Image RemovedImage Added

     

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

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

    Image RemovedImage Added

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

    Image RemovedImage Added


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

    Image RemovedImage Added

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

    Image RemovedImage Added


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

    Image RemovedImage Added


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

    Image RemovedImage Added


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

    Image RemovedImage Added

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

    Image RemovedImage Added


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

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

    Image RemovedImage Added


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

    Image RemovedImage Added


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

    Image RemovedImage Added

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

    Image RemovedImage Added


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

...

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

    Image RemovedImage Added

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

    Image RemovedImage Added


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

    Image RemovedImage Added


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

    Image RemovedImage Added