Web 用組み込みサービス開発者ガイド
jカスタムチャットイベントの作成
- sendCustomEvent() — 特定のチャットキーを持つチャットのクライアント側のチャットウィンドウにカスタムイベントを送信します。
- onCustomEvent() — チャット中にカスタムイベントが実行されるとコールされる関数を登録します。
- embedded_svc.liveagentAPI.sendCustomEvent() — チャット訪問者と現在チャットしているエージェントのエージェントコンソールにカスタムイベントを送信します。
- embedded_svc.liveagentAPI.getCustomEvents() — このチャットセッション中にエージェントとチャット訪問者の両方から受信したカスタムイベントのリストを取得します。
- embedded_svc.liveagentAPI.addCustomEventListener() — チャットウィンドウにカスタムイベントが取得されるとコールされる関数を登録します。
エージェントから顧客へのイベントの送信
次の例は、エージェントから顧客に送信されるカスタムイベントの作成方法を示しています。この例では、Visualforce ページ上で、クリックすると顧客にイベントを送信するリンクを作成します。
- エージェントから顧客にイベントを送信する Visualforce ページを作成します。
この例では、種別が agent_to_customer_event_type のカスタムイベントが data from the agent というデータと共に顧客に送信されます。
1<apex:page> 2 <apex:includeScript value="/support/console/42.0/integration.js" /> 3 4 <a href="#" onClick="sendEventFromAgentToCustomer();">Send an event from an agent to a customer</a> 5 6 <script type="text/javascript"> 7 function sendEventFromAgentToCustomer() { 8 var chatKey = undefined; // Provide a chat key here 9 var eventType = "agent_to_customer_event_type"; 10 var eventData = "data from the agent"; 11 12 sforce.console.chat.sendCustomEvent(chatKey, eventType, eventData, function(result) { 13 if (!result || !result.success) { 14 console.log("Sending an event from an agent to a customer failed"); 15 return; 16 } 17 18 console.log("The customEvent (" + eventType + ") has been sent"); 19 }); 20 } 21 </script> 22</apex:page> - 外部 JavaScript ファイルを使用してチャットキーを提供します。
この例では、JavaScript ファイルは CustomEvents_fromAgentToCustomer.js という名前です。
1function customEventReceived(result) { 2 var eventType; 3 var eventData; 4 5 if (!result || !result.success) { 6 console.log("customEventReceived failed"); 7 return; 8 } 9 10 eventType = result.type; 11 eventData = JSON.stringify(result.data); 12 console.log("A custom event of type '" + eventType + "' has been received with the following data: " + eventData); 13} 14 15function wireUpCustomEventListeners() { 16 embedded_svc.liveAgentAPI.addCustomEventListener("agent_to_customer_event_type", customEventReceived); 17} 18 19wireUpCustomEventListeners(); - ファイルを Salesforce の静的リソースとしてアップロードします。ファイルに、覚えやすい名前を付けます (スペースは使用できません)。
この例では、JavaScript ファイルの静的リソース名は CustomEvents_fromAgentToCustomer です。
- ファイルを組み込みサービスのコードスニペットに追加します (バージョン 5.0 以降を使用していることを確認してください)。ファイル名ではなく、静的リソース名を入力します。
1embedded_svc.settings.externalScripts = ["CustomEvents_fromAgentToCustomer"]; - Visualforce ページをコンソールに追加します。
コンソールから、タブを追加し、ステップ 1 で作成した Visualforce ページのプレビューページの URL を貼り付けます。
- 新しいイベントをテストします。
この例では、Visualforce ページに [Send an event from an agent to a customer (エージェントから顧客にイベントを送信)] リンクがあります。コンソールの Visualforce ページのタブとチャットウィンドウを再読み込みし、コンソールの Visualforce ページのタブ内のリ���クをクリックします。リンクによって sendEventFromAgentToCustomer() へのコールがトリガされ、イベントが顧客に送信されます。
顧客からエージェントへのイベントの送信
次の例は、顧客からエージェントに送信されるカスタムイベントの作成方法を示しています。この例では、顧客のチャットメッセージ項目が「trigger (トリガ)」に一致するとイベントをエージェントに送信するイベントリスナを作成します。
- 顧客からエージェントにイベントを送信する Visualforce ページを作成します。この例では、種別が customer_to_agent_event_type のカスタムイベントが data from the customer というデータと共に顧客に送信されます。
1<apex:page> 2 <apex:includeScript value="/support/console/42.0/integration.js" /> 3 4 <script type="text/javascript"> 5 function registerListeners() { 6 var chatKey = undefined; // Provide a chat key here 7 var eventType = "customer_to_agent_event_type"; 8 9 sforce.console.chat.onCustomEvent(chatKey, eventType, function(result) { 10 if (!result || !result.success) { 11 console.log("onCustomEvent (" + eventType 12 + ") was not successful"); 13 return; 14 } 15 16 console.log("A new custom event has been received of type " 17 + result.type + " and with data: " + result.data); 18 }); 19 } 20 21 registerListeners(); 22 </script> 23</apex:page> - 外部 JavaScript ファイルを使用してチャットキーを提供します。
この例では、JavaScript ファイルは CustomEvents_fromCustomerToAgent.js という名前です。
1function wireTextChangeListner() { 2 // Find the chasitor's chat input field 3 var obj = document.getElementsByClassName('chasitorText'); 4 5 // Wire up the event listener 6 obj[0].oninput = function() { 7 switch(this.value) { 8 // When the chasitor types "trigger", an event is fired to the agent 9 case "trigger": 10 embedded_svc.liveAgentAPI.sendCustomEvent( 11 "Customer_to_agent_event_type", 12 "data from the customer"); 13 break; 14 15 default: 16 break; 17 } 18 }; 19} 20 21wireTextChangeListner(); - ファイルを Salesforce の静的リソースとしてアップロードします。ファイルに、覚えやすい名前を付けます (スペースは使用できません)。
この例では、JavaScript ファイルの静的リソース名は CustomEvents_fromCustomerToAgent です。
- ファイルを組み込みサービスのコードスニペットに追加します (バージョン 5.0 以降を使用していることを確認してください)。ファイル名ではなく、静的リソース名を入力します。
1embedded_svc.settings.externalScripts = ["CustomEvents_fromCustomerToAgent"]; - Visualforce ページをコンソールに追加します。
コンソールから、タブを追加し、ステップ 1 で作成した Visualforce ページのプレビューページの URL を貼り付けます。
- 新しいイベントをテストします。
Visualforce ページとチャットウィンドウを再読み込みし、チャットを開始し、顧客としてチャットメッセージ項目に「trigger」 (トリガ) と入力します。作成したイベントリスナがチャットメッセージ項目の変更を監視し、項目が「trigger (トリガ)」に一致するとイベントが送信されます。
onChatStateLoaded および onCustomScriptsLoaded イベント (コードスニペットの一部として追加します) をリスンすると、エージェントがカスタムイベントを送受信するためにスクリプトが読み込まれたタイミングを知ることができます。