Como criar um BOTÃO FLUTUANTE do TELEGRAM
Acesse o editor de páginas;
Clique no Ícone de engrenagem que fica no canto superior direito da tela;
Em seguida, clique em "Javascript & CSS";
Clique para "Adicionar" um novo código;
Escolha um nome para seu código, selecione a opção "Funcionamento" e adicione no campo de texto todo o código abaixo;
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"!
Ficou com alguma dúvida? Chame nosso equipe no Chat! Estamos sempre prontos para ajudar.
Clique no Ícone de engrenagem que fica no canto superior direito da tela;
Em seguida, clique em "Javascript & CSS";
Clique para "Adicionar" um novo código;
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"!
Ficou com alguma dúvida? Chame nosso equipe no Chat! Estamos sempre prontos para ajudar.
Atualizado em: 19/01/2022
Obrigado!