Integração Lovable + Leavo

Integração via Webhook – Lovable + Leavo

1. Visão Geral

A Lovable é uma plataforma de desenvolvimento full-stack baseada em IA que permite criar aplicativos completos a partir de linguagem natural. A integração com o Leavo permite que aplicativos Lovable capturem leads, enviem dados de conversão e integrem com sistemas de qualificação.

Casos de uso principais:

• Capturar leads de formulários em apps Lovable
• Enviar eventos de conversão para qualificação
• Integrar apps com sistema de CRM via webhooks
• Criar fluxos de onboarding automatizados

Fluxos disponíveis:

• ✅ Lovable → Leavo: Apps Lovable enviam dados via Edge Functions
• ✅ Leavo → Lovable: Webhook de saída do Leavo para Edge Functions

Diferencial: Plataforma de desenvolvimento com IA, usa Edge Functions (Supabase) para processar webhooks.

2. Documentação Oficial

Lovable:

• Introdução às Integrações
• Integração Stripe (Exemplo Webhook)
• Lovable API

Leavo:

• Painel de Webhooks

3. Recursos disponíveis via Webhook

3.1 Como Lovable trabalha com Webhooks

A Lovable usa Edge Functions (funções serverless no Supabase) para receber e enviar webhooks.

4. Como configurar webhooks

4.1 FLUXO 1: Lovable (App) enviando para Leavo

Permite que formulários e eventos em apps Lovable enviem leads para o Leavo.

Passo 1: Criar Webhook de Entrada no Leavo

1. Acesse https://app.leavo.ai/pt-BR/ai-settings/webhooks
2. Clique na aba "Entrada"
3. Clique em "+ Criar Webhook"

No modal:

• Nome: Lovable App - [Nome do App]
• Descrição: Recebe leads de app Lovable
• Webhook ativo: LIGADO
• Clique em "Criar Webhook"

Passo 2: Criar Edge Function no Lovable

No chat da Lovable, solicite:

A Lovable gerará algo como:

// supabase/functions/send-to-leavo/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts"

serve(async (req) => {
  try {
    const { name, email, phone, company } = await req.json()
    
    const response = await fetch(
      'https://api.leavo.ai/api/webhooks/a1b2c3d4-e5f6-7890-ghij-kl0123456789',
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, email, phone, company })
      }
    )

    if (!response.ok) throw new Error('Failed to send to Leavo')

    return new Response(
      JSON.stringify({ success: true }),
      { headers: { "Content-Type": "application/json" } }
    )
  } catch (error) {
    return new Response(
      JSON.stringify({ error: error.message }),
      { status: 500, headers: { "Content-Type": "application/json" } }
    )
  }
})

Passo 3: Mapear Campos no Leavo

4.2 FLUXO 2: Leavo enviando para Lovable (Edge Function)

Permite que o Leavo envie dados para apps Lovable.

Passo 1: Criar Edge Function para Receber

No chat da Lovable:

Passo 2: Configurar Webhook de Saída no Leavo

1. No Leavo, vá em Webhooks
2. Clique na aba "Saída"
3. Clique em "+ Criar Webhook"

Configurar:

Mapeamento JSON:

{
  "nome": "{{nome}}",
  "telefone": "{{telefone}}",
  "email": "{{email}}",
  "status": "{{status}}"
}

5. Observações e Limitações

5.1 Limitações do Lovable

5.2 Segurança

Edge Functions requerem autenticação:

headers: {
  'Authorization': `Bearer ${supabaseAnonKey}`
}

⚠️ Importante: Nunca exponha SERVICE_ROLE_KEY no frontend.

6. Troubleshooting

6.1 Edge Function não executa

6.2 Payload não chega no Leavo

7. Casos de Uso

7.1 App de Captação de Leads

Fluxo:

1. Usuário preenche formulário no app Lovable
2. Edge Function envia para Leavo
3. Lead criado com status "Novo"
4. Agente IA inicia qualificação

7.2 Dashboard de Qualificação

Fluxo:

1. Leavo envia leads qualificados
2. Edge Function salva no Supabase
3. Dashboard Lovable mostra em tempo real
4. Equipe visualiza e gerencia

Referências

• Lovable Integrations
• Supabase Edge Functions
• Leavo Webhooks