Pular para o conteúdo
Docs

WA.ME → GRAPNEL: Migração para Sticky Routing

Trocar todos os links wa.me/{phone} por grapnel.com.br/wa/G00008.

O Grapnel reconhece o visitante por um cookie e mantém a atribuição à vendedora enquanto a identificação persistir e ela continuar elegível. A limpeza de cookies ou mudanças na disponibilidade podem gerar uma nova atribuição. O botão de WhatsApp do site aponta para o domínio Grapnel em vez de wa.me direto.

Por que não usar wa.me direto?

Um link wa.me/{phone} aponta diretamente para um número fixo. Para distribuir contatos entre atendentes, o site pode usar o link do Grapnel, que resolve o destino no servidor e usa um cookie para reconhecer visitas seguintes. O cookie tem duração configurada de até 400 dias, sujeita às regras do navegador e à limpeza pelo visitante.

1. Pegar o código da conta

O código da conta tem G seguido de cinco dígitos. Neste guia, G00008 é apenas um exemplo: substitua pelo código da sua conta antes de publicar. Adicione no .env do projeto:

bash
GRAPNEL_OWNER_CODE=G00008

2. Mensagem fixa? Só trocar a URL

Se a mensagem do WhatsApp é hardcoded (texto fixo), só trocar o domínio e remover o telefone:

Antes: https://wa.me/{telefone-com-DDI-e-DDD}?text=Olá!%20Quero%20participar
Depois: https://grapnel.com.br/wa/G00008?text=Olá!%20Quero%20participar

Se o site chama /next-instance via fetch para obter o telefone, remova o fetch. O código da conta é constante.

3. Mensagem dinâmica? Usar buildGrapnelUrl

Usar a função buildGrapnelUrl — ela faz encodeURIComponent internamente:

typescript
// Copiar para lib/utils.ts
export function buildGrapnelUrl(ownerCode: string, message?: string): string {
  const base = `https://grapnel.com.br/wa/${ownerCode}`;
  if (message) return `${base}?text=${encodeURIComponent(message)}`;
  return base;
}

export function normalizeWhatsAppPhone(value: string): string {
  return value.replace(/\D/g, "").replace(/^00/, "");
}

// Usar assim:
const msg = `Olá! Quero o ${produto.nome} por R$ ${produto.preco}`;
buildGrapnelUrl("G00008", msg)

Passar mensagem como texto puro (com espaços reais), NÃO url-encoded.

typescript
buildGrapnelUrl(ownerCode, "Olá! Gostaria de participar") // certo
buildGrapnelUrl(ownerCode, "Olá!+Gostaria+de+participar") // errado — + vira %2B

4. Fallback (recomendado)

Se o site já tem um número de WhatsApp funcionando, mantenha-o como fallback caso GRAPNEL_OWNER_CODE não esteja configurado:

typescript
const ownerCode = process.env.GRAPNEL_OWNER_CODE;
const url = ownerCode
  ? buildGrapnelUrl(ownerCode, msg)
  : `https://wa.me/${normalizeWhatsAppPhone(fallbackPhone)}?text=${encodeURIComponent(msg)}`;

O número usado em wa.me deve conter DDI + número, somente dígitos, sem +, espaços, parênteses ou hífens. O prefixo internacional 00, quando informado, é removido.

Assim o site continua funcionando com wa.me se o código da conta não estiver configurado.

Encontrar todos os pontos pra migrar

bash
grep -rn "wa\.me" --include="*.ts" --include="*.tsx" --include="*.js" --include="*.jsx" .
grep -rn "next-instance" --include="*.ts" --include="*.tsx" .

Casos especiais

  • Página de conversão (tipo /sucesso-whatsapp): não precisa mudar. Ela lê ?url= e redireciona — funciona com qualquer URL.
  • WhatsApp context provider: mudar de { phone } para { ownerCode, fallbackPhone }. Todos os consumers precisam atualizar no mesmo commit (TypeScript pega).
  • Fallback: manter wa.me/{phone} quando GRAPNEL_OWNER_CODE não está no .env.
typescript
const normalizeWhatsAppPhone = (value: string) =>
  value.replace(/\D/g, "").replace(/^00/, "");

const url = ownerCode
  ? buildGrapnelUrl(ownerCode, msg)
  : `https://wa.me/${normalizeWhatsAppPhone(fallbackPhone)}?text=${encodeURIComponent(msg)}`;

O fallback deve representar DDI + número, somente dígitos, sem +, espaços, parênteses ou hífens. O prefixo internacional 00, quando informado, é removido pela função.

Verificar

bash
# Não deve ter wa.me/{phone} em código customer-facing (exceto fallbacks)
grep -rn "wa\.me/[0-9]" --include="*.ts" --include="*.tsx" .

# Deve ter URLs do Grapnel
grep -rn "grapnel\.com\.br/wa" --include="*.ts" --include="*.tsx" .

Abrir o site → clicar em botão WhatsApp → verificar que passa por grapnel.com.br/wa/G00008 antes do wa.me.