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 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 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) abaixo. Para um equivalente de SMS, consulte Adicionar uma ligação de Clicar para Enviar SMS.

Instalação

  1. Abra o ficheiro HTML do seu site num editor de texto.
  2. Localize a etiqueta </body> (normalmente no final do seu ficheiro HTML).
  3. Cole o seguinte script imediatamente antes da etiqueta </body>:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER"></script>
  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:
<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 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 

<!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>

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

https://wa.me/NUMBER

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:

https://wa.me/31658015937

Pré-preencher uma mensagem

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

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

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:

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

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.