O que você vai precisar:
Uma conta Kommo em qualquer plano ou um teste de 14 dias ativo.
Acesso de administrador na Kommo.
Um projeto de site no Lovable que você possa editar.
Para usar um botão de chat web, todos os canais de mensagens que você quiser exibir precisam estar conectados à Kommo.
Tenha em mente:
Teste toda a configuração antes de publicar seu site.
O Lovable é uma plataforma com IA que permite criar e atualizar sites usando prompts em linguagem natural. No chat do projeto, descreva a página, o layout, o conteúdo ou a funcionalidade que você precisa, e o Lovable gera as alterações para você.
Você pode conectar seu site do Lovable à Kommo adicionando um botão de chat web ou um formulário web da Kommo. Assim, as conversas e as informações enviadas pelo site vão para sua área de trabalho da Kommo, onde sua equipe pode continuar os chats e acompanhar os leads.
Este guia explica como adicionar um botão de chat web ou formulário web da Kommo ao seu projeto no Lovable e testar se a conexão está funcionando corretamente.
Casos de uso
Responder às perguntas dos visitantes — Permita que os visitantes entrem em contato com sua equipe sem sair do seu site do Lovable.
Oferecer várias opções de contato — Permita que os visitantes iniciem um chat ao vivo ou usem um canal conectado, como WhatsApp Business, Facebook Messenger ou Instagram.
Receber solicitações de demonstração ou consulta — Use um formulário web para coletar as informações de que sua equipe precisa antes de entrar em contato.
Qualificar leads — Adicione campos para informações como nome, endereço de email, número de telefone, empresa, localização, serviço de interesse ou orçamento.
Organizar os leads do site — Adicione o botão de chat ao pipeline correto e escolha o pipeline e a etapa de destino para os envios do formulário web.
Escolha como conectar o Lovable à Kommo
A Kommo oferece duas formas de capturar conversas e informações enviadas por um site do Lovable:
Opção | Melhor para | O que acontece na Kommo |
|---|---|---|
Botão de chat web | Perguntas gerais, solicitações de suporte e conversas em tempo real | A conversa aparece como um novo chat e um novo lead de entrada na Kommo. Saiba como criar um botão de chat web neste artigo. |
Formulário web da Kommo | Solicitações de contato, orçamento, demonstração, consulta e cadastro | A Kommo cria um lead no pipeline selecionado. Os dados do cliente são salvos nos campos correspondentes do lead, contato e empresa. Saiba como criar um formulário web neste artigo. |
Você pode adicionar uma das opções ou usar as duas. Por exemplo, adicione o botão de chat em todo o site para perguntas gerais e coloque um formulário web em uma página específica de contato ou demonstração.
Adicionar o botão de chat web ao Lovable
A Kommo oferece duas formas de adicionar o botão de chat web ao Lovable. Você pode copiar o código de instalação e incluí-lo no seu próprio prompt ou usar o prompt pronto da Kommo. Nos dois casos, envie o prompt no chat do Lovable, e ele adicionará o botão ao seu projeto.
Para adicionar o botão de chat web:
Na Kommo, acesse Pipelines. Abra o pipeline em que você adicionou o botão de chat web. Clique em Automatize.
.png)
Clique no nome do botão para abrir as configurações.
.png)
Abra a aba Instalação.
Depois, você pode adicionar o botão ao Lovable de uma destas duas formas.
Use seu próprio prompt:
Na seção Cole no código do seu site, copie o código da caixa.
.png)
Adicione o código ao seu próprio prompt e descreva onde ou como você quer que o botão apareça.
Por exemplo:
Adicione este botão de chat web da Kommo ao canto inferior direito de todas as páginas do meu site: [Cole o código do botão de chat web]Envie o prompt no chat do Lovable.
Use o prompt pronto da Kommo:
Role para baixo até Adicionar ao seu site Lovable e clique para abrir a seção.
Copie o prompt pronto da caixa.
.png)
Cole e envie o prompt no chat do Lovable.
O Lovable adicionará automaticamente o botão de chat web ao seu projeto.
Abra a prévia do site e confirme se o botão aparece na posição correta. Os visitantes podem usá-lo para iniciar um chat ao vivo ou escolher um dos canais de mensagens conectados ao botão.
Dica: Depois de adicionar o botão de chat ao site, envie uma mensagem de teste. Na Kommo, acesse Comunicações → Inbox do Chat e confirme se a mensagem aparece lá. Se a etapa Leads de entrada estiver ativada, verifique também se um novo lead foi criado no pipeline correto.
Adicione um formulário web da Kommo ao Lovable
A Kommo fornece o código do formulário web de que o Lovable precisa para adicionar o formulário ao seu site. Copie o código, cole-o no chat do Lovable e descreva onde você quer que o formulário apareça. O Lovable adicionará o formulário web ao seu projeto.
Para copiar o código do formulário:
Na Kommo, acesse Pipelines.
Abra o pipeline que contém o formulário web.
Clique em Automatize.
Selecione o formulário web.
.png)
Abra a aba Posicionamento do Formulário.
Copie o código da caixa.
Para adicionar o formulário no Lovable:
Abra seu projeto de site no Lovable.
No chat do Lovable, descreva onde o formulário deve aparecer.
Por exemplo:
Adicione este formulário web da Kommo à seção Fale conosco do meu site: [Cole o código do formulário web da Kommo]Cole o código do formulário web da Kommo na mesma mensagem.
Envie o prompt.
Revise a página gerada e confirme se o formulário completo aparece no local correto e combina com o restante do site.
Dica: Depois de adicionar o formulário web ao site, teste-o enviando dados de contato de exemplo. Verifique se um novo lead é criado na Kommo e se todas as informações aparecem nos campos corretos.