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);
}
};
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
Can't Load CSS File in Javafx 8
CSS: Is There Any Difference Between These Two Parts
Break Long Word in a Div When Word-Wrap:Break-Word; Fails
My Dropkick Plugin's Dropdown Looking Strange
Center Vertically The Content of a Div ( Not by Line-Height )
Make Radio Buttons Over Power Background Image
CSS: Position Loading Indicator in The Center of The Screen
How to Remove The Default Bootstrap 3 Carousel Control Background Gradients
Bootstrap Affix "Back to Top" Link
How to Create Text Border in React Native
Why Is The HTML Select Background-Color Black in Chrome When Set to Transparent
How to Scale Text Size Compared to Container
Asp.Net MVC Navbar-Brand to Header Text Color
Bootstrap Align Columns of Different Height
Firefox Parsing 4 Digit Hex Color Values as Rgba
How to Make The Elements Cover 100% of The Space Available in a Container Using Flexbox