クイックナビゲーション

LiveAgentにはネイティブのチャットボット機能がないため、Quriobotというサードパーティのチャットボットソフトウェアと統合するオプションがあります。Quriobotで顧客が操作できる直感的なチャットボットを作成し、ライブチャットを開始してチャットボットを終了するオプションを設定できます。ライブチャットが終了すると、訪問者は再びチャットボットを開始できます。

LiveAgent側の設定

LiveAgentの管理パネルで Configuration（設定） > Chat（チャット） > Chat buttons（チャットボタン） に移動し、「Custom > own HTML code」タイプの新しいボタンを作成します。

チャットボタンの設定で、「Online button」セクションと「Offline button」セクション（該当する場合）の両方に移動し、HTMLフィールドに以下のコードを挿入します。

<span></span>

チャットボタンを保存し、以下の画像の下にある統合コードをコピーして、ウェブサイトの </body> タグの前に設置します。

「mycompany.ladesk.com」をお使いのLiveAgentアカウントの実際のドメイン名に置き換え、「BUTTON_ID」をチャットボタンの実際のIDに置き換えることを忘れないでください。チャットボタンのIDは、ボタン設定の「Integration」セクションで確認できます。

<!-- Start of LiveAgent integration script: Chat button: Chatbot -->
<script type="text/javascript">
var chatButton;
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.defer=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://mycompany.ladesk.com/scripts/track.js',
function(e){ chatButton = LiveAgent.createButton('BUTTON_ID', e);
chatButton.oldOnCloseFunction_ = chatButton.onCloseFunction_;
chatButton.onCloseFunction_ = function() 
{
chatButton.oldOnCloseFunction_(); 
quriobot.show();
}
});
</script>
<!-- End of LiveAgent integration script -->

Quriobot側の設定

Quriobotアカウントにログインし、ダッシュボードに移動して新しいボットを作成します。

チャットボットに名前を付け、シンプルな「Start from scratch」テンプレートを選択し、「Next」ボタンをクリックして次に進みます。

ボットの設定で、Bot settings（ボット設定） > Advanced initialization（高度な初期化）セクションに移動し、「Advance initialization options」を有効にして、以下のコードを指定フィールドに挿入します。

{
   onInit: function() {
     if (LiveAgent.instance.hasOpenedWidget()) {
       window.quriobot.hide()
     }
   },
   onLoad: function() {
     if (LiveAgent.instance.hasOpenedWidget()) {
       window.quriobot.hide()
     }
   }
}

次に、「Channels」タブに移動し、「Live chat」オプションをクリックして、上部のデベロッパーモードを有効にし、ライブチャットチャンネルのタイプをCustomに切り替え、このセクション下部のスクリプトフィールドに以下のスクリプトを追加します。

function() {
   chatButton.onClick();
   setTimeout(function() {
   quriobot.hide();
   }, 0)
}

QuriobotのメッセージからLiveAgentの連絡先やチケットフィールドにデータを渡すために、スクリプトにさらに関数を追加することができます。詳細については、Quriobotガイドをご参照ください。

最後のステップとして、ライブチャットを開始するQuriobot側のレスポンスを設定します。そのためには、「Edit your bot」タブのBot responsesセクションに移動し、いずれかのボットレスポンスの次のステップとして「Live chat」を選択します。

以上で設定完了です。これにより、LiveAgentのチャットウィンドウを開くことができるQuriobotのチャットボットがページに統合されました。