Skip to main content

Using both Authenticated and Unauthenticated Engagements on the same Site

  • Chat

Updated ~ minute read

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.

Screen_Shot_2021-12-31_at_8.25.48_AM.png

In the campaign settings, you can choose a target audience. Set up two, one for Authenticated audiences and one for Unauthenticated audiences:

Screen_Shot_2021-12-31_at_8.25.41_AM.png

Screen_Shot_2021-12-31_at_8.24.31_AM.png

Screen_Shot_2021-12-31_at_8.23.38_AM.png

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>

Related articles