javascript - Live-chat Jquery plugin tawk.to not visible

I'm preparing a website for the pany i work for , nothing special , but still is something.

Problem is , today i've been asked to install a live-chat for assistance in the website , and up to now , i havent been able to make any kind of plugin work.

So , here is my page :

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=".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 piled and minified CSS -->
  <link rel="stylesheet" href=".3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href=".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=".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=".7.0/html5shiv.js"></script>
        <script src=".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 & pany 
                    <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="/">
          <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="/">
          <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="/">
          <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="">
          <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="">
          <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="/">
          <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 modi.</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 = '';
      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>

I'm preparing a website for the pany i work for , nothing special , but still is something.

Problem is , today i've been asked to install a live-chat for assistance in the website , and up to now , i havent been able to make any kind of plugin work.

So , here is my page :

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./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 piled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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./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./libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn./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 & pany 
                    <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./">
          <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./">
          <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./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.">
          <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./">
          <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 modi.</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>

Main problem is :

<!--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-->

which just does nothing , and i dont know what i'm supposed to do , to make this "livechat" work... any suggestion please ?

P.S. Do note that i'm using bootstrap latest version , and that the site looks quite a mess whitout the img's.

Share Improve this question edited Jun 28, 2020 at 9:10 Guido Leenders 4,2622 gold badges24 silver badges43 bronze badges asked Mar 1, 2016 at 14:36 TTom-s 31 gold badge1 silver badge3 bronze badges

remove those extra spaces inside the script tags and see if it works afterwards. < /script> is not a valid HTML tag! – dasjanik Commented Mar 1, 2016 at 14:54
Use your DevTools to see the errors you get. – Wrong Commented Mar 1, 2016 at 14:55
@dasjanik Woops , my bad , thanks ! Corrected it , still , no good , even on a blank page i get only a ... blank page. And every other jquery code works flawlessy. – TTom-s Commented Mar 1, 2016 at 14:56
btw never include your Analytics ID in code snippets lol - you should really strip down your code to a Minimal, Complete, and Verifiable example: stackoverflow./help/mcve – dasjanik Commented Mar 1, 2016 at 14:58
@dasjanik kinda new to stackoverflow ... eh. ill edit my post. – TTom-s Commented Mar 1, 2016 at 15:04

| Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

< script type = "text/javascript" > and < /script> are not valid HTML tags.
Those prevented your script from even running.

This fiddle works flawlessly for me. Also it seems like the tawk service was being currently unavailable as it happened to begin working just some minutes ago - beforehand it didnt...

Once your TawkTo function plete, you need to the following code in same script. You can do it like this. Hope it will work

setTimeout(function(){  
      makemebtn(); 
    }, 7000);  
};

// Add following function which will search iframe with title chat widget. so you will get specific tawkTo iframe..

function makemebtn() {

      var chatwidget=$("iframe[title='chat widget']");
  
      var tawkbtn=chatwidget.contents().find('.tawk-button');  
      tawkbtn.css('background-color','#6514a7');
}

Try adding below <meta> tag inside <head> tag of your webpage.

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

GOT THE SOLUTION GUYS....

s0.parentNode.insertBefore(s1,s0);
    })();

After the function, you need to add the below code.

setTimeout(function () {
    makemebtn()
}, 5000)

function makemebtn() {
    const tawkbtn = $('iframe').eq(1).contents().find('.tawk-button')
    tawkbtn.css('background-color', '#6514a7')
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Live-chat Jquery plugin tawk.to not visible - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)