[SalesForce] LiveAgent – preChat: “The chat window may only be launched from a button — you cannot access it directly.”

I have a problem and apparently it has no solution on internet.

I'm trying to implement the pre-chat on the LiveAgent following the guide, but adapting that to my own problem.

This is my button:

<style type="text/css"> a.cta:hover { background:#50e49b !important; } </style>

<div id="liveagent_invite_button_57324000000TOxS" style='margin:0px; padding: 0px; width:400px; border-radius:8px; display: block;' >
    <!-- --------------------------------------------------------------------------------------------------- -->
    <!-- ---------------------- struttura del tasto di uscita X -------------------------------------------- -->
    <div id='header-chat' style='height:55px; background:#06d971;position:relative;'>
        <img src='http://sky.it/statics/images/offerta-sky/chat/proactive/Nov14/my-chat.png' 
                alt='Sky Chat' style='position:absolute;top: -5px;left: 10px;' />
        <a href='#'  
            onClick="liveagent.rejectChat('57324000000TOxS')" target='_self'>
            <img    src='https://www.sky.it/statics/images/offerta-sky/chat/proactive/may2014/header_close.png' 
                    style='position:absolute;top:16px;right:20px;border:0;' 
                    alt='Sky Chat' />
        </a>
    </div>
    <!-- --------------------------------------------------------------------------------------------------- -->
    <!-- ---------------------- struttura del tasto ENTRA IN SKY CHAT -------------------------------------- -->
    <div id='chat-act' style='border: 3px solid #06d971;padding:20px;background: #FFF;color:#666666;font-family:SkyTextRegular;'>
        <p style='font-size:30px; margin:0;'>Dear customer</p>
        <p style='font-size:21px; margin:0;'>Please chat with us!</p>
        <a id="liveagent_button_online_57324000000TOxS" 
            href='#' class="cta" 
            onClick="liveagent.startChat('57324000000TOxS')" 
            target='_self' 
            style='clear:both; background:#06d971; text-align: center; padding: 10px 20px; font-size: 30px; color:#FFF; text-decoration: none; margin:0 25px; margin-top:20px; display:block; '>
            Entra in Sky Chat
        </a>

    </div>
    <!-- --------------------------------------------------------------------------------------------------- -->
</div>


<!-- DEPLOYMENT -->
<script type='text/javascript' src='https://c.la1-c1-lon.salesforceliveagent.com/content/g/js/34.0/deployment.js'></script>
<script type='text/javascript'>
    liveagent.addCustomDetail("Key", "1234");
    liveagent.findOrCreate("Info__c").map("Key_Session__c", "Key", false, false,true);
    liveagent.findOrCreate("Info__c").showOnCreate();
    liveagent.findOrCreate("Info__c").saveToTranscript("Info__c","Info__c");
    liveagent.init('https://d.la1-c1-lon.salesforceliveagent.com/chat', 
                    '57224000000TOQW', 
                    '00D24000000eIVc');
</script>
<!-- FINE DEPLOYMENT -->



<script type='text/javascript'>
function buttonCallback(e) {
  if (e == liveagent.BUTTON_EVENT.BUTTON_AVAILABLE) {
    document.getElementById('liveagent_invite_button_57324000000TOxS').style.display 
      = '';
    document.getElementById('liveagent_invite_button_57324000000TOxS').style.left = 
      '300px';
    document.getElementById('liveagent_invite_button_57324000000TOxS').style.top = 
      '200px';
  }
  if (e == liveagent.BUTTON_EVENT.BUTTON_UNAVAILABLE) {
    document.getElementById('liveagent_invite_button_57324000000TOxS').style.display =
      'none';
  }
  if (e == liveagent.BUTTON_EVENT.BUTTON_ACCEPTED) {
    document.getElementById('liveagent_invite_button_57324000000TOxS').style.display =
      'none';
  }
  if (e == liveagent.BUTTON_EVENT.BUTTON_REJECTED) {
    document.getElementById('liveagent_invite_button_57324000000TOxS').style.display =
      'none';
  }
}
liveagent.addButtonEventHandler('57324000000TOxS', buttonCallback);
<!-- liveagent.init('https://d.la1-c1-lon.salesforceliveagent.com/chat', '57224000000TOQW', '00D24000000eIVc'); -->
</script>

This is my PreChat page:

<apex:page showHeader="false"> 
<!-- This script takes the endpoint URL parameter passed from the deployment 
  page and makes it the action for the form -->
<script type="text/javascript">
     (function() { 
     function handlePageLoad() {
       var endpointMatcher = new RegExp("[\\?\\&]endpoint=([^&#]*)");
       document.getElementById('prechatForm').setAttribute('action',
       decodeURIComponent(endpointMatcher.exec(document.location.search)[1]));
     } if (window.addEventListener) {
              window.addEventListener('load', handlePageLoad, false);
   } else { window.attachEvent('onload', handlePageLoad, false);
              }})(); 
</script>
<h1>Pre-chat Form</h1> 
<form method='post' id='prechatForm'> 
      First name: <input type='text' name='liveagent.prechat:FirstNameDetail'
        id='customField1' /><br />
      Last name: <input type='text' name='liveagent.prechat:LastNameDetail'
        id='customField2' /><br />
      Department: <select name="liveagent.prechat.buttons"> 
          <!-- Values are LiveChatButton IDs. -->
          <option value="57324000000TOxS">Customer Service</option> 
          <option value="57324000000TOxS">Technical Support</option> 
          <!-- <option value="573a00000000001,573a00000000002">Customer Service if online, 
          otherwise Technical Support</option> -->
      </select><br /> 

      <!-- Map liveagent.prechat:FirstNameDetail and liveagent.prechat:LastNameDetail
        custom detail to Contact's field FirstName and LastName -->
      <input type="hidden" name="liveagent.prechat.findorcreate.map:Contact"
        value="FirstName,FirstNameDetail;LastName,LastNameDetail" />

      <!-- Specify to query for a matching Contact records FirstName field based on
        the value of FirstName -->
      <input type="hidden" name="liveagent.prechat.findorcreate.map.doFind:Contact"
        value="FirstName,true" />

      <!-- Return results only if there is an exact match of FirstName -->
      <input type="hidden" name="liveagent.prechat.findorcreate.map.isExactMatch:Contact"
        value="FirstName,true" />

      <!-- If no match in search, create a new Contact record with the mapped value
        of firstname and last name -->
      <input type="hidden" name="liveagent.prechat.findorcreate.map.doCreate:Contact"
        value="FirstName,true;LastName,true" />

      <!-- If a new Contact record has been created, open it as a subtab -->
      <input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Contact"
        value="true" />

      <!-- Save the Contact id to transcript's field ContactId -->
      <input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Contact"
        value="ContactId" />

      <input type='submit' value='Request Chat' id='prechat_submit'/> 
<style type="text/css"> 
p {font-weight: bolder } 
</style> 
</form> 
</apex:page>

When I click on the button it goes correctly on the Pre-Form Page, but when I fill it and I go on I get the following error: