Send parameter from chat button page to prechat form

Question

I have an issue when I try to deploy live agent salesforce from sandbox to production. I created a HTML page to store my 3 chat button. I set a parameter and a dummy value to pass it to the prechat form. In sandbox, the value is passed to the prechat form successfully. But in production, the value is not passed to the prechat form.

<html>
<head>
    <title></title>
    <!-- Using Bootstrap CSS -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            .header{
                background-image: url("SA Header.PNG");
                height:190px;
            }
            .footer{
                background-image: url("SA Footer.PNG");
                height:241px;
            }
            .imageCont{
                height:500px;
                padding: 100px 100px;
            }
        </style>
    <!-- End Bootstrap CSS -->
</head>

<body>
    <div class="header text-center" style="padding-bottom:10px;padding-top:10px;"></div>
    <div class="progress" style="height:5px;">
        <div class="progress-bar" role="progressbar" style="width:100%;background-color:#4B0082;"></div>
    </div>
    <div class="container">
        <div class="imageCont text-center">

            <table align = "center">


                <tr>
                    <td style='padding-right:30px;'>
                        <p> Chat With Agent SA </p>
                    </td>
                    <td>
                        <img id="liveagent_button_online_573280000004HkN" height="50" width="50" style="display: none; border: 0px none; cursor: pointer" 
                        onclick="liveagent.startChat('573280000004HkN')" src="https://--customer name--.secure.force.com/LiveChat/resource/1497416286000/Online_Button" />
                        <img id="liveagent_button_offline_573280000004HkN" height="50" width="50"  style="display: none; border: 0px none; cursor: pointer" 
                        onclick="window.location.href='mailto:service.it@--customer name--.com?subject=[IT Service SA] Please fill in the subject&amp;';"
                        src="https://--customer name--.secure.force.com/LiveChat/resource/1497416286000/Offline_Button" />

                    </td>
                </tr>


                <tr>
                    <td style='padding-right:30px;'>
                        <p> Chat With Agent SU </p>
                    </td>
                    <td>

                        <img id="liveagent_button_online_573280000004HkS" height="50" width="50" style="display: none; border: 0px none; cursor: pointer" 
                        onclick="liveagent.startChat('573280000004HkS')" src="https://--customer name--.secure.force.com/LiveChat/resource/1497416286000/Online_Button" />
                        <img id="liveagent_button_offline_573280000004HkS" height="50" width="50" style="display: none; border: 0px none; cursor: pointer"
                        onclick="window.location.href='mailto:service.it@--customer name--.com?subject=[IT Service SU] Please fill in the subject&amp;';"
                        src="https://--customer name--.secure.force.com/LiveChat/resource/1497416286000/Offline_Button" />

                </td>
                    </td>
                </tr>

                <tr>
                    <td style='padding-right:30px;'>
                        <p> Chat With Agent SS </p>
                    </td>
                    <td>
                        <img id="liveagent_button_online_573280000004HkX" height="50" width="50"  style="display: none; border: 0px none; cursor: pointer" 
                        onclick="liveagent.startChat('573280000004HkX')" src="https://--customer name--.secure.force.com/LiveChat/resource/1497416286000/Online_Button" />
                        <img id="liveagent_button_offline_573280000004HkX" height="50" width="50"  style="display: none; border: 0px none; cursor: pointer" 
                        onclick="window.location.href='mailto:service.it@--customer name--.com?subject=[IT Service SS] Please fill in the subject&amp;';"
                        src="https://--customer name--.secure.force.com/LiveChat/resource/1497416286000/Offline_Button" />
                    </td>
                </tr>


            </table>    

            <script type='text/javascript' src='https://c.la1-c2-ukb.salesforceliveagent.com/content/g/js/40.0/deployment.js'></script>
            <script type='text/javascript'>
            liveagent.init('https://d.la1-c2-ukb.salesforceliveagent.com/chat', '57228000000L4GF', '00D28000000eUxw');


            var firstName = 'asd';
            var lastName = 'Anton';
            liveagent.addCustomDetail("First Name", firstName);
            liveagent.addCustomDetail("Last Name", lastName);
            liveagent.addCustomDetail("Email", "[email protected]");
            liveagent.addCustomDetail("Phone", "99999");


            if (!window._laq) { window._laq = []; }
            window._laq.push(function(){liveagent.showWhenOnline('573280000004HkN', document.getElementById('liveagent_button_online_573280000004HkN'));
            liveagent.showWhenOffline('573280000004HkN', document.getElementById('liveagent_button_offline_573280000004HkN'));
            });



            if (!window._laq) { window._laq = []; }
            window._laq.push(function(){liveagent.showWhenOnline('573280000004HkS', document.getElementById('liveagent_button_online_573280000004HkS'));
            liveagent.showWhenOffline('573280000004HkS', document.getElementById('liveagent_button_offline_573280000004HkS'));
            });


            if (!window._laq) { window._laq = []; }
            window._laq.push(function(){liveagent.showWhenOnline('573280000004HkX', document.getElementById('liveagent_button_online_573280000004HkX'));
            liveagent.showWhenOffline('573280000004HkX', document.getElementById('liveagent_button_offline_573280000004HkX'));
            })




            </script>
        </div>
    </div>
    <div class="footer" style="padding-bottom:10px;padding-top:10px;"></div>
</body>

and the prechat form vf=

<apex:page showHeader="false">
<html>
    <head>
        <title></title>
        <!-- Using Bootstrap CSS -->
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <style>
                .colorBtn{
                    background-color:#1E90FF;
                    border: none;
                    color:white;
                    font-weight:bold;
                    padding: 9px 24px;
                    cursor: pointer;
                    width:150px;
                    height:35px;
                }


            .colorBtn:hover{
                background-color:#00BFFF;
            }
        </style>
    <!-- End Bootstrap CSS -->
    <!-- This script takes the endpoint URL parameter passed from the deployment page and makes it the action for the form -->
    <script type='text/javascript'>
        (function() {
        function handlePageLoad() {
        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);
        }})();
    </script>

    <script type='text/javascript' src='https://c.la1-c2-ukb.salesforceliveagent.com/content/g/js/40.0/deployment.js'></script>
    <script type="text/javascript">
        var detailCallback = function (details){
             //document.getElementById("firstName").value = details.customDetails[0].value;
             document.getElementById("lastName").value = details.customDetails[0].value;
             document.getElementById("email").value = details.customDetails[1].value;
             document.getElementById("phone").value = details.customDetails[2].value;
        };
        liveagent.details.preChatInit('https://d.la1-c2-ukb.salesforceliveagent.com/chat','detailCallback');
    </script>

</head>

<body style="background-color:#ede7f6" onload="moveTo(0,0); resizeTo(620,620);">
    <div class="header text-center" style="background-color:#ffffff;padding-bottom:10px;padding-top:10px;">
        <apex:image url="{!$Resource.SA_Logo}" width="300" height="150"/>
    </div>
    <div class="progress" style="height:5px;">
        <div class="progress-bar" role="progressbar" style="width:100%;background-color:#ff6f00;"></div>
    </div>
    <div class="container" style="background-color:#ede7f6">
        <!-- Form that gathers information from the chat visitor and sets the values to Live Agent Custom Details used later in the example -->
        <form method='post' id='prechatForm' class="form-horizontal">
            <!--
            <div class="form-group row">
                <label class="control-label col-sm-2" for="firstName">First Name:</label>
                <div class="col-sm-9">
                    <input type='text' class="form-control" name='liveagent.prechat:ContactFirstName' id='firstName' placeholder='Enter First Name'/>
                </div>
            </div>
            -->
            <div class="form-group row">
                <label class="control-label col-sm-2" for="lastName">Name:</label>
                <div class="col-sm-9">
                    <input type='text' class="form-control" name='liveagent.prechat:ContactLastName' id='lastName' placeholder='Enter Name'/>
                </div>
            </div>
            <div class="form-group row">
                <label class="control-label col-sm-2" for="email">Email:</label>
                <div class="col-sm-9">
                    <input type='text' class="form-control" name='liveagent.prechat:ContactEmail' id='email' placeholder='Enter Email'/>
                </div>
            </div>
            <div class="form-group row">
                <label class="control-label col-sm-2" for="phone">Phone Number:</label>
                <div class="col-sm-9">
                    <input type='text' class="form-control" name='liveagent.prechat:ContactPhone' id='phone' placeholder='Enter Phone Number'/>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-offset-2 col-sm-9">
                    <input type='submit' class="colorBtn" id='prechat_submit' value='Chat Now' onclick="setName()"/>
                </div>
            </div>

            <!-- define hidden field value into salesforce -->
            <input type="hidden" name="liveagent.prechat:CaseOrigin" value="Chat" />
            <input type="hidden" name="liveagent.prechat.name" id="prechat_field_name" />
            <input type="hidden" name="liveagent.prechat:CaseStatus" value="New" />
            <input type="hidden" name="liveagent.prechat:CaseSubject" value="Case from Live Chat" />

            <!-- Save visitor information into live chat transcript -->
            <input type="hidden" name="liveagent.prechat.save:ContactFirstName" value="First_Name__c" />
            <input type="hidden" name="liveagent.prechat.save:ContactLastName" value="Last_Name__c" />
            <input type="hidden" name="liveagent.prechat.save:ContactEmail" value="Email__c" />
            <input type="hidden" name="liveagent.prechat.save:ContactPhone" value="Phone_Number__c" />

            <!-- map: Use the data from prechat form to map it to the Salesforce record's fields -->
            <input type="hidden" name="liveagent.prechat.findorcreate.map:Contact" value="FirstName,ContactFirstName;LastName,ContactLastName;Email,ContactEmail;Phone,ContactPhone" />
            <input type="hidden" name="liveagent.prechat.findorcreate.map:Case" value="Subject,CaseSubject;First_Name__c,ContactFirstName;Last_Name__c,ContactLastName;Email__c,ContactEmail;Phone_Number__c,ContactPhone;Status,CaseStatus;Origin,CaseOrigin;" />

            <!-- doFind Contact using Email Parameter -->
            <input type="hidden" name="liveagent.prechat.findorcreate.map.doFind:Contact" value="Email,true" />
            <input type="hidden" name="liveagent.prechat.findorcreate.map.isExactMatch:Contact" value="Email,true" />

            <!-- doCreate example for a Case: create a case to attach to the chat, set the Case Subject to the value provided by the customer and set the case's Status and Origin fields -->
            <input type="hidden" name="liveagent.prechat.findorcreate.map.doCreate:Case" value="Subject,true;First_Name__c,true;Last_Name__c,true;Email__c,true;Phone_Number__c,true;Status,true;Origin,true;" />

            <!-- linkToEntity: Set the record Contact record, found/created above, as the Contact on the Case that's created --> 
            <input type="hidden" name="liveagent.prechat.findorcreate.linkToEntity:Contact" value="Case,ContactId" />

            <!-- showOnCreate: Open the Contact and Case records as sub-tabs to the chat for the agent in the Console -->
            <input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Contact" value="true" />
            <input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Case" value="true" />

            <!-- saveToTranscript: Associates the records found / created, i.e. Contact and Case, to the Live Chat Transcript record. --> 
            <input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Contact" value="ContactId" />
            <input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Case" value="CaseId" />

            <!-- Set the visitor's name for the agent in the Console to first and last name provided by the customer -->
            <script type="text/javascript">
               function setName() {
                document.getElementById("prechat_field_name").value =  
                    document.getElementById("firstName").value + " " + document.getElementById("lastName").value;
                }
            </script>
        </form>
    </div>
</body>

there are 4 parameter that i send to prechat form: liveagent.addCustomDetail("First Name", firstName); liveagent.addCustomDetail("Last Name", lastName); liveagent.addCustomDetail("Email", "[email protected]"); liveagent.addCustomDetail("Phone", "99999"); i test with harddoed value and it still not passed to prechat form — Kiunx, Aug 2, 2017 at 5:17
the code work fine in sandbox. what i change in production is only, deployment id, and chat button id — Kiunx, Aug 2, 2017 at 8:58
Compare the Chat URL also d.la1-c2-ukb.salesforceliveagent.com/chat also for both Sandbox and production. — Saroj Bera, Aug 2, 2017 at 12:32

Kiunx · Accepted Answer · 2017-08-09 16:30:34Z

1

found the answer. /deployment.js replaced with /prechat.js and its working.

thanks

answered Aug 9, 2017 at 16:30

Kiunx

1951 gold badge5 silver badges13 bronze badges

Add a comment |

Wilson · Accepted Answer · 2017-08-05 05:02:01Z

In the pre chat form code of deployment, button etc in the above code we need to make it dynamic and specific to every environment.

The best way to implement this would be to make use of a page controller. We can store the live agent settings url, deployment id, org id etc in custom setting or custom metadata(to be changed after every migration accordingly). Retrieve these values through the constructor and assign ALL the values which are dynamic in nature.

Also a mapping object to store the button labels would be better. Since we may end up with different ids sometime in sandbox and prod, we can create Mapping object with business code(terminology to identify button),Button developer name, button label. In the constructor of the page controller we can query all the button ids using the business code and querying by developer name.

Eg :: *)LiveAgent_Settings__c is a custom setting

liveagent.init('https://d.la1-c2-ukb.salesforceliveagent.com/chat', '57228000000L4GF', '00D28000000eUxw');

to be replaced by

liveagent.init('{!$Setup.LiveAgent_Settings__c.LiveAgent_URL__c}/chat', '{!$Setup.LiveAgent_Settings__c.LiveAgent_Deployment_Id__c}', '{!left($Organization.id,15)}');

*)ButtonId1 is page parameter calculated in constructor

id="liveagent_button_online_573280000004HkS" to be replaced by id="liveagent_offline_{!ButtonId1}"

yes its dynamic because we re create the configuration in the production. the id of deployment, button is different and we already make the changes. — Kiunx, Aug 7, 2017 at 3:26
So all the dynamic parameters have been changed for the sandbox-production migration. And the chat is also getting invoked in Production but just the prechat details are not populating. Have you tried decreasing the api version(39.0, 40.0 etc) of the page. Sometimes Production gets updated later than sandboxes and requires lowering the version to an acceptable one for all features to work. — Wilson, Aug 8, 2017 at 13:24

Stack Exchange Network

Send parameter from chat button page to prechat form

2 Answers 2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged
liveagent
pre-chat
.

Hot Network Questions

Send parameter from chat button page to prechat form

2 Answers 2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged liveagentpre-chat.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
liveagent
pre-chat
.