eci_20230825（202310リリース）テンプレート接客

【環境設定】テンプレート

接客のテンプレート作成ができます。

1. テンプレート一覧

テンプレートは、アカウントごとに作成された「個人用」および本サービスから提供される「サンプル」があります。

「アンケート」は、EC Intelligenceのアンケートをサイト内に表示するためのテンプレートサンプルです。
「同時閲覧数」は、現在〇人がこのページを閲覧しています。というような現在閲覧しているユーザ数の表示です。こちらの機能は、別途リアルタイム分析サービスの導入が必要になります。

サンプルはコピー することが可能です。コピーして編集、個人用に保存して利用いただけます。
個人用のテンプレートは編集、コピー、削除することが可能です。
個人用のテンプレートはアカウント間でコピー可能です。（※本機能は2023年10月のバージョンアップでの新機能です）
複数アカウントご契約の場合でもアカウントをまたいでテンプレートをコピーできます（1アカウントが本番環境、もう1アカウントがステージング環境という場合でもコピーが可能です）。
※操作するユーザが権限を持つアカウントへのみ、コピー可能です。

2. テンプレート設定

テンプレートを設定します。

  1. 設定

    • 名前
      • テンプレートの名前を設定します。
    • HTML ID
      • 接客をサイトのページ内に差し込みする場合、差し込む位置のサイトページ内のdiv id名をHTML IDに指定します。
    • アイコン
      • テンプレート一覧に表示されるアイコンです。設定が無い場合、デフォルトが表示されます。
    • アップロードボタンをクリックして100KBサイズ以内のイメージファイルを登録してください。
  2. スクリプト
    HTML、CSS、JavaScriptを設定します。
  3. 高度な設定
    高度な設定をONにすると、スクリプト内に「変数」記述欄が表示されます。
    変数を定義するとHTML, CSS, JavaScriptの内容を設定値で置換することができ、テンプレートを利用する際に要素を画面から編集することが可能になります。

    変数は下記のJSON形式で定義します。

    {
    “グループ名”:   {
    “項目名”:     {
    “type”: “値”,
    “option”: “値”,
    “value”: “値”
    },
    …
    }
    }

    変数を利用するにはHTML, CSS, JavaScriptに${グループ名.項目名.value}形式で記述します。

    <div class="sci-window">
    <div class="sci-dialog">
    <div>
    <div class='sci-dialog-title'>${グループ名.項目名.value}</div>
    </div>
    </div>
    </div>

    高度な設定をOFFにすると、設定画面に「要素」が表示されます。
    要素の中に、設定された変数が変更可能な要素として表示されます。

    変数設定と要素の表示は下記のように対応します。

    ※項目の属性について

    1. type
      1. textarea, text, color, listboxの中から一つ定義してください。
    2. option
      1. typeがlistboxの場合有効です。選択項目(option)のリストをコンマ(,)区切りで定義してください。
    3. value
      デフォルト値を定義してください。typeがcolorの場合はHEX値になります。
      ※HTML, CSS, JavaScriptについて

      <div class=”sci-window”>
      <div class=”sci-dialog”>
      <div>
      <div class=’sci-dialog-header’>
      <div class=’sci-dialog-title’>${title.text.value}</div>
      <span title=”close” class=”sci-dialog-close” onclick=”Scinable.Util.closeWindow(this);”>&times;</span>
      </div>
      <div class=’sci-dialog-content’>${content.text.value}</div>
      </div>
      </div>
      </div>

      変数は${グループ名.項目名.value}で記述します。
      class名はsci-xxxの形式で命名してください。

      Scinable.Util.closeWindow(this)はclassのsci-windowのdivを削除します。

      HTMLの項目にcss、javascriptを記述することも可能です。

      <div class=”sci-window”>
      …
      </div>
      <style>
      …
      </style>
      <script>
      …
      </script>

3. その他

一度作成したプロモーションを、接客のテンプレートに追加可能です。

プロモーションのスクリプトから保存ボタンで保存可能です。

この情報は役に立ちましたか？