javascript - 实时聊天 Jquery 插件 tawk.to 不可见

Question

我正在为我工作的公司准备一个网站，没什么特别的，但仍然很重要。

问题是，今天我被要求在网站上安装实时聊天以寻求帮助，到目前为止，我还没有能够使任何类型的插件工作。

所以，这是我的页面：

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 &copy; 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-->

它什么都不做，我不知道我应该做什么，才能使这个“实时聊天”工作......请有什么建议吗？

PS 请注意，我使用的是 bootstrap 最新版本，并且该网站看起来很乱，没有 img 的。

score 2 · Accepted Answer

< script type = "text/javascript" >并且< /script>不是有效的 HTML 标记。
这些甚至阻止了您的脚本运行。

这个小提琴对我来说完美无缺。此外，tawk 服务似乎目前不可用，因为它恰好在几分钟前开始工作 - 之前它没有......

score 0 · Accepted Answer

尝试在部分中添加以下<meta>标签。<head>

<meta name="referrer" content="no-referrer-when-downgrade">

score 0 · Accepted Answer

一旦您的 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');
}

score -1 · Accepted Answer

得到解决方案的人......

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')
}

javascript - 实时聊天 Jquery 插件 tawk.to 不可见

4 回答 4

Related

Reference