> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Cómo crear un BOTÓN FLOTANTE de TELEGRAM

1. Accede al editor de páginas;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-07-as-_yaebzz.png =650x380)

2. Haz clic en el **Ícono de engranaje** que está en la esquina superior derecha de la pantalla;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-07-as-_1oy0j3d.png =650x207)

3. En seguida, haz clic en **"Javascript y CSS"**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-07-as-_12qp1yp.png =650x413)

4. Haz clic para **"Añadir código"** un nuevo código;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-07-as-_12map5t.png =650x412)

5. Elige un nombre para tu código, selecciona la opción **"Funcionamiento"** y agrega en el campo de texto todo el código de abajo;

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

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-09-as-_fhgopl.png =650x661)

El único cambio que necesitarás hacer en el código es modificar la parte del enlace donde está escrito **"SEULINKAQUI"** e insertar el enlace del grupo de Telegram. No agregues espacios ni guiones y no quites las comillas.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-09-as-_7k3b3h.png =650x791)

¡En seguida haz clic en **"Agregar"**!

¿Te quedó alguna duda? ¡Habla con nuestro equipo en el Chat! Siempre estamos listos para ayudarte. :)