この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

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>

上��のコードの結果は、次のようなチャットウィンドウになります。

Live Agent チャットウィンドウ