Style The Tawk.To Chat Widget with My Custom CSS

Style the Tawk.to chat widget with my custom css

There is a way that you can override their default css with your custom css. Check the below code:

<!--Start of Tawk.to Script-->
<script type="text/javascript">
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/60f038e2d6e7610a49ab6e35/1fal5sduv';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

var def_tawk_bottom = "20px"; /*This is their default style that I want to change*/
var def_tawk_right = "16px"; /*This is their default style that I want to change*/
var customize_tawk = ""; /*Interval object*/

function customize_tawk_widget(){
var cur_bottom = jQuery("iframe[title='chat widget']").eq(0).css('bottom'); /*Get the default style*/
var cur_right = jQuery("iframe[title='chat widget']").eq(0).css('right'); /*Get the default style*/
if(cur_bottom == def_tawk_bottom && cur_right == def_tawk_right){
/*Check if the default style exists then remove it and add my custom style*/
jQuery("iframe[title='chat widget']").eq(0).css({ 'right': '', 'bottom': '' });
jQuery("iframe[title='chat widget']").eq(0).addClass("custom-chat-widget");
clearInterval(customize_tawk);
}
}

/*Customize the widget as soon as the widget is loaded*/
Tawk_API = Tawk_API || {};
Tawk_API.onLoad = function(){
/*Only for mobile version*/
if(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent) ) {
var customize_tawk = setInterval(customize_tawk_widget, 100);
}
};

/*Customize the widget as soon as the widget is minimized*/
Tawk_API = Tawk_API || {};
Tawk_API.onChatMinimized = function(){
/*Only for mobile version*/
if(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent) ) {
var customize_tawk = setInterval(customize_tawk_widget, 100);
}
};

Sample Image

Positioning the Chat bar (JavaScript)

I recommend you using CSS styling for that. You've got 2 options so far.

1. Use a fixed position

.chat {
position: fixed;
top: 90px;
left: 55px;
}

Keep in mind, that if you do so your bar will always stick to its position. This happens 'cause of your fixed position, which means the position is in relation to your window.

2. Use absolute position

With an absolute positioning you can achieve the exact same thing, except of positioning your element in relation to its parent container. So you may place container, in which you also place your chat bar, with an absolute position.

.chat {
position: absolute;
top: 90px;
left: 55px;
}

I would, in your case, recommend using absolute, since fixed will commonly be used for Headers and Footers. Anyways, you are free to explore yourself which one fits to your needs.

How to add the Tawk chat widget script to nextjs react app

I made a working project with a real Tawk.to account:
https://codesandbox.io/s/tawk-test-ovmsqy?file=/pages/_app.js

You should change the ids at s1.src line!

import Script from "next/script";

function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Script id="tawk" strategy="lazyOnload">
{`
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/62f4b8c537898912e962654a/1ga5v3hhr';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
`}
</Script>
</>
);
}

export default MyApp;

Something is blocking me from overwriting css

Apply the width to the parent iframe if you cannot edit the iframe's CSS itself.

#tawkchat-minified-iframe-element {
width: 320px !important;
}

OR Edit the HTML directly since the CSS is written inline:

<iframe id="tawkchat-minified-iframe-element" src="about:blank" frameborder="0" scrolling="no" class="" style="width: 320px;max-width: 100%;outline: none !important;visibility: visible !important;resize: none !important;box-shadow: none !important;overflow: visible !important;opacity: 1 !important;position: fixed !important;border: 0px !important;padding: 0px !important;transition-property: none !important;z-index: 1000001 !important;cursor: auto !important;float: none !important;height: 40px !important;min-height: 40px !important;max-height: 40px !important;min-width: 320px !important;transform: rotate(0deg) translateZ(0px) !important;transform-origin: 0px center 0px !important;margin: 0px !important;top: auto !important;bottom: 0px !important;left: 10px !important;right: auto !important;display: block !important;background: none transparent !important;"></iframe>

#tawkchat-minified-container is not relevant because it is inside an iframe, which does not inherit the general CSS/JS codes of your WordPress theme.

P.S There is a lot of unnecessary code here, try cleaning it up.



Related Topics



Leave a reply



Submit