Twitter Bootstrap Question posted in

Live-chat Jquery plugin tawk.to not visible – Twitter bootstrap

I’m preparing a website for the company 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.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>

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.

Tags:

4

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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')
}
    Login or Signup to reply.
  3. 0

    Once your TawkTo function complete, 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');
}
    Login or Signup to reply.
  4. 0

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

    <meta name="referrer" content="no-referrer-when-downgrade">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search