Iniciar un chat de forma proactiva
Puede ayudar a mejorar la satisfacción del cliente al anticipar las áreas en las que los clientes necesitan ayuda y luego involucrarlos a través del chat cuando han estado navegando en su sitio web durante algún tiempo.
Considere los siguientes escenarios para iniciar un chat de forma proactiva.
Nota
Los ejemplos de código enumerados en los siguientes escenarios usan la API setContextProvider que se puede usar solo para chat no autenticado. Para el chat autenticado, debe usar el token web JSON (JWT). Más información: Enviar tokens de autenticación
Escenario 1: Tiempo de espera del cliente
Amy ha dañado accidentalmente un Surface Book y están en la base de conocimientos de productos intentando buscar respuestas alrededor de 20 segundos. Se activa una solicitud de chat proactiva en función de la página del producto que Amy estaba navegando y el tiempo que pasó en la página.
Hi! Just checking in to see if I can help answer any questions you may have.
Amy puede aceptar la oferta de chat e iniciar la conversación para arreglar el problema.
Código de ejemplo
<!-- 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: El cliente visite una página web varias veces
Thomas está navegando por la página web de la comunidad Microsoft Surface y busca información sobre el dispositivo Microsoft Surface. Thomas ha visitado una página web varias veces, pero no puede encontrar las respuestas.
Al darse cuenta de este escenario, la organización ofrece una solicitud de chat al cliente con el siguiente mensaje.
Hi! Do you have a question on Surface device ? I am here to help.
Código de ejemplo
<!-- 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: el cliente verifica el estado del caso de soporte abierto
Jacob está examinando la página de soporte técnico para dispositivos Microsoft Surface para encontrar más información acerca del caso de soporte técnico abierto. Jacob ha estado en la página durante 10 segundos y luego se le ofrece un chat proactivo con el siguiente mensaje.
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 ejemplo
<!--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: El cliente intenta salir de una página web después de pasar algún tiempo en ella
Amy ha estado navegando en una página web durante 15 segundos y no está satisfecha con la información disponible. Cuando Amy está a punto de cambiar de pestaña en el navegador web, se envía a Amy una solicitud de chat proactiva con el siguiente mensaje.
Hi! Just checking in to see if I can help answer any questions you may have.
Código de ejemplo
//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: el cliente navegó por otra página web y luego pasa tiempo en la página web actual
Amy ha examinado el documento de preguntas frecuentes del producto y actualmente se encuentra en la página de la base de conocimientos durante más de 15 segundos. A Amy se le ofrece de forma proactiva una sesión de chat con el siguiente mensaje.
Hi! Just checking in to see if I can help answer any questions you may have.
Código de ejemplo
//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: el cliente inicia sesión desde una región geográfica específica
Klarissa inicia sesión en su página web desde Ruritania donde su empresa está ofreciendo un descuento especial de productos. Puede configurar un desencadenador para los clientes que vienen de una ubicación en particular que inicie de forma proactiva una sesión de chat. Se le pide a Klarissa que chatee con el siguiente mensaje.
Hi! Just checking in to see if I can help answer any questions you may have.
Código de ejemplo
Este código de ejemplo muestra cómo puede usar las API de geoubicación de Bing para conocer la región geográfica del cliente y ofrecer una solicitud de chat de acuerdo con ese dato. Para obtener más información acerca de las API de ubicación de Bing: API de ubicaciones de mapas de Bing.
//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 chat de forma proactiva a los clientes dentro de un período de tiempo determinado
Suponga que su organización está ejecutando una venta de temporada festiva entre ciertas fechas y desea ofrecer solicitudes de chat de manera proactiva a los clientes para ver si tienen alguna pregunta.
Código de ejemplo
El siguiente código de muestra le muestra cómo puede ofrecer de forma proactiva invitaciones de chat a los clientes cuando visitan su sitio web en un período de tiempo.
//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 proactivamente chat con encuesta previa a los clientes
Supongamos que su organización quiere autorización de consentimiento para iniciar un chat con un cliente o quiere preguntar sobre los temas relacionados con la consulta del cliente antes de enrutar la sesión al agente adecuado.
Código de ejemplo
El siguiente código de ejemplo muestra cómo puede ofrecer de forma proactiva un chat con una pregunta previa a la encuesta a sus 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);
});
Consulte también
API startProactiveChat
Administrar contexto personalizado
Iniciar un chat
Mostrar contexto personalizado
Referencia de las API de JavaScript de chat activo