Live Agent Visualforce Components Code Sample

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page showHeader="false">
18<style>
19body { overflow: hidden; width: 100%; height: 100%; padding: 0; margin: 0 }
20#waitingMessage { height: 100%; width: 100%; vertical-align: middle; text-align: center; display: none; }
21#liveAgentClientChat.liveAgentStateWaiting #waitingMessage { display: table; }
22#liveAgentSaveButton, #liveAgentEndButton { z-index: 2; }
23.liveAgentChatInput {
24    height: 25px;
25    border-width: 1px;
26    border-style: solid;
27    border-color: #000;
28    padding: 2px 0 2px 4px;
29    background: #fff;
30    display: block;
31    width: 99%;
32}
33.liveAgentSendButton {
34    display: block;
35    width: 60px;
36    height: 31px;
37    padding: 0 0 3px;
38    position: absolute;
39    top: 0;
40    right: -67px;
41}
42#liveAgentChatLog {
43    width: auto;
44    height: auto;
45    top: 0px;
46    position: absolute;
47    overflow-y: auto;
48    left: 0;
49    right: 0;
50    bottom: 0;
51}
52</style>
53<div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute;">
54<liveAgent:clientchat >
55    <liveAgent:clientChatSaveButton label="Save Chat" />
56    <liveAgent:clientChatEndButton label="End Chat" />
57    <div style="top: 25px; left: 5px; right: 5px; bottom: 5px; position: absolute; z-index: 0;">
58    <liveAgent:clientChatAlertMessage />
59    <liveAgent:clientChatStatusMessage />
60    <table id="waitingMessage" cellpadding="0" cellspacing="0">
61    <tr>
62    <td>Please wait while you are connected to an available agent.</td>
63    </tr>
64    </table>
65    <div style="top: 0; right: 0; bottom: 41px; left: 0; padding: 0; position: absolute; word-wrap: break-word; z-index: 0;">
66    <liveAgent:clientChatLog />
67    </div>
68    <div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right: 67px;">
69        <liveagent:clientChatInput /><liveAgent:clientChatSendButton label="Send"/>
70    </div>
71    </div>
72</liveAgent:clientchat>
73</div>
74</apex:page>