--- title: "Conecte o Lovable à Kommo" slug: "connect-lovable" updated: 2026-08-14T08:48:15Z published: 2026-08-14T08:48:15Z canonical: "support.kommo.com/connect-lovable" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.kommo.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Conecte o Lovable à Kommo > [!NOTE] > **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](https://lovable.dev/) é 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](/resources/docs/pt-br/create-and-install-a-website-chat-button) ou um [formulário web](/resources/docs/pt-br/kommo-webforms-overview) 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**](/resources/docs/pt-br/create-and-install-a-website-chat-button)**.** | | **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**](/resources/docs/pt-br/manage-webforms-in-kommo)**.** | 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:** 1. 1. Na Kommo, acesse **Pipelines**. Abra o pipeline em que você adicionou o botão de chat web. Clique em **Automatize.** ![](https://cdn.document360.io/56933ead-06fc-4574-95de-8fa458a5db1d/Images/Documentation/image(359).png) 2. Clique no nome do botão para abrir as configurações. ![](https://cdn.document360.io/56933ead-06fc-4574-95de-8fa458a5db1d/Images/Documentation/image(360).png) 3. Abra a aba **Instalação**. Depois, você pode adicionar o botão ao Lovable de uma destas duas formas. 1. **Use seu próprio prompt:** 2. Na seção **Cole no código do seu site**, copie o código da caixa. ![](https://cdn.document360.io/56933ead-06fc-4574-95de-8fa458a5db1d/Images/Documentation/image(361).png) 3. Adicione o código ao seu próprio prompt e descreva onde ou como você quer que o botão apareça. Por exemplo: ```plaintext 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] ``` 4. Envie o prompt no chat do Lovable. **Use o prompt pronto da Kommo:** 1. Role para baixo até **Adicionar ao seu site Lovable** e clique para abrir a seção. 2. Copie o prompt pronto da caixa. ![](https://cdn.document360.io/56933ead-06fc-4574-95de-8fa458a5db1d/Images/Documentation/image(368).png) 3. 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. > [!NOTE] > **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: 1. Na Kommo, acesse **Pipelines**. 2. Abra o pipeline que contém o formulário web. 3. Clique em **Automatize**. 4. Selecione o formulário web. ![](https://cdn.document360.io/56933ead-06fc-4574-95de-8fa458a5db1d/Images/Documentation/image(369).png) 5. Abra a aba **Posicionamento do Formulário**. 6. Copie o código da caixa. Para adicionar o formulário no Lovable: 1. Abra seu projeto de site no Lovable. 2. No chat do Lovable, descreva onde o formulário deve aparecer. Por exemplo: ```plaintext Adicione este formulário web da Kommo à seção Fale conosco do meu site: [Cole o código do formulário web da Kommo] ``` 3. Cole o código do formulário web da Kommo na mesma mensagem. 4. 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. > [!NOTE] > **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.