[SalesForce] Detect Which Chat Button Was Clicked – Live Agent

I was hoping you guys can help me with this simple question.

On our website, we have two chat buttons, one for Customers and one for Employees. Both chat buttons redirect to the same Pre-Chat page.

On the pre-chat page, I would like to know on which button the user clicked before he got redirected to this page.
Basically, I would like to display a certain set of questions to our Customers and a different set of questions to our Employees.

How can this be achieved?

Chat-Setup page: (With the two buttons)

<apex:page>

<img id="liveagent_button_online_573250000004CUL" alt="Online Chat 24/7" style="display: none; border: 0px none; cursor: pointer" onclick="liveagent.startChat('573250000004CUL')" src="https://staging.cs80.force.com/chat/resource/1482678009000/OnlineButtonNew" />
<img id="liveagent_button_offline_573250000004CUL" style="display: none; border: 0px none; " src="https://staging.cs80.force.com/chat/resource/1482145569000/OfflineButtonOld" />


<img id="liveagent_button_online_573250000004CV4" style="display: none; border: 0px none; cursor: pointer" onclick="liveagent.startChat('573250000004CV4')" src="https://staging.cs80.force.com/chat/resource/1486459753000/OnlineButtonNewEnt" />
<img id="liveagent_button_offline_573250000004CV4" style="display: none; border: 0px none; " src="https://staging.cs80.force.com/chat/resource/1482145569000/OfflineButtonOld" />
<script type="text/javascript">
    if (!window._laq) {
        window._laq = [];
    }
    window._laq.push(function() {
        liveagent.showWhenOnline('573250000004CUL', document.getElementById('liveagent_button_online_573250000004CUL'));
        liveagent.showWhenOffline('573250000004CUL', document.getElementById('liveagent_button_offline_573250000004CUL'));
        liveagent.showWhenOnline('573250000004CV4', document.getElementById('liveagent_button_online_573250000004CV4'));
        liveagent.showWhenOffline('573250000004CV4', document.getElementById('liveagent_button_offline_573250000004CV4'));
    });

</script>

<script type='text/javascript' src='https://c.la1-c1cs-lon.salesforceliveagent.com/content/g/js/38.0/deployment.js'></script>

<!--Customize Chat Window with the Deployment APIs-->
<script type='text/javascript'>
    liveagent.enableLogging();
    liveagent.setChatWindowHeight(766);
    liveagent.setChatWindowWidth(510);

</script>
<script type='text/javascript'>
    liveagent.init('https://d.la1-c1cs-lon.salesforceliveagent.com/chat', '572250000004CGd', '00D250000000aT9');

</script>

Best Answer

Please refer to this Salesforce knowledge Article on How to pass values from Start Chat button to Pre-Chat Form. Use different values in liveagent.addCustomDetail for different buttons. Get the value in pre-chat form and show different set of question to different user.

Description

In Live Agent, sometimes users need to pass some values from the page, where Start Chat button is located, to pre-chat form. Some users use cookies as an option. However, if the Chat button is on a custom domain and prechat form is on force.com domain then that method won't work. This is because browsers don't allow one domain to access cookies from another domain; security issue.

Resolution
To achieve this, liveagent.addCustomDetail() function can be used to set the values. On pre chat form page, liveagent.details.preChatInit() function can be used to access those details.

This code will be added to the page where you are adding chat button and deployment code

<script type='text/javascript'>
var test = liveagent.addCustomDetail('test','Test Value');
</script>

Add following code on the pre chat form page

<script type='text/javascript' src='https://c.la1c1.salesforceliveagent.com/content/g/js/32.0/prechat.js'></script>
<script type="text/javascript">
var detailCallback = function (details){
    for (var i = 0; i < details.customDetails.length; i++) {
        if(details.customDetails[i].label == 'test'){
            console.log(details.customDetails[i].value);
        }
    }
};
//First parameter is Chat URL. This is same as generated in Live Chat deployment code and can be used here
//This might be different for different users
//For example, in my Live chat deployment, the chat URL was 'https://d.la1c1.salesforceliveagent.com/chat' as defined in liveagent.init('https://d.la1c1.salesforceliveagent.com/chat', '5724000000000XX', '00De000000XXXXX');
liveagent.details.preChatInit('https://d.la1c1.salesforceliveagent.com/chat','detailCallback');

Update - Chat-Setup page: (With the two buttons)

On close observation I found that the button id appears as an URL parameter “button_id” on the pre chat form popup, so I think you can use that to differentiate between two buttons and show/hide fields with the help of JavaScript. Refer to the code below, on how to get the button id from the prechat URL.

Prechat page JavaScript Code

<script type="text/javascript">
(function() { 
    function handlePageLoad() {
        var endpoint = getParameterByName('endpoint');
        var buttonid = getParameterByName('button_id',endpoint);
        alert('button_id'+buttonid);
        var endpointMatcher = new RegExp("[\\?\\&]endpoint=([^&#]*)");
        document.getElementById('prechatForm').setAttribute('action',decodeURIComponent(endpointMatcher.exec(document.location.search)[1]));
    }
    if (window.addEventListener) {
        window.addEventListener('load', handlePageLoad, false);
    } else {
        window.attachEvent('onload', handlePageLoad, false);
    }
})();
    function getParameterByName(name, url) {
        if (!url) {
          url = window.top.location.href;
        }
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }     
</script>
Related Topic