比較バージョン

キー

  • この行は追加されました。
  • この行は削除されました。
  • 書式設定が変更されました。

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

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

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

2021/10/26 update(作成完了)

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

...

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

...

 

注意

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

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

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

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

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

    ボタンの種類を下記の中から「画像」をご選択ください。
    ボタンの種類を下記の中から「画像」をご選択ください。

    Image RemovedImage Added

  5. 表示優先度を設定

     

    ーここからー

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

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

    ボタンテキストと画像URLを下記のサンプルを参考にご設定ください。

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

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

    下記画像URLのサンプルを参考にご設定ください。

    ボタン有効化条件 をクリックし、 設定を追加する をクリックします。

    Image Removeddomain の 追加ボタンをクリックします。Image Removed
    Image Added

  8. ボタン要素IDを設定

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

    • ボタン要素ID…button1

    Image Added

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

    Image Added

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

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

    Image Added


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

    Image Added


    domainの「追加」ボタンをクリックします。

    Image Added

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

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

    Image RemovedImage Added

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

    Image RemovedImage Added

     保存 をクリックします。

  11. ボタン表示条件を設定

    Image Removed

    ボタンが表示される条件を設定します。
    コメント入力画面が表示されるので、任意のコメントを入力し、はい をクリックします。今回のサンプルではボタンが表示される条件を設定しないため、スキップします。

    Image RemovedImage Added

     

    「保存済」の一覧に表示されたことを確認し、該当の設定を開きます。

    Image Removed「テスト環境に反映」のボタンをクリックします。Image Removed

    「適用中」一覧の該当ボタン設定に「Testing」マークが表示されると、
    ボタン有効化条件で指定した環境での動作確認ができます。

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

    Image Added

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

    Image Added


    --ここから--
    最後に「保存」ボタンをクリックし、ボタンの設定が完了です。

    ボタンの種類

まず、適用するボタンの種類を下記の中から「画像」をご選択ください。

...