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 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: 10/07/2024