I installed a free live chat from tawk.to. The problem (besides they not having a customer support for this script) is - it produces '400 Bad Request' error when it connects to the tawk.to servers. I added the below codes to .htaccess to allow different origins, but they don't work - the 400 error still appears. I don't know what else should be done.

I tried these in .htaccess without success:

SetEnvIf Origin "^(.*\.tawk\.to)$" ORIGIN_SUB_DOMAIN=$1
Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN

Access-Control-Allow-Origin: *.tawk.to

The response header (assuming I put this script on EXAMPLE):

Accepttext/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Encodinggzip, deflate, brAccept-Languageen-US,en;q=0.5Cache-Controlno-cacheConnectionkeep-alive, UpgradeCookie__tawkuuid=e::tawk.to::CZ4miEdTw+LJy27l6cezd/vgJ1Go/uVCmU/4mrr+WIe5uNur3LjRp6TAhWSTCS83::2; __cfduid=d8cf244362c2ead0f846b52cd84058bd31488522157DNT1

Host vs51.tawk.to

Origin 

Pragmano-cacheSec-WebSocket-Extensionspermessage-deflateSec-WebSocket-KeyBPkRsxjD+iWVmfb3LV8zpA==Sec-WebSocket-Version13UpgradewebsocketUser-AgentMozilla/5.0 (Windows NT 10.0; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0

The Error Response:

GET / [HTTP/1.1 400 Bad Request 162ms]

Here is an example Javascript from tawk.to (note it contains the 'crossorigin"* attribute but it still produces the error):

<!--Start of Tawkto (example)-->
<script>
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawkto-->

I installed a free live chat from tawk.to. The problem (besides they not having a customer support for this script) is - it produces '400 Bad Request' error when it connects to the tawk.to servers. I added the below codes to .htaccess to allow different origins, but they don't work - the 400 error still appears. I don't know what else should be done.

I tried these in .htaccess without success:

SetEnvIf Origin "^(.*\.tawk\.to)$" ORIGIN_SUB_DOMAIN=$1
Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN

Access-Control-Allow-Origin: *.tawk.to

The response header (assuming I put this script on EXAMPLE.):

Accepttext/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Encodinggzip, deflate, brAccept-Languageen-US,en;q=0.5Cache-Controlno-cacheConnectionkeep-alive, UpgradeCookie__tawkuuid=e::tawk.to::CZ4miEdTw+LJy27l6cezd/vgJ1Go/uVCmU/4mrr+WIe5uNur3LjRp6TAhWSTCS83::2; __cfduid=d8cf244362c2ead0f846b52cd84058bd31488522157DNT1

Host vs51.tawk.to

Origin https://EXAMPLE.

Pragmano-cacheSec-WebSocket-Extensionspermessage-deflateSec-WebSocket-KeyBPkRsxjD+iWVmfb3LV8zpA==Sec-WebSocket-Version13UpgradewebsocketUser-AgentMozilla/5.0 (Windows NT 10.0; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0

The Error Response:

GET https://vs51.tawk.to/s/ [HTTP/1.1 400 Bad Request 162ms]

Here is an example Javascript from tawk.to (note it contains the 'crossorigin"* attribute but it still produces the error):

<!--Start of Tawkto (example)-->
<script>
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/0111111111/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawkto-->

• javascript
• ajax
• .htaccess
• header
• tawk.to

5 Answers 5

Update - contacting [email protected] doesn't work (no response). But I did more research - I found a few sites that use tawk.to chat and the 400 Bad Request error appears on these sites too.. so it must be something inherent/buggy to tawk.to script which for now is not resolved and all their customers are affected.

It looks like you are blocking specific countries in your tawkto account widget. Please try disabling country blocking on your widget. It works for me.

Had the same issue, but I got it resolved. The things you need to account for are the following:

• You need to supply a userId with the call
• Hash should be lower case of the userId and the Api Key

Here's a work sample code: (Please note this is not runnable code, you will need to add your own variables for it to work, but i'm able to get my users to login now)

var isLoggedIn = false;
var Tawk_API = {
  onLoad: function() {
    if (!isLoggedIn) {
      isLoggedIn = true;
      window.Tawk_API.login({
        hash: '{{Put your Hash here}}',
        name: '{{ User Name}}',
        email: '{{ User Email }}',
        userId: '{{ User ID }}'
      }, function(error) {
        //do something if there's an error
      });
    }
  }
};
var Tawk_LoadStart = new Date();
(function() {
  var s1 = document.createElement("script"),
    s0 = document.getElementsByTagName("script")[0];
  s1.async = true;
  s1.src = '{{ Put your Chat Link here }}';
  s1.charset = 'UTF-8';
  s1.setAttribute('crossorigin', '*');
  s0.parentNode.insertBefore(s1, s0);
})();

Here is a simple solution to fix the 400 bad request for you domain. If domain restriction is enabled, just add a * at the end of you URL.

For eg: https://www.example./*

For me, the issue was caused by disabling Widget Status. Once I re-enabled it, the error was gone.