Passar para o conteúdo principal

Como Adicionar Botão Fixo de WhatsApp na sua Loja

Aprenda a instalar e configurar um botão flutuante de WhatsApp usando o plugin Click to Chat no WordPress. No final, o botão ficará fixo na tela, com mensagem pré-definida, estilização personalizada e direcionamento direto para o seu atendimento.

🧭 Quando usar

  • Ao adicionar um botão de WhatsApp fixo no site

  • Ao configurar canal de atendimento rápido

  • Ao aumentar conversão e reduzir abandonos de carrinho

✅ Pré-requisitos

  • WordPress instalado

  • Plugin Click to Chat (HoliThemes)

  • Número de WhatsApp ativo no WhatsApp Business

🛠️ Passo a passo

Passo 1 – Instalar o plugin Click to Chat

  1. No painel WordPress, acesse Plugins » Adicionar novo.

  2. Pesquise por Click to Chat.

  3. Clique em Instalar e depois Ativar.

Passo 2 – Acessar configurações do botão

  1. No menu lateral, clique em Click to Chat.

  2. O painel exibirá todas as opções de configuração do botão flutuante.

Passo 3 – Configurar número e mensagens

  1. Preencha o campo WhatsApp Number com seu número (incluindo DDD).

  2. Em Pre-filled Message, escreva a mensagem que aparecerá automaticamente ao abrir o WhatsApp.

    • Ex.: “Olá! Quero saber mais sobre um produto.”

  3. Em Call to Action, escreva o texto exibido quando o usuário passa o mouse:

    • Ex.: Fale conosco ou Chame agora.

Passo 4 – Ajustar estilo e posição

  1. Em Style, escolha o modelo visual do botão.

  2. No campo Position, defina:

    • Bottom/Top → posição vertical

    • Right/Left → posição horizontal

  3. Ajuste a distância da borda (ex.: 15px).

  4. Se quiser personalizar totalmente o estilo, use Custom Style (opcional).

Passo 5 – Configurar comportamento ao clicar

  1. Em URL Structure, escolha como o WhatsApp será aberto:

    • New Tab (recomendado) → mantém o site aberto

  2. Mantenha as configurações Default para Web e Mobile.

Passo 6 – Definir em quais páginas o botão aparece

  1. Acesse Display Settings.

  2. Escolha se o botão aparecerá:

    • Em todas as páginas (recomendado), ou

    • Apenas em páginas específicas

  3. Se quiser, oculte o botão no mobile ou no desktop.

Passo 7 – Salvar e testar

  1. Clique em Save Changes.

  2. Acesse o site e atualize a página.

  3. O botão deve aparecer no canto escolhido, com o CTA configurado.

🧩 Exemplos práticos

  • Exemplo 1:
    Entrada: Botão no canto inferior direito, CTA “Fale com um especialista”
    Saída esperada: Botão fixo abrindo WhatsApp em aba nova com mensagem automática.

  • Exemplo 2:
    Entrada: Loja quer exibir botão apenas nas páginas de produto
    Saída esperada: Display configurado para páginas de produto apenas.

🧪 Solução de problemas

  • Erro/Sintoma: Botão não aparece no site
    ​Causa provável: Plugin não ativado ou display desativado
    ​Como resolver: Verifique Display Settings e confirme que está habilitado em todas as páginas.

  • Erro/Sintoma: WhatsApp abre sem mensagem pré-preenchida
    ​Causa provável: Campo de mensagem não configurado corretamente
    ​Como resolver: Revise Pre-filled Message e salve novamente.

  • Erro/Sintoma: Botão aparece sobreposto ao menu mobile
    ​Causa provável: Distância da borda muito pequena
    ​Como resolver: Ajuste os valores de “Bottom” ou “Right” para maior espaçamento.

🔎 Referências e links úteis

🗂️ Metadados

  • Categoria: Integrações e atendimento

  • Subcategoria: WhatsApp e botões flutuantes

  • Tags: whatsapp, botão flutuante, click to chat, atendimento, WordPress

  • Nível: básico

  • Atualizado em: 2025-11-14

Artigos relacionados
Respondeu à sua pergunta?