ページの比較

...

...

...

WhatYaクライアントAPIとは「メッセージの自動送信機能」です。

この機能を利用する事でオペレータへ接続したタイミングで、任意のメッセージを自動送信できます。

これを活用する事で、来訪者が見ている商品、もしくは見ているサイトを「メッセージ」でオペレーターに伝える事ができます。

機能の応用イメージ

①来訪者が商品ページのチャットからオペレーターに繋ぐと、商品名が自動でメッセージ送信されます。

...

②オペレーターに「商品名」がメッセージで届くので、来訪者はどの商品を見ているか、オペレーターが把握する事ができます。

...

導入方法は、以下のスクリプトを商品詳細ページなどに埋め込み、変数などを利用して「whatya.postMassage」の赤字部分を「現在のページ名」や「商品名」に変わるようにします。

※変数設定箇所

※スクリプトサンプル

/*
 * オペレータ接続時にカスタマーとしてメッセージを自動送信する
 */
window.onWhatYaReady = (whatya) => {

  const onOperatorConnected = () => {
    whatya.postMessage("商品の詳細についての相談です");
  }
  
  // オペレータ接続時のイベントリスナーを登録
  whatya.addEventListener('operator-connected', onOperatorConnected);
}

こちらのサイトを「動作とScript」の参考にして下さい。

このページは「WhatYaクライアントAPIの資料」の補足ページとなります。こちらの資料をまだ入手出来ていない場合は担当者にご相談下さい。

どのように動作するかイメージを見たい場合は、以下の動画をご確認下さい。

WhatYaクライアントAPIデモ動画 ※文字が小さい場合は全画面表示推奨

...

※弊社ではスクリプトに関するサポートはしておりません。あくまで参考としてご利用下さい。

例えばECCUBE4系で作った以下のサイトにはこのサンプルのScriptを使って以下を実現しています。

※デモサイト

https://ser-solairo.sakura.ne.jp/ec-solairo/このサイトはEC Cube4系で以下Script（if文と変数）を使って、「商品名」があるページは商品名を送信して、カートやお問い合わせなど「商品名」が無いページは「ページ名」を送信する仕組みにしています。

以下のScriptは、商品名の存在するページは商品名("{{ Product.name }}を

商品名が無い場合はページ名("{{ Page.name }}を表示させています。

このように設定する事で、商品が存在するページは「商品名」がオペレーターへメッセージで自動送信、商品名が存在しないページは「ページ名」がオペレーターへ自動送信されます。

※参考 サンプルコード

{# オペレーターに接続時にどのページからチャットを開いたか自動送信する #}
{# 商品名が存在する場合に商品名を送信する #}
{% if Product.name is not null %}
<script>
    window.onWhatYaReady = (whatya) => {
        
        const onOperatorConnected = () => {
        whatya.postMessage("{{ Product.name }}"+"のページからご相談です。");
        }
  
        // オペレータ接続時のイベントリスナーを登録
        whatya.addEventListener('operator-connected', onOperatorConnected);
    }
</script>
{# 商品名が存在しない場合にページ名を送信する #}
{% else %}
<script>
    window.onWhatYaReady = (whatya) => {
        
        const onOperatorConnected = () => {
        whatya.postMessage("{{ Page.name }}"+"からご相談です。");
        }
  
        // オペレータ接続時のイベントリスナーを登録
        whatya.addEventListener('operator-connected', onOperatorConnected);
    }
</script>

以上