チャットを積極的に開始する

[アーティクル]
06/02/2024

Customer Service 用オムニチャネルには、Dynamics 365 Customer Service Enterprise の機能を拡張する一連の機能が用意されていて、組織はデジタルメッセージングチャネルを通して顧客と即座につながり、やり取りできるようになります。 Customer Service 用オムニチャネルにアクセスする際は、追加のライセンスが必要です。詳細については、Dynamics 365 Customer Service 価格の概要と Dynamics 365 Customer Service 価格プランページを参照してください。

顧客が助けを必要としている領域を予測し、しばらくの間 Web サイトを閲覧しているときにチャットを通じて顧客を引き付けることで、顧客満足度の改善を支援することができます。

チャットを積極的に開始するには、次のシナリオを検討してください。

Note

次のシナリオにリストされているコードサンプルは、認証されていないチャットにのみ使用できる setContextProvider API を使用します。認証されたチャットの場合、JSON Web Token (JWT) を使用する必要があります。詳細情報: authentication トークンの送信

シナリオ 1 :顧客の待機時間

Amy は、SurfaceBook をうっかり破損し、約 20 秒間、製品のサポート情報の解決策を検索しました。積極的ななチャットリクエストは、Amy が閲覧していた製品ページとそのページで費やした時間に基づいてトリガーされます。

Hi! Just checking in to see if I can help answer any questions you may have.

Amy は、チャットの提案を承認して、会話を開始し、問題を整理できます。

サンプルコード

<!-- Code to show proactive chat invite after visitor has spend given time on the webpage -->
<script id="Proactivechattrigger">
	// Wait for Chat widget to load completely
    window.addEventListener("lcw:ready", function handleLivechatReadyEvent(){
		var timeToWaitBeforeOfferingProactiveChatInMilliseconds = 20000;//time to wait before Offering proactive chat to webpage visitor
		// Setting context variables
        Microsoft.Omnichannel.LiveChatWidget.SDK.setContextProvider(function contextProvider(){
            return {
                'Proactive Chat':{'value':'True','isDisplayable':true},
                'Time On Page':{'value': timeToWaitBeforeOfferingProactiveChatInMilliseconds ,'isDisplayable':true},
                'Page URL':{'value': window.location.href,'isDisplayable':true},
            };
        });
		
		//Display proactive chat invite after 'timeToWaitBeforeOfferingProactiveChatInMilliseconds' milliseconds
        setTimeout(function(){
            Microsoft.Omnichannel.LiveChatWidget.SDK.startProactiveChat({message: "Hi! Just checking in to see if I can help answer any questions you may have."}, false)
        },timeToWaitBeforeOfferingProactiveChatInMilliseconds);
    });
</script>

シナリオ 2: 顧客が Web ページに複数回アクセスする

Thomas は Microsoft Surface コミュニティの Web ページを閲覧しており、Microsoft Surface デバイスに関する情報を探しています。 Thomas は何度も Web ページにアクセスしましたが、答えを見つけることができていません。

このシナリオを実現するために、組織は次のメッセージを使用して顧客にチャット要求を提供します。

Hi! Do you have a question on Surface device ? I am here to help.

サンプルコード

<!-- Code to show proactive chat invite(after given time) after visitor visits the webpage given number of time -->

<!-- Operations on cookies like creating cookies, deleting cookies etc.. -->
<script>
var expdate = new Date ();
expdate.setTime (expdate.getTime() + (24 * 60 * 60 * 1000*365)); // 1 yr from now 
/* ####################### start set cookie  ####################### */
function setCookie(name, value, expires, path, domain, secure) {
  var thisCookie = name + "=" + escape(value) +
      ((expires) ? "; expires=" + expires.toGMTString() : "") +
      ((path) ? "; path=" + path : "") +
      ((domain) ? "; domain=" + domain : "") +
      ((secure) ? "; secure" : "");
  document.cookie = thisCookie;
}

/* ####################### start get cookie value ####################### */
function getCookieVal (offset) {
  var endstr = document.cookie.indexOf (";", offset);
  if (endstr == -1)
    endstr = document.cookie.length;
  return unescape(document.cookie.substring(offset, endstr));
/* ####################### end get cookie value ####################### */
}

/* ####################### start get cookie (name) ####################### */
function GetCookie (name) {
  var arg = name + "=";
  var alen = arg.length;
  var clen = document.cookie.length;
  var i = 0;
  while (i < clen) {
    var j = i + alen;
    if (document.cookie.substring(i, j) == arg)
      return getCookieVal (j);
    i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0) break; 
  }
  return null;
}
/* ####################### End get cookie (name) ####################### */

/* ####################### Start delete cookie ####################### */
function DeleteCookie (name,path,domain) {
  if (GetCookie(name)) {
    document.cookie = name + "=" +
      ((path) ? "; path=" + path : "") +
      ((domain) ? "; domain=" + domain : "") +
      "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
}
/* ####################### End of delete cookie ####################### */

/* ####################### Count number of visits to current webpage ####################### */
function VisitCounter(){
var visits = GetCookie("timesPageVisited");
if (!visits) { visits = 1; 
document.write("Select a Conversation Space");
} 
else { 
visits = parseInt(visits) + 1;document.write("Select a Conversation Space.");}
setCookie("timesPageVisited", visits,expdate);
}
/* ####################### End of count number of visits to current webpage ####################### */
</script>


<!-- Count number of visits to current webpage -->
<script>
VisitCounter();
</script>

<script id="Proactivechattrigger">
	// Wait for Chat widget to load completely
    window.addEventListener("lcw:ready", function handleLivechatReadyEvent(){
		// setting Context variables
        Microsoft.Omnichannel.LiveChatWidget.SDK.setContextProvider(function contextProvider(){
            return {
                'Proactive Chat':{'value':'True','isDisplayable':true},
                'No. of visits':{'value':'2','isDisplayable':true},
                'Forums':{'value':'Surface Devices','isDisplayable':true},
            };
        });

        setTimeout(function(){
			var timeToWaitBeforeOfferingProactiveChatInMilliseconds = 5000;//Time to wait before offering proactive chat to webpage visitor
            var visits = GetCookie("timesPageVisited");
			//Check if webpage has been visited 2 or more times by the user.
            if (visits > 2) {		
				//Display proactive chat invite
                Microsoft.Omnichannel.LiveChatWidget.SDK.startProactiveChat({message: "Hi! Do you have a question on Surface device? I am here to help."}, false);
                DeleteCookie("timesPageVisited");//Delete the cookie to reset the counter
            }
        },timeToWaitBeforeOfferingProactiveChatInMilliseconds);
    });
</script>

シナリオ 3: 顧客がオープンサポートケースのステータスを確認する

Jacob は、Microsoft Surface デバイスのサポートページを閲覧し、サポート案件のオープンに関する詳細情報を見つけようとしています。 Jacob はこのページに 10 秒間滞在した後、次のメッセージとともに積極的にチャットが提供されます。

Hi! How are you doing today? The status of the case:<caseid> is in progress. Would you like to get more details?

サンプルコード

<!--Code to show proactive chat invite after visitor has spend given time on the webpage, with relevant details about user.-->
<script id="Proactivechattrigger">
	// Wait for Chat widget to load completely
    window.addEventListener("lcw:ready", function handleLivechatReadyEvent(){
		var timeToWaitBeforeOfferingProactiveChatInMilliseconds = 10000;//Time to wait before offering proactive chat to webpage visitor
		var caseId = '< your case id relevant to the user.>';//Set case id relevant to the user.
		// setting Context variables
        Microsoft.Omnichannel.LiveChatWidget.SDK.setContextProvider(function contextProvider(){
            return {
                'Proactive Chat':{'value':'True','isDisplayable':true},
                'Case Id':{'value':caseId,'isDisplayable':true}
            };
        });
		
		//Show proactive chat invite after 'timeToWaitBeforeOfferingProactiveChatInMilliseconds' milliseconds
        setTimeout(function(){
            Microsoft.Omnichannel.LiveChatWidget.SDK.startProactiveChat({message: "Hi! How are you doing today? The status of the case: " + caseId + " is in progress. Would you like to get more details?"}, false)
        },timeToWaitBeforeOfferingProactiveChatInMilliseconds);
    });
</script>

シナリオ 4:顧客は、一定の時間をその Web ページで費やしたら、そのページを離れようとします。

Amy は 15 秒間 Web ページを閲覧していて、入手できる情報に満足していません。 Amy が Web ブラウザーのタブを切り替えようとすると、次のメッセージとともに Amy に積極的なチャット要求が送信されます。

Hi! Just checking in to see if I can help answer any questions you may have.

サンプルコード

//Code to show proactive chat invite when visitor tries to leave page after spending given time (15 seconds in this case) on the webpage. This invite is offered once and only for the first time. All subsequent tries to leave page are ignored and proactive chat is not offered in them. 
<script id="Proactivechattrigger">
	//Track if proactive chat has been already offered to the visitor
	var hasProactiveChatBeenOffered = false;	
	//Wait for Chat widget to load completely
    window.addEventListener("lcw:ready", function handleLivechatReadyEvent(){
		var timeToWaitBeforeEnablingOfferingProactiveChatInMillisecondsOnLeaving = 15000; //Time to wait before Offering proactive chat to webpage visitor
		
		//Enable showing proactive chat invite on leaving page after browsing page for 'timeToWaitBeforeEnablingOfferingProactiveChatInMillisecondsOnLeaving' milliseconds
        setTimeout(function(){
			//Show proactive chat invite on leaving page
			window.document.body.onmouseleave = function(){
				//Offer proactive chat if it has not been offered earlier during this visit
				if( hasProactiveChatBeenOffered == false )
				{
					// Set this to true as proactive chat has been almost offered.
					hasProactiveChatBeenOffered = true;
					//Setting Context variables
					Microsoft.Omnichannel.LiveChatWidget.SDK.setContextProvider(function contextProvider(){
						return {
							'Proactive Chat':{'value':'True','isDisplayable':true},
							'Page URL':{'value': window.location.href,'isDisplayable':true},
						};
					});
					//Offer proactive chat
					Microsoft.Omnichannel.LiveChatWidget.SDK.startProactiveChat({message: "Hi! Just checking in to see if I can help answer any questions you may have."}, false);
				}
			};
        },timeToWaitBeforeEnablingOfferingProactiveChatInMillisecondsOnLeaving);
    });
</script>

シナリオ 5: 顧客が別の Web ページを閲覧し、現在の Web ページで時間を費やしている

Amy は製品に関するよくあるご質問のドキュメントを閲覧し、今はサポート記事のページを 15 秒以上閲覧しています。 Amy は、次のメッセージとともにチャットセッションが積極的に提供されます。

Hi! Just checking in to see if I can help answer any questions you may have.

サンプルコード

//Code to show proactive chat invite when visitor spends given time on current page, after coming from given last visited page
<script id="Proactivechattrigger">
	var lastVisitedPage = "www.contoso.com/FAQ";// last visited page. A visitor coming form this page will be shown proactive chat invite after given time on current page
	// Wait for Chat widget to load completely
    window.addEventListener("lcw:ready", function handleLivechatReadyEvent(){
		var timeToWaitBeforeOfferingProactiveChat = 15000;//Time to wait before Offering proactive chat to webpage visitor
		//Check if referrer page( read: https://www.w3schools.com/jsref/prop_doc_referrer.asp ) is same as last Visited page 
		if( window.document.referrer == lastVisitedPage) )
		{
			//Show proactive chat invite after browsing page for 'timeToWaitBeforeOfferingProactiveChat' milliseconds
			setTimeout(function(){
				//Setting Context variables
				Microsoft.Omnichannel.LiveChatWidget.SDK.setContextProvider(function contextProvider(){
				return {
							'Proactive Chat':{'value':'True','isDisplayable':true},
							'Page URL':{'value': window.location.href,'isDisplayable':true},
							'Last Page URL':{'value': window.document.referrer,'isDisplayable':true}
						};
				});
				//Offer proactive chat
				Microsoft.Omnichannel.LiveChatWidget.SDK.startProactiveChat({message: "Hi! Just checking in to see if I can help answer any questions you may have."}, false);
			},timeToWaitBeforeOfferingProactiveChat);
		}
    });
</script>

シナリオ 6: 顧客が特定の地域からサインインしている

クラリッサは、あなたの企業が製品の特別割引を実行している Ruritania の Web サイトにログオンしています。特定の場所から来る顧客に対してチャットセッションを積極的に開始するトリガーを設定できます。 Klarissa は、次のメッセージとともにチャットするように求められます。

Hi! Just checking in to see if I can help answer any questions you may have.

サンプルコード

このサンプルコードは、Bingの Geolocation API を使用して、顧客の地域を把握し、それに基づいてチャット要求を提示する方法を示しています。 Bing の LocationAPIに関する詳細:Bing Maps Locations API

//Code to show proactive chat invite if visitor is visiting the page in a particular country or region
<script id="Proactivechattrigger">
	// Wait for Chat widget to load completely
    window.addEventListener("lcw:ready", function handleLivechatReadyEvent(){
		var countryNameWhereProactiveChatInviteShouldBeOffered = 'Ruritania';//Country name where proactive chat invite should be offered, if user is visiting webpage from this country
		
		// Get Country name using Bing Geolocation API and proactively offer chat if visitor's country matches with given country name
		function GetCountryUsingBingGeoLocationAPIAndOfferProactiveChatIfVisitorCountryMatchesWithGivenCountry( latitude, longitude, bingMapApiKey, countryToMatch) {
			var xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function() {
			if (this.readyState == 4)
				if(this.status == 200) {
					console.log(this.responseText);
					var currentCountryName = JSON.parse(this.responseText).resourceSets[0].resources[0].address.countryRegion;
					//Check if visitor's country matches with given Country name
					if( currentCountryName == countryToMatch){
						alert(currentCountryName);
						// setting Context variables
						Microsoft.Omnichannel.LiveChatWidget.SDK.setContextProvider(function contextProvider(){
						    return {
						        'Proactive Chat':{'value':'True','isDisplayable':true},
						        'Country':{'value': currentCountryName ,'isDisplayable':true},
						        'Page URL':{'value': window.location.href,'isDisplayable':true},
						    };
						});
						//Show proactive chat invite
						Microsoft.Omnichannel.LiveChatWidget.SDK.startProactiveChat({message: "Hi! Just checking in to see if I can help answer any questions you may have."}, false);
					}
				}
				else{
					console.log("Bing Geolocation API call has failed and returned error: " + this.statusText);
				}
			};
			xhttp.open("GET", 'https://dev.virtualearth.net/REST/v1/Locations/'+ latitude +','+ longitude +'?key='+ bingMapApiKey, true);
			xhttp.setRequestHeader("Content-type", "application/json");
			xhttp.send();
		}
		
		//fetching latitude and longitude is success
		function successGetlatLong(position) {
			var latitude = position.coords.latitude;
			var longitude = position.coords.longitude;
			console.log('Your latitude is :'+latitude+' and longitude is '+longitude);
			//convert current loaction to a country/ region via Bing Geolocation APIs
			var bingMapApiKey = 'Enter your Bing Map API key';// Get Bing Map API key here : https://learn.microsoft.com/bingmaps/getting-started/bing-maps-dev-center-help/getting-a-bing-maps-key
			GetCountryUsingBingGeoLocationAPIAndOfferProactiveChatIfVisitorCountryMatchesWithGivenCountry( latitude, longitude, bingMapApiKey, countryNameWhereProactiveChatInviteShouldBeOffered);// get Country name using Bing Geolocation API and offer proctiveChat if visitor's country matches with Country name where proactive chat invite should be offered
		}
		
		//fetching latitude and longitude has failed
		function errorGetlatLong() {
			console.log('It seems browser was not allowed to access location. Please allow browser to access location.');
		}
		
		//fetch latitude and longitude via browser
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(successGetlatLong, errorGetlatLong);
		} else {
			console.log('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.');
		}
    });
</script>

シナリオ 7: 特定の期間内に顧客に積極的にチャットを提供する

組織が特定の日付の間にホリデーシーズンのセールを実施していて、顧客に質問があるかどうかを確認するためにチャットリクエストを積極的に提供したいとします。

サンプルコード

次のサンプルコードは、顧客が一定期間に Web サイトにアクセスしたときに、チャットの招待を積極的に提供する方法を示しています。

//Code to show proactive chat invite if visitor visits webpage between given time period
<script id="Proactivechattrigger">
	// Wait for Chat widget to load completely
    window.addEventListener("load", function handleLivechatReadyEvent(){//lcw:ready
		var startTimeOfTimePeriod = new Date('01 Jan 2019 00:00:00 GMT');//start time of time period in which proactive chat will be shown to webpage visitor
		var endTimeOfTimePeriod = new Date('01 Jan 2100 00:00:00 GMT');//end time of time period in which proactive chat will be shown to webpage visitor
		var currentDateTime = new Date();//current date and time
		
		//Make sure that endTimeOfTimePeriod is always greater and equal to startTimeOfTimePeriod
		if( endTimeOfTimePeriod < startTimeOfTimePeriod)
		{
			console.log("The time period given for proactive chat has start time: " + startTimeOfTimePeriod.toGMTString() + " more that the end time: " + endTimeOfTimePeriod.toGMTString() + " of time period. So, proactive chat will not be offered.");
			return;
		}
		
		//Check if current date time is between given time period
		if( startTimeOfTimePeriod < currentDateTime && endTimeOfTimePeriod > currentDateTime){
			// setting Context variables
			Microsoft.Omnichannel.LiveChatWidget.SDK.setContextProvider(function contextProvider(){
				return {
					'Proactive Chat':{'value':'True','isDisplayable':true},
					'Page URL':{'value': window.location.href,'isDisplayable':true},
				};
			});
			//Show proactive chat invite 
			Microsoft.Omnichannel.LiveChatWidget.SDK.startProactiveChat({message: "Hi! Just checking in to see if I can help answer any questions you may have."}, false);
		}
    });
</script>

シナリオ 8: 事前調査とのチャットを顧客に積極的に提供する

組織が顧客とのチャットを開始するための同意承認を希望している、またはセッションを適切なエージェントにルーティングする前に顧客の問い合わせに関連するトピックについて質問したいとします。

サンプルコード

次のサンプルコードは、調査前の質問を含むチャットを顧客に積極的に提供する方法を示しています。

window.addEventListener("lcw:ready", function handleLivechatReadyEvent(){
 Microsoft.Omnichannel.LiveChatWidget.SDK.startProactiveChat( 
 "Hi! How are you doing today? Do you wish to start a chat?",
 true);
 });

次の方法で共有

チャットを積極的に開始する

シナリオ 1 :顧客の待機時間

シナリオ 2: 顧客が Web ページに複数回アクセスする

シナリオ 3: 顧客がオープンサポートケースのステータスを確認する

シナリオ 4:顧客は、一定の時間をその Web ページで費やしたら、そのページを離れようとします。

シナリオ 5: 顧客が別の Web ページを閲覧し、現在の Web ページで時間を費やしている

シナリオ 6: 顧客が特定の地域からサインインしている

シナリオ 7: 特定の期間内に顧客に積極的にチャットを提供する

シナリオ 8: 事前調査とのチャットを顧客に積極的に提供する

関連情報

フィードバック

フィードバック

その他のリソース

次の方法で共有

チャットを積極的に開始する

シナリオ 1 :顧客の待機時間

シナリオ 2: 顧客が Web ページに複数回アクセスする

シナリオ 3: 顧客がオープン サポート ケースのステータスを確認する

シナリオ 4:顧客は、一定の時間をその Web ページで費やしたら、そのページを離れようとします。

シナリオ 5: 顧客が別の Web ページを閲覧し、現在の Web ページで時間を費やしている

シナリオ 6: 顧客が特定の地域からサインインしている

シナリオ 7: 特定の期間内に顧客に積極的にチャットを提供する

シナリオ 8: 事前調査とのチャットを顧客に積極的に提供する

関連情報

フィードバック

フィードバック

その他のリソース

シナリオ 3: 顧客がオープンサポートケースのステータスを確認する