Wrong code in Live Agent - Custom Chat Page?

Question

I came along with another issue on Live Agent this morning:

Now when I test the button, it loads the proper page but I came along a new message stating something like: "Chat window can be run only through the button - You do not have direct access to it." I got the code from the default chat window by doing a "code inspection" with Safari because I wanted to keep the translations in polish that Salesforce generated. I just copied it to the custom page I created and off course it doesn't work :(

This is the screenshot of the error:

Of course, I did not wanted that Salesforce layout and I guess it's not going to show up when the error will be fixed.

This is the code from the page:

https://drive.google.com/file/d/0BzDrP_xkkm29eUhsMEZiTkFoRXc/view?usp=sharing

This second code works but same layout issue:

https://drive.google.com/file/d/0BzDrP_xkkm29Z2d1NGNtOEFtYWM/view?usp=sharing

Thanks for your help!

Niko.

Answer 1

It seems like you are trying to call the chat window page directly, this is not allowed.

You need to create a custom chat window page as per the instructions in the Live Agent Developer guide, once you have created that page, go to:

Setup > Live Agent > Chat Buttons > Yourbutton (Edit) > Custom Chat Page (Select your new page here) > Save

Then launch the start as usual using the button code.

Sample Page:

<apex:page showHeader="false">
<style>
body { overflow: hidden; width: 100%; height: 100%; padding: 0; margin: 0 }
#waitingMessage { height: 100%; width: 100%; vertical-align: middle; text-align: center; display: none; }
#liveAgentClientChat.liveAgentStateWaiting #waitingMessage { display: table; }
#liveAgentSaveButton, #liveAgentEndButton { z-index: 2; }
.liveAgentChatInput {
    height: 25px;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    padding: 2px 0 2px 4px;
    background: #fff;
    display: block;
    width: 99%;
}
.liveAgentSendButton {
    display: block;
    width: 60px;
    height: 31px;
    padding: 0 0 3px;
    position: absolute;
    top: 0;
    right: -67px;
}
#liveAgentChatLog {
    width: auto;
    height: auto;
    top: 0px;
    position: absolute;
    overflow-y: auto;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
<div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute;">
<liveAgent:clientchat >
    <liveAgent:clientChatSaveButton label="Save Chat" />
    <liveAgent:clientChatEndButton label="End Chat" />
    <div style="top: 25px; left: 5px; right: 5px; bottom: 5px; position: absolute; z-index: 0;">
    <liveAgent:clientChatAlertMessage />
    <liveAgent:clientChatStatusMessage />
    <table id="waitingMessage" cellpadding="0" cellspacing="0">
    <tr>
    <td>Please wait while you are connected to an available agent.</td>
    </tr>
    </table>
    <div style="top: 0; right: 0; bottom: 41px; left: 0; padding: 0; position: absolute; word-wrap: break-word; z-index: 0;">
    <liveAgent:clientChatLog />
    </div>
    <div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right: 67px;">
        <liveagent:clientChatInput /><liveAgent:clientChatSendButton label="Send"/>
    </div>
    </div>
</liveAgent:clientchat>
</div>
</apex:page>