# 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 simples botão de "clicar para conversar" — ao clicar nele, abre-se o WhatsApp para o seu visitante, para que este lhe possa enviar mensagens por lá. Não traz mensagens para a sua caixa de entrada de Conversas nem ativa a IA por si só. Para uma experiência de chat com IA integrada na página do seu website, utilize o [Chat Widget](chat-widget.md) separado. > > **Pretende apenas uma ligação simples ou o seu próprio botão?** Se não quiser o widget flutuante e preferir ligar o seu próprio botão (ou um excerto de texto) diretamente a uma conversa de WhatsApp, avance para [Prefere uma ligação ou botão simples? (wa.me)](#prefer-a-plain-link-or-button-wa-me) abaixo. Para um equivalente de SMS, consulte [Adicionar uma ligação de Clicar para Enviar SMS](../messaging-channels/sms.md#adding-a-click-to-text-sms-link-to-your-website). ### Instalação 1. Abra o ficheiro HTML do seu site num editor de texto. 2. Localize a etiqueta `` (normalmente no final do seu ficheiro HTML). 3. Cole o seguinte script imediatamente antes da etiqueta ``: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. No código acima, substitua: * `NUMBER` pelo seu número de WhatsApp * Por exemplo: para o número +1 555 123 4567, utilize simplesmente: 15551234567 ### Adicionar uma Mensagem Personalizada Se pretender que apareça uma mensagem pré-preenchida quando alguém clica no botão: 1. Utilize este código em alternativa: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Exemplo com um número e mensagem reais: {% code overflow="wrap" %} ```html ``` {% endcode %} ### O que obtém Após a instalação, verá automaticamente: * Um botão verde do WhatsApp no canto inferior direito do seu site * O botão permanece visível durante a deslocação da página * O botão funciona perfeitamente em dispositivos móveis * Uma animação subtil aparece ao passar o rato sobre o botão ### Informações Adicionais * O seu número de telefone pode ser escrito com ou sem: * Sinal de mais (+) * Espaços * Hífens (-) * Estes serão processados automaticamente de forma correta * A mensagem pode conter espaços naturalmente * Não são necessários ficheiros ou instalações adicionais * O botão adapta-se automaticamente a ecrãs móveis ### Exemplo de página Web completa {% code overflow="wrap" %} ```html My Website ``` {% endcode %} ## Prefere uma ligação simples ou um botão? (wa.me) O widget acima fornece-lhe um botão flutuante pronto a usar. Mas se já tiver o seu próprio botão (ou uma ligação de menu, imagem ou pedaço de texto) e quiser apenas que este abra uma conversa de WhatsApp com o seu número, não precisa do widget — basta ligá-lo a um URL `wa.me`. O formato é: {% code overflow="wrap" %} ``` https://wa.me/NUMBER ``` {% endcode %} Substitua `NUMBER` pelo seu número completo em formato internacional — **apenas dígitos, sem sinal de mais, espaços ou hífens**. Por exemplo, para +31 6 5801 5937, usaria: {% code overflow="wrap" %} ``` https://wa.me/31658015937 ``` {% endcode %} ### Pré-preencher uma mensagem Para ter uma mensagem já escrita quando a conversa abrir, adicione `?text=` seguido da sua mensagem: {% code overflow="wrap" %} ``` https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question ``` {% endcode %} Os espaços na mensagem precisam de ser escritos como `%20` (é assim que as ligações processam os espaços). ### Colocar num botão Ligue qualquer botão a esse URL — exatamente da mesma forma que ligaria um botão a qualquer outro endereço Web. Em HTML simples, tem este aspeto: {% code overflow="wrap" %} ```html Chat on WhatsApp ``` {% endcode %} Num construtor de sites (Wix, Squarespace, WordPress, Webflow, etc.), adicione um botão como habitualmente e cole o URL `wa.me` no campo de "ligação" / "URL". > **Pretende uma ligação curta que rode por vários números, se lembre de visitantes recorrentes e contabilize cliques?** Utilize Ligações Curtas (em **Definições → Canais**) em vez de um URL `wa.me` simples.