If you need to change tawk's locale dynamically (i.e. in SPA), here is the code I use. There is a small issue, though - everytime tawk adds new div to body and there is no way to correctly detect it and remove (ids are dynamic and there is no classname). However, as far as it is hidden, this should not be a problem.
Created
August 3, 2019 18:48
-
-
Save GendelfLugansk/d3e85bcfa13088ab6bd20058f3e73db8 to your computer and use it in GitHub Desktop.
Dynamically change tawk locale
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function _setupTawk(locale) { | |
/** | |
* Links for language-specific channels or projects, you can find them in original tawk embed code | |
*/ | |
const localeToLink = { | |
ru: 'https://embed.tawk.to/secret/secret', | |
en: 'https://embed.tawk.to/secret/secret', | |
}; | |
/** | |
* Hide widget if tawk is loaded | |
*/ | |
if ( | |
window.Tawk_API !== undefined && | |
typeof window.Tawk_API.hideWidget === 'function' | |
) { | |
window.Tawk_API.hideWidget(); | |
} | |
/** | |
* Delete script tags of tawk | |
*/ | |
const scripts = document.getElementsByTagName('script'); | |
for (let i = 0; i < scripts.length; i++) { | |
const tag = scripts[i]; | |
if (tag.getAttribute('tawk') === 'yes') { | |
tag.parentNode.removeChild(tag); | |
} | |
} | |
/** | |
* Delete anything related to tawk, otherwise new widget would not be loaded | |
*/ | |
for (const name in window) { | |
if ( | |
window.hasOwnProperty(name) && | |
(name.includes('tawk') || name.includes('Tawk')) | |
) { | |
delete window[name]; | |
} | |
} | |
/** | |
* Almost the same code as original | |
*/ | |
window.Tawk_API = {}; | |
window.Tawk_LoadStart = new Date(); | |
(function() { | |
const s1 = document.createElement('script'), | |
s0 = document.getElementsByTagName('script')[0]; | |
s1.async = true; | |
s1.src = localeToLink[locale]; //Here we use correct url for locale | |
s1.charset = 'UTF-8'; | |
s1.setAttribute('crossorigin', '*'); | |
s1.setAttribute('tawk', 'yes'); //This line is used to mark tawk script | |
s0.parentNode.insertBefore(s1, s0); | |
})(); | |
} |
@GendelfLugansk I've noticed that if you change the language and then maximize and minimize the chat you will see it in a different language for a moment, so, this piece of code could be useful to remove by his CSS class the divs added to body and solve the problem commented in README.md?
However, it could be dangerous because there could be classes created by us with widget-visible
names.
Array.from(document.getElementsByClassName('widget-visible')).forEach(
(widgetVisibleElement) => {
widgetVisibleElement.remove();
}
);
PD: I've also changed the function to minimize the widget because hidding it wasn't working propertly for me:
if (window.Tawk_API) {
window.Tawk_API.minimize();
}
It would be helpful to have the ability to adjust the size of the widget or customize it in other ways. This is particularly important on mobile devices, where the widget bubble can obscure crucial elements like buttons and links.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@MR-POSITIVE any further detais? Traces? Because my installation still works fine