I have two widgetsId. One is for English and the other is for Spanish.
So when I switch language from English to Spanish I have to reload twice and then the Spanish widget loads. But when I switch from Spanish to English It takes only one reload to load the English widget in the browser.
here is the code.
const TawkComponent: React.FC<ITawkComponent> = ({ authUser, lang }) => {
const tawkMessengerRef = useRef<any>();
const hash = CryptoJS.HmacSHA256('hello XYZ', '1g****3ld');
const hashInBase64 = CryptoJS.enc.Base64.stringify(hash);
const onChatMaximized = useCallback(() => {
tawkMessengerRef.current.setAttributes(
{
userId: localStorage.getItem('userId'),
},
function (error: any) {
console.log(error);
}
);
tawkMessengerRef.current.setAttributes(
{
name: localStorage.getItem('userName'),
},
function (error: any) {
console.log(error);
}
);
tawkMessengerRef.current.setAttributes(
{
email: localStorage.getItem('userEmail'),
},
function (error: any) {
console.log(error);
}
);
tawkMessengerRef.current.setAttributes(
{
hash: hashInBase64,
},
function (error: any) {
console.log(error);
}
);
}, []);
useEffect(() => {
// Dynamically create and append the Tawk script
const script = document.createElement('script');
script.async = true;
script.charset = 'UTF-8';
script.setAttribute('crossorigin', '*');
const widgetId = lang === 'en' || lang === 'de' ? '1g*****ld' : '1g****ccu';
script.src = `https://embed.tawk.to/633605c554****12d8979f6c/${widgetId}`;
script.onload = () => {
window.Tawk_API = window.Tawk_API || {};
window.Tawk_API.onLoad = () => {
// Additional logic on Tawk load if needed
};
};
document.head.appendChild(script);
// Clean up the script tag when the component unmounts
return () => {
document.head.removeChild(script);
};
}, [lang]);
return (
<>
{authUser ? (
<TawkMessengerReact
propertyId='633605c554****12d8979f6c'
widgetId='1g****3ld'
ref={tawkMessengerRef}
onChatMaximized={onChatMaximized}
/>
) : (
<TawkMessengerReact
propertyId='633605c554****12d8979f6c'
widgetId='1g****3ld'
ref={tawkMessengerRef}
/>
)}
</>
);
};Why does it take two times to reload to the Spanish widget ? How can I fix this?
I have two widgetsId. One is for English and the other is for Spanish.
So when I switch language from English to Spanish I have to reload twice and then the Spanish widget loads. But when I switch from Spanish to English It takes only one reload to load the English widget in the browser.
here is the code.
Why does it take two times to reload to the Spanish widget ? How can I fix this?