0

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>

2

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>
7
  • thanks for the info. I have edited my answer and added the source code where the two buttons are. The problem is that if I write something like this: var test = liveagent.addCustomDetail('test','Test Value'); then it will be added to both buttons and not just one. both buttons will have the same CustomDetail
    – Json
    Feb 7 '17 at 12:55
  • 1
    thanks again. It seems there is a problem adding CustomDetail after init. This is the error I get: Uncaught Error: You cannot add a detail after page initialization. at Object.p.addCustomDetail
    – Json
    Feb 7 '17 at 14:10
  • any ideas on how to continue?
    – Json
    Feb 7 '17 at 18:57
  • Check my updated answer.
    – Saroj Bera
    Feb 7 '17 at 19:54
  • Your observation is correct! the Pre-Chat's URL does contain the button ID. Problem Solved!
    – Json
    Feb 7 '17 at 20:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.