> ## 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).

# How to create a TELEGRAM FLOATING BUTTON

1. Go to the page editor;

2. Click the **gear icon** in the top right corner of the screen;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/click-ingre_1t6jcfo.png =698xauto)
3. Then click **"Javascript & CSS"**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1ngypl5.png =637xauto)
4. Click to **"add"** a new code;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_xlpwg1.png =389xauto)
5. 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>
```

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_x7owgh.png)

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.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1snubd1.png)
Then click **"Save"**!

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