How to create a TELEGRAM FLOATING BUTTON

Go to the page editor;
Click the gear icon in the top right corner of the screen;

Then click "Javascript & CSS";

Click to "Adicionar" a new code;

Choose a name for your code, select the "Funcionamento" option and add the entire code below in the text field;

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

The only change you'll need to make in the code is to replace the part of the link that says "SEULINKAQUI" with the link to your Telegram group. Don't add spaces or dashes, and don't remove the quotation marks.

Then click "Salvar"!

Still have questions? Reach out to our team on Chat! We're always happy to help.

Updated on: 08/01/2026

Was this article helpful?

Thank you!