# Whatsapp flutuante

Com o código abaixo é possível cadastrar o numero do telefone, habilitar ou desabilitar a funcionalidade e escolher se deseja exibi-lo a direita ou a esquerda da pagina.

Snippet para exibir o Whatsapp flutuante.

{% tabs %}
{% tab title="settings.html" %}

```html
{#
# Whatsapp flutuante - arquivo de configuração do painel
# configs/settings.html
#}

<div class="box-section">
    <div class="title flex justify-between align-center">
        <span>WhatsApp</span>
        <input type="text" placeholder="(00) 0 0000-0000" name="whatsapp_number">
    </div>
</div>
<div class="box-section">
    <div class="title flex justify-between align-center">
        <span>Bot&atilde;o de atendimento via WhatsApp</span>
        <label class="check-drag">
            <input type="checkbox" name="button_whatsapp" value="1">
            <span class="icon"></span>
        </label>
    </div>
</div>
<div class="box-section">
    <div class="title flex justify-between align-center">
        <span>Qual o lado que o bot&atilde;o de atendimento via WhatsApp ser&aacute; exibido?</span>
    </div>
    <div class="content-section">
        <div class="item flex justify-between">
            <div class="list-radio">
                <label class="option flex align-center">
                    <input type="radio" name="whats_position" value="1">
                    <div class="dot"></div>
                    <div class="text">Exibir o bot&atilde;o no lado <strong>esquerdo</strong></div>
                </label>
            </div>

        </div>
        <div class="item flex justify-between">
            <div class="list-radio">
                <label class="option flex align-center">
                    <input type="radio" name="whats_position" value="2">
                    <div class="dot"></div>
                    <div class="text">Exibir o bot&atilde;o no lado <strong>direito</strong></div>
                </label>
            </div>
        </div>
    </div>
</div>
```

{% endtab %}

{% tab title="whatsapp.html" %}

```html
{#
# Whatsapp flutuante
# elements/snippets/whatsapp.html
#}

{% if settings.button_whatsapp and settings.whatsapp_number and settings.whats_position %}
    <div class="fixed-contact{{ settings.whats_position == '2' ? ' right-position' }}">
    {% if settings.whatsapp_number != '' %}

        {% set whats = settings.whatsapp_number %}
        {% set link = whats|replace({'(': '', ')': '', ' ':'', '-': ''}) %}    
        <a class="whats" href="https://api.whatsapp.com/send?l=pt&phone=55{{link}}" target="_blank" rel="noopener noreferrer">
            <svg viewBox="0 0 52 52"><path d="M26 0C11.663 0 0 11.663 0 26c0 4.891 1.359 9.639 3.937 13.762C2.91 43.36 1.055 50.166 1.035 50.237a.996.996 0 0 0 .27.981c.263.253.643.343.989.237l10.306-3.17A25.936 25.936 0 0 0 26 52c14.337 0 26-11.663 26-26S40.337 0 26 0zm0 50a23.94 23.94 0 0 1-12.731-3.651 1 1 0 0 0-.825-.108l-8.999 2.77a991.452 991.452 0 0 1 2.538-9.13c.08-.278.035-.578-.122-.821A23.907 23.907 0 0 1 2 26C2 12.767 12.767 2 26 2s24 10.767 24 24-10.767 24-24 24z"/><path d="M42.985 32.126c-1.846-1.025-3.418-2.053-4.565-2.803-.876-.572-1.509-.985-1.973-1.218-1.297-.647-2.28-.19-2.654.188a1 1 0 0 0-.125.152c-1.347 2.021-3.106 3.954-3.621 4.058-.595-.093-3.38-1.676-6.148-3.981-2.826-2.355-4.604-4.61-4.865-6.146C20.847 20.51 21.5 19.336 21.5 18c0-1.377-3.212-7.126-3.793-7.707-.583-.582-1.896-.673-3.903-.273a1.01 1.01 0 0 0-.511.273c-.243.243-5.929 6.04-3.227 13.066 2.966 7.711 10.579 16.674 20.285 18.13 1.103.165 2.137.247 3.105.247 5.71 0 9.08-2.873 10.029-8.572a.996.996 0 0 0-.5-1.038zm-12.337 7.385c-10.264-1.539-16.729-11.708-18.715-16.87-1.97-5.12 1.663-9.685 2.575-10.717.742-.126 1.523-.179 1.849-.128.681.947 3.039 5.402 3.143 6.204 0 .525-.171 1.256-2.207 3.293A.996.996 0 0 0 17 22c0 5.236 11.044 12.5 13 12.5 1.701 0 3.919-2.859 5.182-4.722a.949.949 0 0 1 .371.116c.36.181.984.588 1.773 1.104 1.042.681 2.426 1.585 4.06 2.522-.742 3.57-2.816 7.181-10.738 5.991z"/></svg>
        </a>

    {% endif %}
    </div>
{% endif %}
```

{% endtab %}

{% tab title="css" %}

```css
.fixed-contact {
    position: fixed;
    left: 15px;
    bottom: 40px;
    font-size: 1rem;
    z-index: 9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.fixed-contact.right-position {
    left: auto;
    right: 15px;
}

.fixed-contact a {
    width: 3.125em;
    height: 3.125em;
    fill: #fff;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: ease-in-out 0.3s;
    -o-transition: ease-in-out 0.3s;
    transition: ease-in-out 0.3s;
    background-color: #25d366;
}

.fixed-contact a svg {
    display: block;
    fill: inherit;
    width: 1.750em;
    height: 1.750em;
    display: block;
    stroke: #fff;
    stroke-width: 0.065em;
}
```

{% endtab %}
{% endtabs %}

### Como usar <a href="#como-usar" id="como-usar"></a>

Copie o código **settings.html**  acima e cole os itens dentro do arquivo `settings.html` que se encontra na pasta configs: `configs/settings.html`&#x20;

Copie o código **whatsapp.html**  acima e crie um arquivo separado, exemplo: \
`elements/snippets/whatsapp.html`&#x20;

Faça a chamada desse arquivo onde desejar:

```twig
{% element('snippets/whatsapp') %}
```

Copie o código CSS e cole em sua folha de estilo.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/whatsapp-flutuante.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.