实时聊天 Jquery 插件 tawk.to 不可见
Live-chat Jquery plugin tawk.to not visible
我正在为我工作的公司准备一个网站，没什么特别的，但仍然很重要。
问题是，今天我被要求在网站上安装实时聊天以寻求帮助，但到目前为止，我还无法使任何类型的插件正常工作。
所以，这是我的页面：
html,
body {
height: 100%;
margin: 0px;
}
.img-portfolio {
margin-bottom: 30px;
}
.img-hover:hover {
opacity: 0.8;
}
header.carousel {
height: 50%;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}
header.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: 100% 100%;
}
#styleone {
background-image: url(../images/SIAN-Powerplant.png);
background-size: 100% 100%;
}
#styletwo {
background: url(../images/slide2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#stylethree {
background-image: url(../images/slide3.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#stylefour {
background-image: url(../images/slide4.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.error-404 {
font-size: 100px;
}
.price {
display: block;
font-size: 50px;
line-height: 50px;
}
.price sup {
top: -20px;
left: 2px;
font-size: 20px;
}
.period {
display: block;
font-style: italic;
}
footer {
margin: 50px 0;
}
@media(max-width:991px) {
.customer-img, .img-related {
margin-bottom: 30px;
}
}
@media(max-width:767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel {
height: 70%;
}
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.button {
transition: all 1.000s ease;
-webkit-transition: all 1.000s ease;
-moz-transition: all 1.000s ease;
-o-transition: all 1.000s ease;
-ms-transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.button:hover {
-webkit-transform: scale(1.100);
-moz-transform: scale(1.100);
-o-transform: scale(1.100);
-ms-transform: scale(1.100);
transform: scale(1.100)
}
.circular {
border-radius: 15% 15% 15% 15%;
}
.square {
padding: 15%;
}
.line-color-elettronica {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0OCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(left, rgba(240, 84, 66, 1) 48%, rgba(125, 185, 232, 0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(48%, rgba(240, 84, 66, 1)), color-stop(100%, rgba(125, 185, 232, 0)));
background: -webkit-linear-gradient(left, rgba(240, 84, 66, 1) 48%, rgba(125, 185, 232, 0) 100%);
background: -o-linear-gradient(left, rgba(240, 84, 66, 1) 48%, rgba(125, 185, 232, 0) 100%);
background: -ms-linear-gradient(left, rgba(240, 84, 66, 1) 48%, rgba(125, 185, 232, 0) 100%);
background: linear-gradient(to right, rgba(240, 84, 66, 1) 48%, rgba(125, 185, 232, 0) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#007db9e8', GradientType=1);
}
.line-color2 {
background: -moz-linear-gradient(left, rgba(255, 159, 50, 1) 20%, rgba(125, 185, 232, 0) 56%);
background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgba(255, 159, 50, 1)), color-stop(56%, rgba(125, 185, 232, 0)));
background: -webkit-linear-gradient(left, rgba(255, 159, 50, 1) 20%, rgba(125, 185, 232, 0) 56%);
background: -o-linear-gradient(left, rgba(255, 159, 50, 1) 20%, rgba(125, 185, 232, 0) 56%);
background: -ms-linear-gradient(left, rgba(255, 159, 50, 1) 20%, rgba(125, 185, 232, 0) 56%);
background: linear-gradient(to right, rgba(255, 159, 50, 1) 20%, rgba(125, 185, 232, 0) 56%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff9f32', endColorstr='#007db9e8', GradientType=1);
}
.line-color-idraulica {
background: rgba(33, 180, 226, 1);
/* Old Browsers */
background: -moz-linear-gradient(left, rgba(17, 121, 147, 1) 0%, rgba(183, 222, 237, 0.0) 100%);
/* FF3.6+ */
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(17, 121, 147, 1)), color-stop(100%, rgba(183, 222, 237, 0)));
/* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, rgba(17, 121, 147, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(17, 121, 147, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(17, 121, 147, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* IE 10+ */
background: linear-gradient(to right, rgba(17, 121, 147, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#21b4e2', endColorstr='#b7deed', GradientType=1);
/* IE6-9 */
}
.line-color-ER {
background: rgba(67, 130, 64, 1);
/* Old Browsers */
background: -moz-linear-gradient(left, rgba(67, 130, 64, 1) 0%, rgba(183, 222, 237, 0.0) 100%);
/* FF3.6+ */
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(67, 130, 64, 1)), color-stop(100%, rgba(183, 222, 237, 0)));
/* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, rgba(67, 130, 64, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(67, 130, 64, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(67, 130, 64, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* IE 10+ */
background: linear-gradient(to right, rgba(67, 130, 64, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#21b4e2', endColorstr='#b7deed', GradientType=1);
/* IE6-9 */
}
.line-color-certificazioni {
background: rgba(253, 218, 36, 1);
/* Old Browsers */
background: -moz-linear-gradient(left, rgba(253, 218, 36, 1) 0%, rgba(183, 222, 237, 0.0) 100%);
/* FF3.6+ */
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(253, 218, 36, 1)), color-stop(100%, rgba(183, 222, 237, 0)));
/* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, rgba(253, 218, 36, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(253, 218, 36, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(253, 218, 36, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* IE 10+ */
background: linear-gradient(to right, rgba(253, 218, 36, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#21b4e2', endColorstr='#b7deed', GradientType=1);
/* IE6-9 */
}
.panelmodificato {
border-radius: 0% 0% 15% 15%;
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
}
.shadow {
-webkit-box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.6);
-moz-box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.6);
box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.6);
}
.service-nav img {
width: 90%;
height: 90%;
}
.navbar {
margin-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Sian Tecnology S.R.L. - Azienda installazione e distribuzione sistemi di sicurezza , apparecchiature fotovoltaice , fototermiche , e idrauliche">
<meta name="author" content="Sian Tecnology S.R.L.">
<title>Sian Technology S.R.L.</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigazione -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand e toggle raggruppati per migliore visibilita mobile -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-left" href="index.html">
<img alt="Sian Tecnology SRL" src="images/logo-navbar.png" class="brand navbar-brand">
</a>
</div>
<!-- Collezzione nav-links e altro materiale -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="about.html">Su di noi</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Servizi<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Impianti elettrici<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="Elettrico.html">Civili</a>
</li>
<li>
<a href="Elettrico-ind.html">Industriali</a>
</li>
<li>
<a href="domotica.html">Domotica</a>
</li>
<li>
<a href="sicurezza.html">Sicurezza</a>
</li>
<li>
<a href="fotovoltaico.html">Fotovoltaico</a>
</li>
<li>
<a href="illuminazione.html">Illuminazione</a>
</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Impianti Idraulici<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Civili</a>
</li>
<li><a href="#">Industriali</a>
</li>
<li><a href="#">Condizionamento</a>
</li>
<li><a href="#">Pompe di calore</a>
</li>
<li><a href="#">Solare termico</a>
</li>
<li><a href="#">Termo Dinamico</a>
</li>
</ul>
</li>
<li>
<a href="#">Certificazioni</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">Contatti</a>
</li>
<!--TODO: inserire foto & company
<li>
<a href="portfolio-3-col.html" class="disabled">Portfolio</a>
</li>
-->
<li>
<a href="#">Blog</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Informazioni<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="faq.html">FAQ</a>
</li>
<li>
<a href="pricing.html">Prodotti</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
<!-- indicatori -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper foto slide -->
<div class="carousel-inner">
<div class="item active">
<div class="fill" id="stylethree"></div>
<!-- <div class="carousel-caption">
<h2>Prima Slide</h2>
</div> -->
</div>
<div class="item">
<div class="fill" id="styleone"></div>
<!-- <div class="carousel-caption">
<h2>Seconda Slide</h2>
</div> -->
</div>
<div class="item">
<div class="fill" id="styletwo"></div>
<!-- <div class="carousel-caption">
<h2>Terza slide</h2>
</div> -->
</div>
<div class="item">
<div class="fill" id="stylefour"></div>
<!-- <div class="carousel-caption">
<h2>Quarta slide</h2>
</div> -->
</div>
</div>
<!-- Controlli -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
<div class="col-md-12 text-center panel panel-default">
<div class="col-md-3">
Tecnologia
</div>
<div class="col-md-3">
Esperienza
</div>
<div class="col-md-3">
Affidabilita
</div>
<div class="col-md-3">
Innovazione
</div>
</div>
</header>
<!-- Contenuto pagina -->
<div class="container">
<!-- Marketing -->
<div class="row">
<hr>
<div class="col-md-5 col-md-offset-7 fullpage">
<div class="col-md-12 text-center">
<div class="well">
<h1>Hello</h1>
<div class="panel panel-default">
<hr>
<br>
<br>
<br>
<br>
<br>aaaaaaaaaaaaa
<br>
<br>
<br>
<br>
<br>
<hr>
</div>
</div>
</div>
<div class="col-md-12 text-center">
<ul class="list-unstyled list-inline list-social-icons">
<li>
<a href="#"><i class="fa fa-facebook-square fa-5x fade-icon"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-pinterest-square fa-5x fade-pinterest"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter-square fa-5x fade-icon"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-google-plus-square fa-5x fade-google"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!--Noleggio-->
<div class="row">
<div class="col-md-12">
<img src="images/HQmusica.jpg" width="100%" height="100%;" alt="Sian SRL - Noleggio impianti audio per feste e eventi" style="border: 1px solid black">
</div>
</div>
<!-- Portfolio Section -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Brands</h2>
</div>
<div class="col-md-4 col-sm-6 pagination-centered text-center">
<a href="http://www.abb.com/">
<img class="img-responsive img-portfolio img-hover" src="images/Logo-ABB.jpg" alt="Partner Sian Tecnology - ABB Europe">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="https://www.q-cells.com/">
<img class="img-responsive img-portfolio img-hover" src="images/Logo-Qcells.jpg" alt="Partner Sian Tecnology - Q-Cell's International">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="http://benq.eu/">
<img class="img-responsive img-portfolio img-hover" src="images/Logo-benq.png" alt="Brand utilizzato da Sian Tecnology - Benq">
</a>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">
<a href="http://www.lg.com/it">
<img class="img-responsive img-portfolio img-hover" src="images/logo-LG.png" alt="Brand utilizzato da Sian Tecnology - LG International">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="http://www.wuerth.com">
<img class="img-responsive img-portfolio img-hover" src="images/logo-wurth.png" alt="Brand utilizzato da Sian Tecnology - Wurth">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="http://www.solaredge.com/">
<img class="img-responsive img-portfolio img-hover" src="images/logo-solar.png" alt="Brand utilizzato da Sian Tecnology - SolarEdge">
</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Call to Action -->
<div class="well">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p>
</div>
<div class="col-md-4">
<a class="btn btn-lg btn-default btn-block" href="#">Cerchiamo te !</a>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Sian Tecnology SRL - 2014-2016</p>
</div>
</div>
</footer>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script>
$(document).ready(
function() {
$("html").niceScroll();
}
);
</script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</div>
<!--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/56d59cac343e11f1034e44dc/default';
s1.charset = 'UTF-8';
s1.setAttribute('crossorigin', '*');
s0.parentNode.insertBefore(s1, s0);
})();
</script>
<script>
if (window.jQuery) {
// jQuery is loaded
} else {
// jQuery is not loaded
}
</script>
<!--End of Tawk.to Script-->
</body>
</html>
主要问题是：
<!--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/56d59cac343e11f1034e44dc/default';
s1.charset = 'UTF-8';
s1.setAttribute('crossorigin', '*');
s0.parentNode.insertBefore(s1, s0);
})(); < /script>
<!--End of Tawk.to Script-->
它什么都不做，我不知道我应该做什么才能使这个 "livechat" 工作...有什么建议吗？
P.S。
请注意，我使用的是 bootstrap 最新版本，而且没有 img 的网站看起来一团糟。
< script type = "text/javascript" > 和 < /script> 是无效的 HTML 标签。
这些甚至阻止了您的脚本 运行.
这个 fiddle 对我来说完美无缺。
此外，似乎 tawk 服务目前不可用，因为它恰好在几分钟前开始工作 - 之前它没有......
伙计们，找到了解决方案....
s0.parentNode.insertBefore(s1,s0);
})();
在该功能后，您需要添加以下代码。
setTimeout(function () {
makemebtn()
}, 5000)
function makemebtn() {
const tawkbtn = $('iframe').eq(1).contents().find('.tawk-button')
tawkbtn.css('background-color', '#6514a7')
}
一旦您的 TawkTo 功能完成，您需要在同一脚本中添加以下代码。你可以这样做。希望有用
setTimeout(function(){
makemebtn();
}, 7000);
};
// 添加以下功能，该功能将搜索带有标题 聊天小部件 的 iframe。所以你会得到特定的 tawkTo iframe..
function makemebtn() {
var chatwidget=$("iframe[title='chat widget']");
var tawkbtn=chatwidget.contents().find('.tawk-button');
tawkbtn.css('background-color','#6514a7');
}
尝试在 <head> 部分添加以下 <meta> 标签。
<meta name="referrer" content="no-referrer-when-downgrade">
我正在为我工作的公司准备一个网站，没什么特别的，但仍然很重要。
问题是，今天我被要求在网站上安装实时聊天以寻求帮助，但到目前为止，我还无法使任何类型的插件正常工作。
所以，这是我的页面：
html,
body {
height: 100%;
margin: 0px;
}
.img-portfolio {
margin-bottom: 30px;
}
.img-hover:hover {
opacity: 0.8;
}
header.carousel {
height: 50%;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}
header.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: 100% 100%;
}
#styleone {
background-image: url(../images/SIAN-Powerplant.png);
background-size: 100% 100%;
}
#styletwo {
background: url(../images/slide2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#stylethree {
background-image: url(../images/slide3.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#stylefour {
background-image: url(../images/slide4.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.error-404 {
font-size: 100px;
}
.price {
display: block;
font-size: 50px;
line-height: 50px;
}
.price sup {
top: -20px;
left: 2px;
font-size: 20px;
}
.period {
display: block;
font-style: italic;
}
footer {
margin: 50px 0;
}
@media(max-width:991px) {
.customer-img, .img-related {
margin-bottom: 30px;
}
}
@media(max-width:767px) {
.img-portfolio {
margin-bottom: 15px;
}
header.carousel .carousel {
height: 70%;
}
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.button {
transition: all 1.000s ease;
-webkit-transition: all 1.000s ease;
-moz-transition: all 1.000s ease;
-o-transition: all 1.000s ease;
-ms-transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.button:hover {
-webkit-transform: scale(1.100);
-moz-transform: scale(1.100);
-o-transform: scale(1.100);
-ms-transform: scale(1.100);
transform: scale(1.100)
}
.circular {
border-radius: 15% 15% 15% 15%;
}
.square {
padding: 15%;
}
.line-color-elettronica {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0OCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(left, rgba(240, 84, 66, 1) 48%, rgba(125, 185, 232, 0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(48%, rgba(240, 84, 66, 1)), color-stop(100%, rgba(125, 185, 232, 0)));
background: -webkit-linear-gradient(left, rgba(240, 84, 66, 1) 48%, rgba(125, 185, 232, 0) 100%);
background: -o-linear-gradient(left, rgba(240, 84, 66, 1) 48%, rgba(125, 185, 232, 0) 100%);
background: -ms-linear-gradient(left, rgba(240, 84, 66, 1) 48%, rgba(125, 185, 232, 0) 100%);
background: linear-gradient(to right, rgba(240, 84, 66, 1) 48%, rgba(125, 185, 232, 0) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#007db9e8', GradientType=1);
}
.line-color2 {
background: -moz-linear-gradient(left, rgba(255, 159, 50, 1) 20%, rgba(125, 185, 232, 0) 56%);
background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgba(255, 159, 50, 1)), color-stop(56%, rgba(125, 185, 232, 0)));
background: -webkit-linear-gradient(left, rgba(255, 159, 50, 1) 20%, rgba(125, 185, 232, 0) 56%);
background: -o-linear-gradient(left, rgba(255, 159, 50, 1) 20%, rgba(125, 185, 232, 0) 56%);
background: -ms-linear-gradient(left, rgba(255, 159, 50, 1) 20%, rgba(125, 185, 232, 0) 56%);
background: linear-gradient(to right, rgba(255, 159, 50, 1) 20%, rgba(125, 185, 232, 0) 56%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff9f32', endColorstr='#007db9e8', GradientType=1);
}
.line-color-idraulica {
background: rgba(33, 180, 226, 1);
/* Old Browsers */
background: -moz-linear-gradient(left, rgba(17, 121, 147, 1) 0%, rgba(183, 222, 237, 0.0) 100%);
/* FF3.6+ */
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(17, 121, 147, 1)), color-stop(100%, rgba(183, 222, 237, 0)));
/* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, rgba(17, 121, 147, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(17, 121, 147, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(17, 121, 147, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* IE 10+ */
background: linear-gradient(to right, rgba(17, 121, 147, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#21b4e2', endColorstr='#b7deed', GradientType=1);
/* IE6-9 */
}
.line-color-ER {
background: rgba(67, 130, 64, 1);
/* Old Browsers */
background: -moz-linear-gradient(left, rgba(67, 130, 64, 1) 0%, rgba(183, 222, 237, 0.0) 100%);
/* FF3.6+ */
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(67, 130, 64, 1)), color-stop(100%, rgba(183, 222, 237, 0)));
/* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, rgba(67, 130, 64, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(67, 130, 64, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(67, 130, 64, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* IE 10+ */
background: linear-gradient(to right, rgba(67, 130, 64, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#21b4e2', endColorstr='#b7deed', GradientType=1);
/* IE6-9 */
}
.line-color-certificazioni {
background: rgba(253, 218, 36, 1);
/* Old Browsers */
background: -moz-linear-gradient(left, rgba(253, 218, 36, 1) 0%, rgba(183, 222, 237, 0.0) 100%);
/* FF3.6+ */
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(253, 218, 36, 1)), color-stop(100%, rgba(183, 222, 237, 0)));
/* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, rgba(253, 218, 36, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(253, 218, 36, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(253, 218, 36, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* IE 10+ */
background: linear-gradient(to right, rgba(253, 218, 36, 1) 0%, rgba(183, 222, 237, 0) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#21b4e2', endColorstr='#b7deed', GradientType=1);
/* IE6-9 */
}
.panelmodificato {
border-radius: 0% 0% 15% 15%;
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
}
.shadow {
-webkit-box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.6);
-moz-box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.6);
box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.6);
}
.service-nav img {
width: 90%;
height: 90%;
}
.navbar {
margin-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Sian Tecnology S.R.L. - Azienda installazione e distribuzione sistemi di sicurezza , apparecchiature fotovoltaice , fototermiche , e idrauliche">
<meta name="author" content="Sian Tecnology S.R.L.">
<title>Sian Technology S.R.L.</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigazione -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand e toggle raggruppati per migliore visibilita mobile -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-left" href="index.html">
<img alt="Sian Tecnology SRL" src="images/logo-navbar.png" class="brand navbar-brand">
</a>
</div>
<!-- Collezzione nav-links e altro materiale -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="about.html">Su di noi</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Servizi<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Impianti elettrici<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="Elettrico.html">Civili</a>
</li>
<li>
<a href="Elettrico-ind.html">Industriali</a>
</li>
<li>
<a href="domotica.html">Domotica</a>
</li>
<li>
<a href="sicurezza.html">Sicurezza</a>
</li>
<li>
<a href="fotovoltaico.html">Fotovoltaico</a>
</li>
<li>
<a href="illuminazione.html">Illuminazione</a>
</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Impianti Idraulici<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Civili</a>
</li>
<li><a href="#">Industriali</a>
</li>
<li><a href="#">Condizionamento</a>
</li>
<li><a href="#">Pompe di calore</a>
</li>
<li><a href="#">Solare termico</a>
</li>
<li><a href="#">Termo Dinamico</a>
</li>
</ul>
</li>
<li>
<a href="#">Certificazioni</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">Contatti</a>
</li>
<!--TODO: inserire foto & company
<li>
<a href="portfolio-3-col.html" class="disabled">Portfolio</a>
</li>
-->
<li>
<a href="#">Blog</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Informazioni<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="faq.html">FAQ</a>
</li>
<li>
<a href="pricing.html">Prodotti</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
<!-- indicatori -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper foto slide -->
<div class="carousel-inner">
<div class="item active">
<div class="fill" id="stylethree"></div>
<!-- <div class="carousel-caption">
<h2>Prima Slide</h2>
</div> -->
</div>
<div class="item">
<div class="fill" id="styleone"></div>
<!-- <div class="carousel-caption">
<h2>Seconda Slide</h2>
</div> -->
</div>
<div class="item">
<div class="fill" id="styletwo"></div>
<!-- <div class="carousel-caption">
<h2>Terza slide</h2>
</div> -->
</div>
<div class="item">
<div class="fill" id="stylefour"></div>
<!-- <div class="carousel-caption">
<h2>Quarta slide</h2>
</div> -->
</div>
</div>
<!-- Controlli -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
<div class="col-md-12 text-center panel panel-default">
<div class="col-md-3">
Tecnologia
</div>
<div class="col-md-3">
Esperienza
</div>
<div class="col-md-3">
Affidabilita
</div>
<div class="col-md-3">
Innovazione
</div>
</div>
</header>
<!-- Contenuto pagina -->
<div class="container">
<!-- Marketing -->
<div class="row">
<hr>
<div class="col-md-5 col-md-offset-7 fullpage">
<div class="col-md-12 text-center">
<div class="well">
<h1>Hello</h1>
<div class="panel panel-default">
<hr>
<br>
<br>
<br>
<br>
<br>aaaaaaaaaaaaa
<br>
<br>
<br>
<br>
<br>
<hr>
</div>
</div>
</div>
<div class="col-md-12 text-center">
<ul class="list-unstyled list-inline list-social-icons">
<li>
<a href="#"><i class="fa fa-facebook-square fa-5x fade-icon"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-pinterest-square fa-5x fade-pinterest"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter-square fa-5x fade-icon"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-google-plus-square fa-5x fade-google"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!--Noleggio-->
<div class="row">
<div class="col-md-12">
<img src="images/HQmusica.jpg" width="100%" height="100%;" alt="Sian SRL - Noleggio impianti audio per feste e eventi" style="border: 1px solid black">
</div>
</div>
<!-- Portfolio Section -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Brands</h2>
</div>
<div class="col-md-4 col-sm-6 pagination-centered text-center">
<a href="http://www.abb.com/">
<img class="img-responsive img-portfolio img-hover" src="images/Logo-ABB.jpg" alt="Partner Sian Tecnology - ABB Europe">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="https://www.q-cells.com/">
<img class="img-responsive img-portfolio img-hover" src="images/Logo-Qcells.jpg" alt="Partner Sian Tecnology - Q-Cell's International">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="http://benq.eu/">
<img class="img-responsive img-portfolio img-hover" src="images/Logo-benq.png" alt="Brand utilizzato da Sian Tecnology - Benq">
</a>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">
<a href="http://www.lg.com/it">
<img class="img-responsive img-portfolio img-hover" src="images/logo-LG.png" alt="Brand utilizzato da Sian Tecnology - LG International">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="http://www.wuerth.com">
<img class="img-responsive img-portfolio img-hover" src="images/logo-wurth.png" alt="Brand utilizzato da Sian Tecnology - Wurth">
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="http://www.solaredge.com/">
<img class="img-responsive img-portfolio img-hover" src="images/logo-solar.png" alt="Brand utilizzato da Sian Tecnology - SolarEdge">
</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Call to Action -->
<div class="well">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p>
</div>
<div class="col-md-4">
<a class="btn btn-lg btn-default btn-block" href="#">Cerchiamo te !</a>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Sian Tecnology SRL - 2014-2016</p>
</div>
</div>
</footer>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script>
$(document).ready(
function() {
$("html").niceScroll();
}
);
</script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</div>
<!--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/56d59cac343e11f1034e44dc/default';
s1.charset = 'UTF-8';
s1.setAttribute('crossorigin', '*');
s0.parentNode.insertBefore(s1, s0);
})();
</script>
<script>
if (window.jQuery) {
// jQuery is loaded
} else {
// jQuery is not loaded
}
</script>
<!--End of Tawk.to Script-->
</body>
</html>
主要问题是：
<!--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/56d59cac343e11f1034e44dc/default';
s1.charset = 'UTF-8';
s1.setAttribute('crossorigin', '*');
s0.parentNode.insertBefore(s1, s0);
})(); < /script>
<!--End of Tawk.to Script-->
它什么都不做，我不知道我应该做什么才能使这个 "livechat" 工作...有什么建议吗？
P.S。 请注意，我使用的是 bootstrap 最新版本，而且没有 img 的网站看起来一团糟。
< script type = "text/javascript" > 和 < /script> 是无效的 HTML 标签。
这些甚至阻止了您的脚本 运行.
这个 fiddle 对我来说完美无缺。 此外，似乎 tawk 服务目前不可用，因为它恰好在几分钟前开始工作 - 之前它没有......
伙计们，找到了解决方案....
s0.parentNode.insertBefore(s1,s0);
})();
在该功能后，您需要添加以下代码。
setTimeout(function () {
makemebtn()
}, 5000)
function makemebtn() {
const tawkbtn = $('iframe').eq(1).contents().find('.tawk-button')
tawkbtn.css('background-color', '#6514a7')
}
一旦您的 TawkTo 功能完成，您需要在同一脚本中添加以下代码。你可以这样做。希望有用
setTimeout(function(){
makemebtn();
}, 7000);
};
// 添加以下功能，该功能将搜索带有标题 聊天小部件 的 iframe。所以你会得到特定的 tawkTo iframe..
function makemebtn() {
var chatwidget=$("iframe[title='chat widget']");
var tawkbtn=chatwidget.contents().find('.tawk-button');
tawkbtn.css('background-color','#6514a7');
}
尝试在 <head> 部分添加以下 <meta> 标签。
<meta name="referrer" content="no-referrer-when-downgrade">