Iniciar un chat de forma proactiva

Podes axudar a mellorar a satisfacción dos clientes anticipando as áreas onde os clientes necesitan axuda e, a continuación, involucralos a través do chat cando estiveron navegando polo teu sitio web durante algún tempo.

Considere os seguintes escenarios para iniciar proactivamente un chat.

Nota

As mostras de código listadas nos seguintes escenarios usan a API setContextProvider que só se pode usar para chat non autenticado. Para o chat autenticado, debes usar o token web JSON (JWT). Máis información: Enviar tokens de autenticación

Escenario 1: Tempo de espera do cliente

Amy danou accidentalmente un libro de superficies e está na base de coñecemento do produto intentando buscar respostas durante uns 20 segundos. Unha solicitude de chat proactiva desencadea en función da páxina do produto que Amy estaba navegando e do tempo que pasou na páxina.

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

Amy pode aceptar a oferta de chat e comezar a conversa para resolver o problema.

Código de exemplo

<!-- 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>

Escenario 2: O cliente visita unha páxina web varias veces

Thomas está navegando pola páxina web da comunidade de Microsoft Surface e está a buscar información sobre o dispositivo Microsoft Surface. Thomas visitou unha páxina web varias veces, pero non é capaz de atopar as respostas.

Ao realizar este escenario, a organización ofrece unha solicitude de chat ao cliente coa seguinte mensaxe.

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

Código de exemplo

<!-- 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>

Escenario 3: O cliente comproba o estado do caso de soporte aberto

Jacob está a navegar pola páxina de soporte para dispositivos Microsoft Surface para atopar máis información sobre o caso de soporte aberto. Jacob estivo na páxina durante 10 segundos, e despois ofréceselle un chat proactivo coa seguinte mensaxe.

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

Código de exemplo

<!--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>

Escenario 4: O cliente intenta abandonar unha páxina web despois de pasar un tempo nela

Amy leva 15 segundos navegando por unha páxina web e non está satisfeita coa información dispoñible. Cando Amy está a piques de cambiar de pestana no navegador web, envíase unha solicitude de chat proactiva coa seguinte mensaxe a Amy.

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

Código de exemplo

//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>

Escenario 5: O cliente navega por outra páxina web e despois pasa o tempo na páxina web actual

Amy navegou polo documento de FAQ do produto e actualmente está na páxina da base de coñecemento durante máis de 15 segundos. Amy ofréceselle proactivamente unha sesión de chat coa seguinte mensaxe.

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

Código de exemplo

//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>

Escenario 6: O cliente inicia sesión desde unha rexión xeográfica específica

Klarissa inicia sesión no seu sitio web desde Ruritania, onde a súa empresa está a executar un desconto especial en produtos. Podes configurar un desencadeante para clientes que veñen dun lugar particular que inicia de forma proactiva unha sesión de chat. Clarissa é invitado a falar coa seguinte mensaxe.

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

Código de exemplo

Este código de mostra mostra como podes usar as API de xeolocalización de Bing para coñecer a rexión xeográfica do cliente e ofrecer solicitude de chat baseada nela. Máis información sobre as API de localización de Bing: API de localizacións de Bing Maps.

//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>

Escenario 7: Ofrecer de forma proactiva chat aos clientes nun determinado período de tempo

Supoña que a túa organización está a realizar unha venda de festas entre certas datas e queres ofrecer de forma proactiva solicitudes de chat aos clientes para ver se teñen algunha dúbida.

Código de exemplo

O seguinte código de mostra mostra como podes ofrecer invitacións de chat de forma proactiva aos clientes cando visitan o teu sitio web nun período de tempo.

//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>

Escenario 8: Ofrecer de forma proactiva chat con enquisa previa aos clientes

Supoña que a túa organización quere autorización de consentimento para iniciar un chat cun cliente ou quere preguntar sobre os temas relacionados coa consulta do cliente antes de encamiñar a sesión ao axente adecuado.

Código de exemplo

O seguinte código de mostra mostra como podes ofrecer de forma proactiva chat cunha pregunta previa á enquisa aos teus clientes.

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);
 });

Información relacionada

Iniciar a API de ProactiveChat
Xestionar contexto personalizado
Iniciar unha conversa
Mostrar o contexto personalizado
Referencia á API JavaScript de chat en directo