# Widget do WhatsApp ## Integração do Widget do WhatsApp Adicione um botão flutuante de chat do WhatsApp ao seu site com este guia simples. > **Bom saber.** O Widget do WhatsApp é um botão simples de "clique para conversar" — ao clicar nele, o WhatsApp é aberto para o seu visitante para que ele possa enviar uma mensagem para você por lá. Ele não traz mensagens para a sua caixa de entrada de Chats nem aciona a IA por conta própria. Para uma experiência de chat com IA integrada na página do seu site, use o [Chat Widget](chat-widget.md) separado. > > **Quer apenas um link simples ou seu próprio botão?** Se você não quiser o widget flutuante e preferir vincular seu próprio botão (ou um trecho de texto) diretamente a um chat do WhatsApp, pule para [Prefere um link ou botão simples? (wa.me)](#prefer-a-plain-link-or-button-wa-me) abaixo. Para um equivalente de SMS, veja [Adicionando um link de clique para enviar SMS](../messaging-channels/sms.md#adding-a-click-to-text-sms-link-to-your-website). ### Instalação 1. Abra o arquivo HTML do seu site em um editor de texto. 2. Localize a tag `` (geralmente no final do seu arquivo HTML). 3. Cole o seguinte script logo antes da tag ``: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. No código acima, substitua: * `NUMBER` pelo seu número do WhatsApp * Por exemplo: para o número +1 555 123 4567, use simplesmente: 15551234567 ### Adicionando uma mensagem personalizada Se você quiser que uma mensagem pré-preenchida apareça quando alguém clicar no botão: 1. Use este código em vez disso: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Exemplo com um número e mensagem reais: {% code overflow="wrap" %} ```html ``` {% endcode %} ### O que você recebe Após a instalação, você verá automaticamente: * Um botão verde do WhatsApp no canto inferior direito do seu site * O botão permanece visível durante a rolagem * O botão funciona perfeitamente em dispositivos móveis * Uma animação sutil aparece ao passar o mouse sobre o botão ### Informações adicionais * Seu número de telefone pode ser escrito com ou sem: * Sinal de mais (+) * Espaços * Hifens (-) * Eles serão processados automaticamente de forma correta * A mensagem pode conter espaços naturalmente * Não são necessários arquivos ou instalações adicionais * O botão se adapta automaticamente a telas de dispositivos móveis ### Exemplo de página da web completa {% code overflow="wrap" %} ```html My Website ``` {% endcode %} ## Prefere um link simples ou um botão? (wa.me) O widget acima oferece um botão flutuante pronto para uso. Mas se você já tem seu próprio botão (ou um link de menu, imagem ou trecho de texto) e só quer que ele abra uma conversa no WhatsApp com seu número, você não precisa do widget — basta vinculá-lo a uma URL `wa.me`. O formato é: {% code overflow="wrap" %} ``` https://wa.me/NUMBER ``` {% endcode %} Substitua `NUMBER` pelo seu número completo no formato internacional — **apenas dígitos, sem sinal de mais, espaços ou hifens**. Por exemplo, para +31 6 5801 5937 você usaria: {% code overflow="wrap" %} ``` https://wa.me/31658015937 ``` {% endcode %} ### Pré-preenchendo uma mensagem Para ter uma mensagem já digitada quando a conversa abrir, adicione `?text=` seguido pela sua mensagem: {% code overflow="wrap" %} ``` https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question ``` {% endcode %} Espaços na mensagem precisam ser escritos como `%20` (é assim que os links lidam com espaços). ### Colocando em um botão Vincule qualquer botão a essa URL — exatamente da mesma forma que você vincularia um botão a qualquer outro endereço da web. Em HTML puro, fica assim: {% code overflow="wrap" %} ```html Chat on WhatsApp ``` {% endcode %} Em um construtor de sites (Wix, Squarespace, WordPress, Webflow, etc.), adicione um botão como de costume e cole a URL `wa.me` no campo de "link" / "URL". > **Quer um link curto que alterna entre vários números, lembra de visitantes recorrentes e rastreia cliques?** Use Links Curtos (em **Configurações → Canais**) em vez de uma URL `wa.me` bruta.