Pass Values from Start Chat Button to Pre-Chat Form in Salesforce Live Agent

In Live Agent, sometimes we need to pass some values from the page, where Start Chat button is located, to pre-chat form.

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.

Here is the sample code to pass values from chat button to pre-chat form. In below example I’m passing “FirstName” and “LastName” values to pre-chat form.

Start Chat Button Code:

<div>
    <img class="chatbutton" id="liveagent_button_online_5737F000000Tdus" style="display: none; border: 0px none; cursor: pointer" onclick="liveagent.startChat('5737F000000Tdus')" src="https://contactcenters-developer-edition.ap5.force.com/chat/resource/1510984682000/ChatOnline" />
    <img class="chatbutton" id="liveagent_button_offline_5737F000000Tdus" style="display: none; border: 0px none; " src="https://contactcenters-developer-edition.ap5.force.com/chat/resource/1510983523000/ChatOffline" />
</div>
<script type="text/javascript">
    if (!window._laq) {
        window._laq = [];
    }
    window._laq.push(function() {
        liveagent.showWhenOnline('5737F000000Tdus', document.getElementById('liveagent_button_online_5737F000000Tdus'));
        liveagent.showWhenOffline('5737F000000Tdus', document.getElementById('liveagent_button_offline_5737F000000Tdus'));
    });
</script>

<script type='text/javascript' src='https://c.la1-c1-ukb.salesforceliveagent.com/content/g/js/41.0/deployment.js'></script>
<script type='text/javascript'>
    liveagent.init('https://d.la1-c1-ukb.salesforceliveagent.com/chat', '5727F000000TijS', '00D7F000003EL75');//Set First Name
	//Set First Name
    liveagent.addCustomDetail('FirstName', 'Biswajeet');
	//Set Last Name
    liveagent.addCustomDetail('LastName', 'Samal');
    liveagent.setName('Biswajeet');
</script>

Pre-Chat Form Page:

    <script type='text/javascript' src='https://d.la1-c1-ukb.salesforceliveagent.com/content/g/js/36.0/prechat.js'></script>
    <script type="text/javascript">
        //Get Custom Details data
        function ChatCallBack(Object) {
            for (var i = 0; i < Object.customDetails.length; i++) {
                
                if (Object.customDetails[i].label == 'FirstName') {
                    //Get First Name
                    console.log(Object.customDetails[i].value);
                }
                if (Object.customDetails[i].label == 'LastName') {
                    //Get Last Name
                    console.log(Object.customDetails[i].value);
                }
            }
        };
        liveagent.details.preChatInit('https://d.la1-c1-ukb.salesforceliveagent.com/chat', 'ChatCallBack');
    </script>

Output: