tawk widget javascript error

qouiou

My tawk chat widget was working fine with this javascript, but after few days now its not working at all.
How I can fix it ?

FabianDJ

Hello qouiou!

It looks like Tawk_API is not defined.
Could we get a screenshot with your JavaScript code?

qouiou

FabianDJ hey fabian....i already attached screenshot showing the actual javascript code, it used to work with the code u see in screenshot, but now it doesnt work.

FabianDJ

Hi qouiou,

I looked on your website and I found that your stylesheet hasn't been closed. You'll need to add </style> to close your stylesheet

Because of this problem your JavaScript can't run.

Let me know if this works! 🙂

qouiou

Can you point me where exactly I can add </style> in the screenshot ?

FabianDJ

Hi qouiou ,

This issue looks to take place somewhere else. Do you use CSS in any other file outside .css?

qouiou

no Custom css, used a premium theme "BOOTIN" and set it up with standard theme features.
It worked perfect few days back with Tawk_API.toggle(); but stopped working suddenly with no editing/css or any modifications.

Jasper

Hi qouiou , as you can see the .ibs_ stylesheet has not been closed. It looks like the IBS abbreviation stand for your own website name. So I guess that you or your developer has added the code but forgot to close it.

It has nothing to do with your style.css but to a codeblock that hasn't been closed. This eventually could happen due to cache, installed/updated plugins or via a custom header/footer plugin where you forgot to close the <style> tag yourself.

Do you have a custom header/footer plugin installed?

qouiou

1- IBS is my abbrevation, correct, but I don't see it in my style sheet?
2- Neither me or my developer added any custom code for anything, I just setup woocommerce with default theme settings.
3- My header comes with my theme, no custom css/plugin for header and footer.

Basically everything is just default setup, and function was working perfectly earlier.

Can u login my admin ?

Jasper

Hi qouiou , thank you for your reply.

3- My header comes with my theme, no custom css/plugin for header and footer.

I understand that, but the Tawk code doesn't appear automatically on your website. You (or the developer) should have added the Tawk code somewhere to your website. Do you remember where you've added this code in WordPress?

qouiou

As per advise by Mr. Castor, I added the code in buttonizer javascrpt, and it worked.
Pls check screenshot
For full discussion pls visit here

This is the only place where I entered the code, nowhere else in the website. As u can see, it resolved and worked perfectly, but now the javacript function seems to be dead.

Castor

Hi @qouiou ,

You have previously used the Tawk API successfully. Are you doing this using the wordpress plugin? Could you try reinstalling/reactivating that plugin? There seems to be something going wrong there.

If reinstalling/reactivating the Tawk Plugin does not work for you, unfortunately we can't help you solve the problem you are having because Buttonizer is working correctly. Buttonizer is just trying to run the Tawk_API.open() method, but it is non-existent because the tawk plugin seems to be broken (it's not closing a style tag like @FabianDJ was saying)

qouiou

hello again, I resetup my website again from scratch, added tawk, added javascript function also, but still the problem persists. There is some minor code I am missing here....

I added code Tawk_API.toggle(); in buttonizer "DROP A MESSAGE" in the Image attached.

Jasper

Hello qouiou ,

Thank you for your reply. This time the situation is different. Currently you did not added the Tawk code to your webpage.

Could you install the following Insert Headers and footers plugin to add the snippet on the right place: https://nl.wordpress.org/plugins/insert-headers-and-footers/

Then, after you have installed it, make sure to open Settings -> Header and footer and add the Tawk javascript code to the footer.

P.S. I'd like to inform you that visitors get a browser security warning when entering your website.

qouiou

1- add tawk javascript in settings>header and footer, image attached. But doesn't work, is there any error in the javascript code? They have many javascript codes on https://developer.tawk.to/jsapi/
2- Thanks for pointing out security warning, but I don't see it, can you send me screenshot of the warning?

Jasper

Hi qouiou , could you add your Tawk widget code instead only the API toggle function:

<script type="text/javascript">
var Tawk_API=Tawk_API||{};
var Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5e4a5f7f298c395d1ce84d53/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>

qouiou

Can u pls check and advise further.

Jasper

Hi qouiou ,

It seems we are having the same issue as a fe posts before: the <style> tag hasn't been closed at some HTML styling on your website, just like before. Could you check this?

If you go to the source of your website, then you'll find the issue. Do you use a caching plugin?

qouiou

Thanks Jasper,

1- Indeed there's an open style tag
2- I use cloudflare CDN, but no other cache plugin.
3- I can't seem to find a way to close this tag, nor I think I triggered it using any plugin.
4- Can you help me close this tag, if that's what is creating the issue?

Jasper

Hi qouiou ,

Thank you for getting back to me.

Can you check for me where the stylesheet that causes the issue comes from? It must be some kind of plugin or it might be a custom block that you've added somewhere (due to the classnames, ibs_full_screen_mobile and ibs_login_form).

Let me know the result!