0

Quero ter um chat para suporte no site que estou desenvolvendo, estou querendo utilizar o tawk.to, tenho algumas dúvidas de como instalar ele, estou desenvolvendo o site em CSS e HTML.

A dúvida é se o site precisa estar online para poder aparecer o chat? Eu apenas colei o código que eles disponibilizam do chat, entretanto não aparece nada, quem poder me ajudar agradeço, Muito obrigado pela atenção !!!!

Vou inserir o código que o tawk.to disponibiliza no site deles e o meu como esta ficando :

<!--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/592a13614374a471e7c50181/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

@charset "utf-8";
/* CSS Document */


#topo {
	background:url(../imagens/topo2etrelas.png);
	border-left:1px solid #000;
	border-right:1px solid #000; 
	position:inherit;
	width:1024px;
	height:190px;
	margin:auto;
	

}


#fundoinicial {
	background-image: url(../imagens/fundoof.png);
	width: 1024px;
	height: 1000px;
	margin: auto;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	
}

#menufundo {
	background:#60365e;
	border:1px solid #000;
	position:relative;
	width:1024px;
	height:28px;
	margin:auto;
	
	
	
	
}


#ul li a{
	font-family:"Comic Sans MS", cursive;
	font-style:normal;
	list-style-type:none;
	display: inline;
	font-size:19px;
	line-height:0px;
	padding:10px;
    margin:4px 0 0 52px;
	color:#FFF;
	text-decoration:none;
	float:left;
	
	
}

#ul li a:hover{
	text-shadow:0px 0px 0px black,
				0px 0px 0px black,
				0px 0px 0px black,
				0px 0px 0px black;	
	font-size:19px;
    color:black;
}


.rodape {
	background: url(../imagens/rodape.png);
	margin: auto;
	position: absolute;
	width: 1056px;
	height: 99px;
	left: 132px;
	top: 1198px;
	
}
	
	



.trs {-webkit-transition:all ease-out 0.5s;
    -moz-transition:all ease-out 0.5s;
    -o-transition:all ease-out 0.5s;
    -ms-transition:all ease-out 0.5s;
    transition:all ease-out 0.5s;}  
#slider {
	position: absolute;
	width: 970px;
	height: 339px;
	margin: auto;
	left: -25px;
	top: 122px;
	border: 1px solid #666;
	border-radius: 10px 10px 10px 10px;
}
#slider a {
	position: absolute;
	width: 850px;
	height: 290px;
	margin: auto;
	left: 57px;
	top: 4px;
	opacity: 0;
	filter: alpha(opacity=0);
}
.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;}

/*controladores*/
span {
	background: none;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	position: absolute;
	bottom: 12px;
	width: 44px;
	height: 43px;
	z-index: 5;
}
.next {
	right: 8px;
}
.next:before,.next:after {left: 21px;}
.next:before {
    -webkit-transform: rotate(-42deg);
    top: 5px;
}
.next:after {
    -webkit-transform: rotate(-132deg);
    top: 19px;
}
.next:before,.next:after,.prev:before,.prev:after {content: "";
    height: 20px;
    background:#000;
    width: 1px;
    position: absolute;
}
.prev {
	left: -16px;
}
.prev:before,.prev:after {left: 18px;}
.prev:before {
    -webkit-transform: rotate(42deg);
    top: 5px;
}
.prev:after {
    -webkit-transform: rotate(132deg);
    top: 19px;
}

figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}
    figure {
    max-width: 950px;
    height: 310px;
    position: relative;
	top:60px;
	left:0px;
    margin:0px 0 0 50px;
	
}

figcaption {
	border-top: 0.2px solid #000;
	border-radius: 0px 0px 10px 10px;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	text-align: center;
	background: #60365e;
	width: 970px;
	position: absolute;
	margin: auto;
	bottom: -156px;
	left: -24px;
	line-height: 35px;
	height: 35px;
	
}

h1 a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 1px 1px black;
	position: absolute;
	left: 172px;
	top: 1209px;
	
}

p a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 1px 1px black;
	position: absolute;
	left: 172px;
	top: 1237px;
}

.facebook{
	width: 32px;
	right: 32px;
	position: absolute;
	top: 25px;
	left: 515px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	
}

.facebook:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.trabalhe {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 1px 1px black;
	position: absolute;
	left: 986px;
	top: 1231px;
	width: 159px;

}

.email {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #FFF;
	text-decoration: none;
	text-shadow: 1px 1px black;
	position: absolute;
	margin-top: 20px;
	left: 992px;
	top: 1235px;
}

.purificador img {
	position: absolute;
	width : 130px;
	height: 130px;
	top: 950px;
	right:1020px;
	
}
.fogao img {
	position: absolute;
	width: 130px;
	height: 130px;
	top: 950px;
	right: 820px;
}
.geladeira img {
	position:absolute;
	width:150px;
	height:200px;
	top:880px;
	right:610px;
}
.maquina img {
	position: absolute;
	width: 115px;
	height: 165px;
	top: 915px;
	right: 450px;
	
}
.ar img {
	position: absolute;
	width: 200px;
	height: 130px;
	top: 960px;
	right: 200px;
	font-size: 36px;
}


.posicionado1 a{
	font-family: "Comic Sans MS", cursive;
	color:#000;
	text-decoration:none;
	position: absolute;
	right: 219px;
	top: 1115px;
	font-size: 18px;
}

.posicionado1 a:hover{
	text-decoration:underline;
	color:#ff8533;
}

.posicionado2 a{
	font-family: "Comic Sans MS", cursive;
	color: #000;
	text-decoration: none;
	position: absolute;
	right: 462px;
	top: 1115px;
	font-size: 18px;
}
.posicionado2 a:hover{
	text-decoration:underline;
	color:#ff8533;
}

.posicionado3 a{
	font-family: "Comic Sans MS", cursive;
	color: #000;
	text-decoration: none;
	position: absolute;
	right: 629px;
	top: 1115px;
	font-size: 18px;
	height: 0px;
	
}
.posicionado3 a:hover{
	text-decoration:underline;
	color:#ff8533;
}

.posicionado4 a{
	font-family: "Comic Sans MS", cursive;
	color: #000;
	text-decoration: none;
	position: absolute;
	right: 857px;
	top: 1115px;
	font-size: 18px;
	height: 0px;
	
}
.posicionado4 a:hover{
	text-decoration:underline;
	color:#ff8533;
}

.posicionado5 a{
	font-family: "Comic Sans MS", cursive;
	color: #000;
	text-decoration: none;
	position: absolute;
	right: 1036px;
	top: 1115px;
	font-size: 18px;
	height: 0px;
	
}
.posicionado5 a:hover{
	text-decoration:underline;
	color:#ff8533;
}


.mibew-agent-button{
	position: absolute;
	top:330px;
	left:300px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alfatec</title>
<link rel="shortcut icon" href="imagens/ico.png" type="imagem/x-png" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"  src="jquery/jquery-migrate-3.0.0.min.js" ></script>
<style type="text/css">
body {
	background-image: url(projeto/imagens/fundo.jpg);
}
</style>

<script type="text/javascript">
		function setaImagem(){
   		var settings = {
        primeiraImg: function(){
            elemento = document.querySelector("#slider a:first-child");
            elemento.classList.add("ativo");
            this.legenda(elemento);
        },

        slide: function(){
            elemento = document.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }

        },

        proximo: function(){
            clearInterval(intervalo);
            elemento = document.querySelector(".ativo");

            if(elemento.nextElementSibling){
                elemento.nextElementSibling.classList.add("ativo");
                settings.legenda(elemento.nextElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");
                settings.primeiraImg();
            }
            intervalo = setInterval(settings.slide,4000);
        },

        anterior: function(){
            clearInterval(intervalo);
            elemento = document.querySelector(".ativo");

            if(elemento.previousElementSibling){
                elemento.previousElementSibling.classList.add("ativo");
                settings.legenda(elemento.previousElementSibling);
                elemento.classList.remove("ativo");
            }else{
                elemento.classList.remove("ativo");                     
                elemento = document.querySelector("a:last-child");
                elemento.classList.add("ativo");
                this.legenda(elemento);
            }
            intervalo = setInterval(settings.slide,4000);
        },

        legenda: function(obj){
            var legenda = obj.querySelector("img").getAttribute("alt");
            document.querySelector("figcaption").innerHTML = legenda;
        }

    }

    //chama o slide
    settings.primeiraImg();

    //chama a legenda
    settings.legenda(elemento);

    //chama o slide à um determinado tempo
    var intervalo = setInterval(settings.slide,4000);
    document.querySelector(".next").addEventListener("click",settings.proximo,false);
    document.querySelector(".prev").addEventListener("click",settings.anterior,false);
}

window.addEventListener("load",setaImagem,false);


<!--Final do slide-->


</script>


</head>


<body>


<div id="topo"></div><!--div final topo-->
<div id="menufundo">

<nav id="ul">	  	
       			<ul>            
        			<li><a href="#" title="Página Inicial">Página Inicial</a></li> 
        			<li><a href="#" title="Quem Somos">Quem Somos</a></li>
        			<li><a href="#" title="Áreas de Cobertura">Áreas de Cobertura</a></li> 
        			<li><a href="#" title="Serviços">Serviços</a></li>
        			<li><a href="#" title="Fale Conosco">Fale Conosco</a></li>
    			</ul>
</nav>
</div>

        	
<div id ="fundoinicial">

            <figure>
                       <span class="trs next" title="Próximo"></span>
                       <span class="trs prev" title="Voltar"></span>
                    
<div id="slider">
           <a href="#" class="trs"><img src="imagens/img1.jpg" alt="Trabalhamos com Diversos Produtos e Modelos"/></a>				
           <a href="#" class="trs"><img src="imagens/img2.jpg" alt="Qualidade em Atendimento" /></a>
           <a href="#" class="trs"><img src="imagens/img3.jpg" alt="Oficina Qualificada" /></a>
           <a href="#" class="trs"><img src="imagens/img2.jpg" alt="1" /></a>
           <a href="#" class="trs"><img src="imagens/img3.jpg" alt="2" /></a>
</div>
        
            <figcaption></figcaption>
  </figure>
</div>

<div class="rodape">


<a href="https://www.facebook.com/Alfatec-Autorizada-Electrolux-1737242946511224/" title="Facebook" target="_blank">
<img id= "facebook"  src="imagens/facebook-logo (2).png" alt="FaceBook" width="24" class="facebook" > 
</a>


</div><!--div final menufundo--> 










<div class="trabalhe" > <h2>Trabalhe Conosco</h2></div>
<div class="email" > <p>[email protected]</p></div>
-->

<!--Imagens produtos-->

<div class="purificador"  >
<img ="purificador" src="imagens/purificador.png" alt="Purificadores" title="Purificadores"  />
</div>

<div class="fogao" >
<img ="fogao" src="imagens/fogao.png" alt="Fogão" title="Fogão Cooktop Microondas e Coifas"  />
</div>

<div class="geladeira">
<img "geladeira" src="imagens/geladeira.png" alt="Geladeira" title="Geladeiras"  />
</div>

<div class="maquina">
<img "maquina" src="imagens/maquina.png" alt="Maquinas" title="Maquinas Lava e Seca"  />
</div>

<div class="ar">
<img "maquina" src="imagens/ar.png" alt="Arcondicionados e Climatizadores" title="Ar condicionados e Climatizadores" />
</div>
<!--Final da imagens dos produtos-->


<!--Legendas dos produtos-->
<br>
<h4 class="posicionado1"> <a href="#" title="Ar condicionados e Climatizadores"> Ar Condicionados</a></h4>

<br>
<h4 class="posicionado2"> <a href="#" title="Maquinas Lava e Seca">Lavanderia</a></h4>

<br>
<h4 class="posicionado3"> <a href="#" title="Geladeiras">Refrigeração</a></h4>

<br>
<h4 class="posicionado4"> <a href="#" title="Fogão Cooktop Microondas e Coifas">Cozinha</a></h4>

<br>
<h4 class="posicionado5"> <a href="#" title="Purificadores">Purificadores</a></h4>




</body>
</html>

2
  • Não tem documentação essa ferramenta? 31/05/2017 às 17:38
  • não tudo online , apenas disponibilizam o codigo para inserir no html 31/05/2017 às 23:40

1 Resposta 1

2

Dentro do painel do Tawk.to tem a opção de, exibir somente no domínio (você deve informar no painel) ou, deixar aberto. Acesse o Dashboard como administrador, vá na guia Administrador -> Restrição de domínio. Se você tiver informado algum domínio, remova, assim será exibido em qualquer página/site que criar. Recomendo que, quando for publicar o site, adicione o domínio para o chat ficar restrito ao seu site.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .