PHP Chat How to use? [closed]

Question

PHP Chat How to use? [closed]

Navigation

#1 by (2 votes)

0

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

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

I will insert the code that tawk.to makes available on their site and mine as it gets:

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

php api html css chat

asked by anonymous 31.05.2017 / 19:26

1 answer

Place top at page resize Results by user id logged in

score 2 · Accepted Answer

Within the Tawk.to panel you have the option of displaying only in the domain (you must inform in the panel) or, leave it open. Access the Dashboard as an administrator, go to the Admin tab - > Domain Restriction. If you have entered a domain, remove it, so 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.