Como Integrar Videochamadas em Apps Criados no Lovable
Guia completo e passo a passo para adicionar videochamadas profissionais em qualquer aplicação criada no Lovable, usando a API da videochamada.com.br. Inclui prompts prontos para copiar e colar, código de exemplo, e dicas práticas.
Por Que Lovable + videochamada.com.br?
O Lovable revolucionou a forma de construir aplicações web. Com prompts em linguagem natural, você cria apps completos com React, TypeScript, Tailwind CSS e Supabase em minutos. Mas quando o assunto é videochamada em tempo real, a complexidade do WebRTC torna inviável pedir ao Lovable para implementar do zero.
A videochamada.com.br resolve esse problema. Com uma API simples e integração via iframe, você adiciona videochamadas profissionais ao seu app do Lovable em menos de uma hora — com gravação, transcrição, personalização whitelabel e 2.000 minutos grátis por mês.
Rápido
Integração completa em menos de 1 hora usando os prompts deste guia
Sem Complexidade
Não precisa entender WebRTC, STUN/TURN ou SDP — a API cuida de tudo
Produção-Ready
Infraestrutura brasileira, whitelabel, gravação e transcrição inclusos
Arquitetura da Integração
Antes de começar, entenda como os componentes se conectam. A arquitetura é intencionalmente simples:
┌─────────────────────────────────────────────────────┐ │ Seu App (Lovable) │ │ │ │ ┌──────────┐ ┌──────────────────┐ │ │ │ Botão │───▶│ Supabase Edge │ │ │ │ "Iniciar │ │ Function │ │ │ │ Chamada" │ │ (create-videocall)│ │ │ └──────────┘ └────────┬─────────┘ │ │ │ │ │ ▼ │ │ ┌──────────────────┐ │ │ │ API videochamada │ │ │ │ .com.br │ │ │ │ POST /calls/link │ │ │ └────────┬─────────┘ │ │ │ │ │ ▼ retorna link │ │ ┌──────────────────┐ │ │ │ iframe com a │ │ │ │ sala de vídeo │ │ │ │ (fullscreen) │ │ │ └──────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ Webhook (opcional) │ │ │ │ videochamada.com.br ──▶ Edge Function │ │ │ │ (call.ended) ──▶ Salva duração no Supabase │ │ │ └──────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────┘
O que o Lovable faz:
- Frontend React + UI completa
- Autenticação com Supabase
- Banco de dados e agendamento
- Edge Functions como proxy
O que a videochamada.com.br faz:
- Toda a infraestrutura WebRTC
- STUN/TURN servers
- Gravação, transcrição, resumo
- Personalização whitelabel
Guia Passo a Passo
Siga os 8 passos abaixo para integrar videochamadas no seu app do Lovable. Cada passo inclui o prompt exato para colar no Lovable e o código esperado.
Antes de tudo, crie uma conta gratuita na plataforma. Você receberá 2.000 minutos grátis por mês — mais que suficiente para desenvolvimento e testes.
- Não precisa de cartão de crédito para começar
- Após criar a conta, acesse Configurações > API Keys para gerar sua chave
- Guarde a API Key em um lugar seguro — você vai precisar dela nos próximos passos
No Lovable, crie um novo projeto descrevendo o tipo de aplicação que deseja construir. O Lovable usa React + TypeScript + Tailwind CSS + shadcn/ui por padrão, o que é perfeito para integrar a videochamada.
Crie uma aplicação de [descreva seu caso de uso — ex: telemedicina, atendimento ao cliente, consultoria online] com: - Uma página de login - Um dashboard com lista de agendamentos - Um botão para iniciar videochamada - Integração com Supabase para autenticação e banco de dados
- Seja específico no prompt sobre o tipo de negócio e as funcionalidades desejadas
- O Lovable já gera código com Supabase Auth — aproveite para autenticação dos usuários
- Peça ao Lovable para criar a estrutura de páginas/rotas desde o início
Adicione sua API Key da videochamada.com.br como variável de ambiente no Supabase (que o Lovable conecta automaticamente). Isso é essencial para manter suas credenciais seguras.
Atenção: Mesmo que o Lovable facilite, nunca exponha sua API Key no código client-side. Sempre faça chamadas à API através de um backend (Supabase Edge Functions).
Adicione suporte a variáveis de ambiente para integração com a API da videochamada.com.br. Preciso armazenar a API Key de forma segura usando o Supabase Edge Functions para não expor no frontend.
- Nunca coloque API Keys diretamente no código do frontend
- Use Supabase Edge Functions como proxy para chamadas à API
- O Lovable consegue criar Edge Functions se você pedir no prompt
Casos de Uso com Prompts Prontos
Não sabe por onde começar? Escolha o caso de uso mais parecido com o seu projeto e use o prompt sugerido como ponto de partida no Lovable.
Telemedicina
Plataforma de consultas médicas online com agendamento, prontuário e videochamada integrada.
Crie uma plataforma de telemedicina com agendamento de consultas, prontuário eletrônico simplificado, e videochamada integrada via iframe.
Atendimento ao Cliente
Sistema de suporte por vídeo para empresas que precisam de atendimento visual e personalizado.
Crie um sistema de atendimento ao cliente com fila de espera, chat, e opção de escalar para videochamada quando necessário.
Consultoria Online
Plataforma para consultores, advogados, contadores ou coaches com agendamento e videochamada.
Crie uma plataforma de consultoria online com perfil público do consultor, agendamento com horários disponíveis, pagamento via Stripe, e videochamada integrada.
Educação / Tutoria
Plataforma de aulas particulares ou tutoria online com sala de vídeo e quadro branco.
Crie uma plataforma de tutoria online com busca de professores, agendamento de aulas, e sala de videochamada com compartilhamento de tela.
Processo Seletivo
Ferramenta de entrevistas por vídeo para RH, com gravação e avaliação de candidatos.
Crie uma ferramenta de entrevistas por vídeo para processos seletivos com agendamento, sala de videochamada com gravação, e formulário de avaliação do candidato.
Imobiliária Virtual
Visitas virtuais guiadas por vídeo para imóveis, com agendamento e acompanhamento do corretor.
Crie uma plataforma imobiliária com catálogo de imóveis, agendamento de visita virtual por vídeo, e chat com o corretor.
Métodos de Integração: Qual Escolher?
A videochamada.com.br oferece três formas de integração. Para apps do Lovable, recomendamos o iframe (No-Code/Low-Code), mas aqui está a comparação completa:
| Critério | Iframe (No-Code) | API (Code) | Do Zero (WebRTC) |
|---|---|---|---|
| Tempo de integração | ~1 hora | ~1 dia | Semanas/Meses |
| Complexidade | Baixa | Média | Altíssima |
| Personalização visual | Whitelabel (cores, logo) | Total | Total |
| Compatível com Lovable? | Perfeito | Possível | Inviável |
| Manutenção | Zero | Baixa | Alta contínua |
| Gravação/Transcrição | Incluso | Incluso | Precisa implementar |
Recomendação para Lovable:
Use a integração via iframe — é a mais rápida, estável e compatível com o Lovable. Se no futuro você precisar de mais controle, pode migrar para a integração via API sem perder dados ou configurações.
Dicas Avançadas
1. Compartilhe links com participantes externos
Quando o backend gera o link da chamada, salve-o no banco e envie por email/WhatsApp para o participante externo. Ele não precisa ter conta no seu app — basta abrir o link no navegador.
Quando um agendamento é criado, gere o link da videochamada e envie por email para o participante usando a integração com Resend ou SendGrid.
2. Adicione sala de espera
Crie uma página intermediária antes de entrar na chamada, onde o usuário verifica câmera/microfone e confirma que está pronto. A videochamada.com.br já inclui pré-checagem de hardware na sala.
3. Dashboard de uso e custos
Use os webhooks para acumular a duração das chamadas no Supabase. Depois, peça ao Lovable para criar um dashboard com gráficos mostrando total de chamadas, duração média, e custo estimado por mês.
4. Integração com Zapier/Make
A videochamada.com.br também se integra com Zapier e Make. Se você prefere automações no-code ao invés de Edge Functions, pode criar o link da chamada via Zapier e usá-lo no seu app.
Perguntas Frequentes
Sobre Este Guia
Este guia foi escrito em Março de 2026 e testado com a versão atual do Lovable e da API da videochamada.com.br. O Lovable evolui rapidamente, então alguns detalhes de interface podem mudar — mas a lógica de integração (Edge Function + iframe) permanece estável.
Lovable e videochamada.com.br são produtos independentes. Este guia não é patrocinado pelo Lovable — é uma documentação técnica para ajudar desenvolvedores que usam ambas as plataformas.