Tutorial: como criar um site com Lovable ligado à Viniun

Neste tutorial você vai criar um site com Lovable ligado à Viniun: a inteligência artificial monta as páginas, os imóveis vêm direto do seu estoque no CRM e cada formulário preenchido vira lead no funil, com o corretor do rodízio. Você escolhe o visual e a hospedagem; a Viniun cuida dos dados. Conte com uma tarde para a primeira versão.

Quem pode fazer: o dono ou quem tem permissão de edição em INTEGRAÇÕES › API & Webhooks. Se o item não aparece no seu menu, ele não está liberado no seu perfil ou no seu plano. As telas são da conta de demonstração da Viniun, com dados fictícios. Os passos dentro do Lovable estão descritos em texto.

O que você precisa antes de começar

• Imóveis publicados na Viniun (só eles aparecem no site).
• Logo, cores, contatos e redes sociais preenchidos em Configuração da Empresa: o site puxa tudo de lá.
• Uma conta no Lovable. Para usar o seu próprio domínio lá, confira os planos do Lovable.
• O domínio da imobiliária (ex.: suaimobiliaria.com.br), se for publicar com ele.

Passo 1: abra a aba "Crie seu site com IA"

No menu, abra INTEGRAÇÕES › API & Webhooks e clique na aba Crie seu site com IA. Ali está tudo o que a IA precisa: a chave do site, o texto pronto (o "prompt") e os links da documentação.

1. API & Webhooks — o item do menu Integrações onde ficam chaves, webhooks e o site com IA.
2. Crie seu site com IA — a aba deste tutorial.
3. Resumo — o que o site vai ter: seus imóveis sempre atualizados, contatos no funil e páginas prontas para o Google.
4. llms.txt — o resumo da API escrito para a IA ler. Ao lado ficam a Documentação e o OpenAPI, a versão completa.

Passo 2: crie a chave pública do site

O site precisa de uma chave pública para buscar os imóveis e enviar os contatos. Ela pode ficar no código do site, porque só lê o que o site já mostra e só envia formulários. Clique em Criar chave pública do site: a chave aparece no quadro e o prompt passa a trazê-la sozinho.

Na conta de demonstração não criamos a chave; por isso o prompt mostra o aviso COLE_AQUI_A_CHAVE_PUBLICA. Na sua conta, crie a chave antes de copiar o prompt. No texto deste tutorial ela aparece como vk_pub_SUA_CHAVE.

1. Aviso — diz que ainda não há chave pública na conta.
2. Criar chave pública do site — cria a chave com a permissão "Site no navegador". Depois ela aparece aqui, com o botão de copiar.
3. Chaves de API — a aba onde a chave fica listada e onde você limita os sites que podem usá-la (Passo 6).

Passo 3: copie o prompt do Lovable

Em 2. Escolha a ferramenta e copie o prompt, clique em Lovable. O texto já vem com o nome da imobiliária, o endereço da API, a sua chave e as instruções certas para o jeito que o Lovable trabalha. Clique no botão de copiar.

1. Lovable — escolhe o prompt feito para o Lovable.
2. Copiar prompt — copia o texto inteiro, pronto para colar.
3. Chave pública — a linha em que entra a sua chave. Sem chave criada, aparece o aviso para colar.
4. Documentação para a IA — manda o Lovable ler o resumo da API antes de começar.
5. Tecnologia — pede o site no padrão do Lovable e um mapa do site (sitemap) gerado na publicação, com os endereços de todos os imóveis.

Passo 4: confira o que o prompt pede à IA

Role o texto até Regras obrigatórias. São elas que garantem que o site funcione com o CRM: não inventar imóvel, mandar todo formulário para a Viniun e cuidar do Google. Você não precisa entender cada linha; se a IA desobedecer, cole a regra de novo na conversa.

1. Regras obrigatórias — o começo da lista de regras.
2. Formulários — todo formulário vai para a Viniun e vira lead, com a origem da visita (anúncio, Google etc.) e um campo escondido contra robôs.
3. Google (SEO) — uma página por imóvel, com título, descrição, foto de compartilhamento, dados estruturados e mapa do site.
4. Mapa — quando o endereço é sigiloso, o site mostra só um círculo da região, nunca o ponto exato.
5. Contato da imobiliária — o site mostra o WhatsApp e o telefone da imobiliária, nunca o do corretor.

Passo 5: cole o prompt e monte o site com Lovable

No Lovable, comece um projeto novo e cole o prompt inteiro na caixa de conversa. A IA monta as páginas e mostra a prévia ao lado. Depois peça ajustes em português, um de cada vez: "deixe o topo com uma foto de praia", "mostre 6 destaques na home", "troque a fonte dos títulos". Os dados continuam vindo da Viniun: cadastrou ou tirou um imóvel do ar no CRM, o site acompanha.

Se a prévia mostrar erro de acesso (403), a chave já está limitada a outros domínios: veja o Passo 6. Se aparecer a mensagem de chave inválida (401), confira se colou a chave pública inteira.

Passo 6: libere só os domínios do seu site

Por padrão a chave pública funciona em qualquer site. Para outro site não usar a sua chave, cadastre os domínios permitidos. Quem criou a chave pelo botão do Passo 2 faz isso no ícone de globo da chave, na aba Chaves de API. Quem prefere criar pela Nova chave preenche tudo de uma vez, como na tela abaixo. Um domínio por linha.

Coloque *.lovable.app (vale para todos os endereços de teste do Lovable), www.suaimobiliaria.com.br e também suaimobiliaria.com.br sem o www: a Viniun compara o endereço exato.

1. Para que é esta chave? — um nome para você reconhecer depois, como "Site feito no Lovable".
2. Site no navegador — a permissão da chave pública. Ela não se combina com outras permissões.
3. Sites que podem usar — os domínios liberados, um por linha. O asterisco vale para qualquer começo de endereço.
4. Ajuda — lembra que, em branco, qualquer site pode usar a chave pública.
5. Criar — cria a chave. Ela aparece uma única vez: copie e guarde.

Passo 7: publique no Lovable e ligue o seu domínio

Pronto o visual, use o botão de publicar do Lovable. O site ganha um endereço de teste terminado em lovable.app. Para usar o domínio da imobiliária, procure a parte de domínios nas configurações do projeto e siga as instruções de apontamento (DNS) que o Lovable mostra. Prefere hospedar em outro lugar? O código pode ser exportado e subir na sua hospedagem: veja o tutorial de hospedagem.

Depois de publicar, volte ao quadro 3. Depois de publicar da Viniun e siga os três lembretes.

1. Limitar a chave — deixe a chave pública só com o domínio do site novo (Passo 6).
2. Contato de teste — preencha um formulário no site e confira o lead no funil (Passo 8).
3. Webhook de imóveis — opcional: avisa o site na hora que um imóvel entra ou sai do ar.

Passo 8: faça um contato de teste e confira o lead

Abra o site publicado, entre num imóvel e envie o formulário com seu nome e telefone. Em seguida abra CRM › Leads: o contato chega com a origem Site, entra no funil e segue o rodízio de corretores configurado na conta. Se você testar duas vezes com o mesmo telefone, a Viniun junta no mesmo lead em vez de duplicar.

1. Site — quantos leads chegaram pelo site.
2. Origens — filtre por "Site" para ver só os contatos que vieram dele.
3. Origem do lead — mostra que o contato veio do site.
4. Responsável — o corretor escolhido pelo rodízio, que já recebe o aviso para atender.

Quais são as dicas e os erros mais comuns?

• Site feito no Lovable e o Google: site que monta as páginas só no navegador é lido pior pelo Google. O prompt já pede o mapa do site; peça também ao Lovable para "pré-renderizar uma página estática por imóvel na publicação". Para SEO forte, exporte o código e gere páginas estáticas, como no tutorial de hospedagem.
• Imóvel novo não aparece: ele precisa estar publicado na Viniun. O site guarda as respostas por alguns minutos; espere e recarregue.
• Erro 403 depois de publicar: o endereço do site não está na lista de domínios da chave. Confira com e sem www.
• Nunca use chave secreta no Lovable: o código do Lovable roda no navegador, e quem abre o site consegue copiar a chave. Use só a pública (vk_pub_).
• Sem tempo para montar? A Viniun tem o site pronto, com modelos e editor de blocos: veja os modelos de site.

Próximos passos

• Tutorial: criar o site com ChatGPT, Claude, v0, Bolt ou Cursor
• Tutorial: hospedar o site na Hostinger, HostGator e outras
• Tutorial: montar o site pronto da Viniun
• Tutorial: configurar o rodízio de leads
• API, webhooks e integrações da imobiliária