Using Engagement Attributes
This method involves using Engagement Attributes in order to target authenticated engagements at visitors that are authenticated with your site.
Browser-side code
This involves pushing the customer status of 'Authenticated' or 'Unauthenticated' depending on something controlled by your website/application. For this demonstration, we use a localStorage boolean item called 'auth' to retrieve the current status. Your application must set the value in localStorage.
lpTag.sdes = lpTag.sdes||[];
if (localStorage.getItem('auth') === 'true') {
lpTag.sdes.push(
{
"type": "ctmrinfo",
"info": {
"cstatus": "authenticated"
}
});
} else {
lpTag.sdes.push(
{
"type": "ctmrinfo",
"info": {
"cstatus": "unauthenticated"
}
});
};
Important: You must use a suitable method for determining if the user is authenticated and set the localStorage value, or by some other means. It is beyond this article to provide suitable methods for your website. If you are using Microsoft Portals, you may use the User Liquid Object to determine if the user is authenticated on your Portal.
Engagement Portal Configuration
You must create two campaigns, one for authenticated chat and one for an unauthenticated chat.
In the campaign settings, you can choose a target audience. Set up two, one for Authenticated audiences and one for Unauthenticated audiences:
Point each campaign at the correct customer status.
Using Embedded Buttons
You could achieve this behavior with one campaign and two engagements, one for Authenticated users and one for Unauthenticated users, by embedding div-elements. For each engagement, you will need to design your own Embedded Engagement Buttons.
The example code below chooses which div to display, depending on the status of the 'auth' local storage item we used earlier, and uses jquery to append the appropriate targeting content.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function setDiv(){ console.log(localStorage.getItem('auth'));
if (localStorage.getItem('auth') == 'true') {
$("#authstate").append("<div id='div_auth'></div>");
} else {
$("#authstate").append("<div id='div_unauth'></div>");
}
</script>
</head>
<body>
<div id="authstate"></div> [LA4365 TAG HERE]
</body>
</html>