Um botão flutuante no Telegram pode ser uma adição útil para melhorar a interação com os usuários em seu site. Esses botões flutuantes podem ser personalizados para realizar diversas ações, como enviar mensagens, realizar chamadas, ou redirecionar para diferentes partes do site.
Abaixo siga orientações de como incluir o ícone através de programação Java:
1. Acesse o editor de páginas;
2. Clique no Ícone de engrenagem que fica no canto superior direito da tela;
3. Em seguida, clique em “Javascript & CSS”;
4. Clique para “Adicionar” um novo código;
5. Escolha um nome para seu código, selecione a opção “Funcionamento” e adicione no campo de texto todo o código abaixo;
<a href=”SEULINKAQUI” class=”float”>
<svg class=”icon”>
<path
d=”M0,17.46A3.22,3.22,0,0,1,1.87,16q4.62-1.8,9.26-3.56L42.84.25A3.55,3.55,0,0,1,43.61,0,2,2,0,0,1,46,2.18a17.08,17.08,0,0,1-.45,2.91Q42.3,20.44,39,35.77a6.38,6.38,0,0,1-.53,1.52,1.79,1.79,0,0,1-2.27,1,4.87,4.87,0,0,1-1.36-.65c-3.3-2.39-6.58-4.8-9.87-7.21l-.42-.31c-.13.12-.26.22-.37.33l-5,4.81a2.46,2.46,0,0,1-1.83.75c0-.65.08-1.29.13-1.92.2-2.81.39-5.62.61-8.43a1,1,0,0,1,.3-.59Q27.9,16.42,37.47,7.84s.1-.07.13-.12L38,7.05a2.48,2.48,0,0,0-.82-.14,2.47,2.47,0,0,0-.89.41q-11.9,7.42-23.8,14.87a.85.85,0,0,1-.64.11Q6.73,20.76,1.68,19.17A2.72,2.72,0,0,1,0,18Z” />
</svg>
</a>
<style>
:root {
–icon-color: #fff;
–icon-hover: #fff;
–background-color: #0060ff;
–background-hover: #0044b3
}
.icon {
width: 48px;
height: 48px;
transform: scale(0.6) translate(15%, 28%);
fill: var(–icon-color)
}
.float {
position: fixed;
cursor: pointer;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
transition: 1s;
background-color: var(–background-color);
border-radius: 50px;
animation: pulse 3s infinite;
-webkit-animation: pulse 3s infinite;
-moz-animation: pulse 3s infinite;
-o-animation: pulse 3s infinite;
z-index: 9000
}
.float:hover {
background-color: var(–background-hover)
}
.float:hover .icon {
fill: var(–icon-hover)
}
@keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 1)
}
70% {
-webkit-box-shadow: 0 0 0 20px rgba(0, 96, 255, 0)
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 0)
}
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 1)
}
70% {
-webkit-box-shadow: 0 0 0 20px rgba(0, 96, 255, 0)
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 0)
}
}
@-moz-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 1)
}
70% {
-webkit-box-shadow: 0 0 0 20px rgba(0, 96, 255, 0)
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 0)
}
}
@-o-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 1)
}
70% {
-webkit-box-shadow: 0 0 0 20px rgba(0, 96, 255, 0)
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(0, 96, 255, 0)
}
}
</style>
A única mudança que você precisará fazer no código, é alterar a parte do link onde está escrito “SEULINKAQUI” e inserir o link do do grupo do Telegram. Não adicione espaços, traço e não retire as aspas.
Em seguida clique em “Salvar”!
