Chat PHP How to Use?

Question

Chat PHP How to Use?

Asked 7 years, 6 months ago

Viewed 185 times

0

I want to have a chat for support on the site I’m developing, I want to use the tawk.to, I have some questions about how to install it, I am developing the site in CSS and HTML.

The question is whether the site needs to be online in order to be able to appear the chat? I just pasted the code they provide from chat, however nothing appears, who can help me thank, Thank you very much for the attention !!!!

I’ll enter the code that tawk.to make available on their website and mine as this getting :

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

No documentation for this tool?

– William Aparecido Brandino

2017/05/31 at 17:38
not everything online , only provide the code to insert into html

– Caio Wesley

2017/05/31 at 23:40

1 answer

Browser other questions tagged php html css api chat

You are not signed in. Login or sign up in order to post.

by Bruno Rigolon • **3,282** points · Answer 1 · 2017-05-31T18:07:59+00:00

Inside the Tawk.to panel you have the option to, display only in the domain (you must inform in the panel) or, leave open. Go to Dashboard as administrator, go to the Administrator -> Domain Restriction tab. If you have informed a domain, remove it, and it will appear on any page/site you create. I recommend that when you publish the site, add the domain for the chat to be restricted to your site.