Newer Version Available
Automated Chat Invitation Code Sample
Test and preview how automated chat invitations can work
on your website using this code sample.
The following code is for an automated chat invitation that uses the addButtonEventHandler() method to display a customized invitation on a website. This invitation allows customers to start a chat with an agent when an agent with the correct skills is available to chat.
1<apex:page>
2
3<!-- This section creates the div with the UI for chat invitation whose id is 573D01234567890 -->
4<!-- For this usage, the "Animation" type of this invitation should be set to "Custom",
5otherwise two invitations will appear (the Salesforce-provided one and this custom one). -->
6<div id="liveagent_invite_button_573D01234567890" style="display: none; position: fixed; border: 2px solid darkblue; border-radius: 5px; background-color: lightblue; height: 100px; width: 200px;">
7 <!-- Creates an "X" option to reject or close the invitation if it's offered -->
8 <div style="cursor: pointer; padding: 5px; right: 0px; position: absolute; color: darkred; font-weight: bold;" onclick="liveagent.rejectChat('573D01234567890')">X</div>
9<!-- Provides the Start Chat option for the customer to accept or start the chat for the invitation -->
10<div style="cursor: pointer; top: 42px; left: 65px; position: absolute;font-weight: bold; font-size: 16px;" onclick="liveagent.startChat('573D01234567890')">Start Chat</div>
11</div>
12
13<!-- Chat Deployment Code that makes chat available -->
14<script type='text/javascript' src='https://MyDomainName.my.salesforce-scrt.com/content/g/js/36.0/deployment.js'></script>
15
16<script type='text/javascript'>
17 // Creates the callback function used for the Chat invitation to present it or not based on availability and the customer's interaction with it
18 function buttonCallback(e) {
19
20 // When the chat invitation is online (i.e. at least one available, skilled agent), display it at position top 200px and left 300px if (e == liveagent.BUTTON_EVENT.BUTTON_AVAILABLE) {
21 document.getElementById('liveagent_invite_button_573D01234567890').style.display = '';
22 document.getElementById('liveagent_invite_button_573D01234567890').style.left = '300px';
23 document.getElementById('liveagent_invite_button_573D01234567890').style.top = '200px';
24 }
25
26 // When the chat invitation is offline, don't display it
27 if (e == liveagent.BUTTON_EVENT.BUTTON_UNAVAILABLE) {
28 document.getElementById('liveagent_invite_button_573D01234567890').style.display = 'none';
29 }
30
31 // When the chat invitation is accepted, stop displaying it if (e == liveagent.BUTTON_EVENT.BUTTON_ACCEPTED) {
32 document.getElementById('liveagent_invite_button_573D01234567890').style.display = 'none';
33 }
34
35 // When the chat invitation is rejected, stop displaying it if (e == liveagent.BUTTON_EVENT.BUTTON_REJECTED) {
36 document.getElementById('liveagent_invite_button_573D01234567890').style.display = 'none';
37 }
38 }
39
40 // Registers the function buttonCallback() above as the callback for the chat invitation whose id is 573D01234567890 liveagent.addButtonEventHandler('573D01234567890', buttonCallback);
41
42 // Let's say there is data available in JavaScript that you want to use in a custom sending rule.
43 var shoppingCartValue = 123.45;
44 // To pass this data so it can be used in Sending Rules in Salesforce setup, call setCustomVariable.
45 liveagent.setCustomVariable('shoppingCartValue', shoppingCartValue);
46
47 // Chat deployment code that initializes chat for the deployment whose id is 572D01234567890 and org is 00DD01234567890
48 liveagent.init('https://MyDomainName.my.salesforce-scrt.com/chat', '572D01234567890', '00DD01234567890');
49
50 // Enable Chat advanced logging to be available through the Browser's Developer Console
51 liveagent.enableLogging();
52</script>
53
54</apex:page>This code lets you pass data that’s available in JavaScript so it can be used in your
invitation’s sending rules in Setup. This is an example of how your settings might look: