Live Agent Visualforce コンポーネントのコードサンプル
このコードサンプルを使用して、Visualforce コンポーネントがチャットウィンドウのカスタマイズにどのように役立つかをテストおよびプレビューします。
次のコードサンプルでは、次のコンポーネントを使用するチャットウィンドウを示します。
- liveAgent:clientChat
- liveAgent:clientChatMessages
- liveAgent:clientChatEndButton
- liveAgent:clientChatLog
- liveAgent:clientChatInput
- liveAgent:clientChatEndButton
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>上��のコードの結果は、次のようなチャットウィンドウになります。