Your AI Connector Docs

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 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) abaixo. Para um equivalente de SMS, veja Adicionando um link de clique para enviar SMS.

Instalação

  1. Abra o arquivo HTML do seu site em um editor de texto.
  2. Localize a tag </body> (geralmente no final do seu arquivo HTML).
  3. Cole o seguinte script logo antes da tag </body>:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER"></script>
  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:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER/Your message here"></script>
  1. Exemplo com um número e mensagem reais:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I'm interested in your services"></script>

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 

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- WhatsApp Widget (place this just before </body>) -->
    <script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I have a question"></script>
</body>
</html>

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 é:

https://wa.me/NUMBER

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:

https://wa.me/31658015937

Pré-preenchendo uma mensagem

Para ter uma mensagem já digitada quando a conversa abrir, adicione ?text= seguido pela sua mensagem:

https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question

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:

<a href="https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question">Chat on WhatsApp</a>

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.