--- title: "Conecta Lovable con Kommo" slug: "connect-lovable" description: "Conecta tu sitio web de Lovablo a Kommo mediante un botón de chat web o un formulario web para captar conversaciones y leads." updated: 2026-08-11T09:40:53Z published: 2026-08-11T09:40:53Z 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. # Conecta Lovable con Kommo # > [!NOTE] > **Lo que necesitarás:** > > - Una cuenta de Kommo con cualquier plan o una prueba activa de 14 días. > - Acceso como administrador en Kommo. > - Un proyecto de sitio web en Lovable que puedas editar. > - Para usar un botón de chat web, los canales de mensajería que quieras mostrar deben estar conectados a Kommo. > > **Ten en cuenta:** > > - Prueba toda la configuración antes de publicar tu sitio web. [Lovable](https://lovable.dev/) es una plataforma impulsada por IA que te permite crear y actualizar sitios web mediante prompts de lenguaje natural. En el chat del proyecto, describe la página, el diseño, el contenido o la funcionalidad que necesitas, y Lovable generará los cambios por ti. Puedes conectar tu sitio web de Lovable con Kommo agregando un [botón de chat web](/resources/docs/es/create-and-install-a-website-chat-button) o un [formulario web](/resources/docs/es/manage-webforms-in-kommo) de Kommo. Esto envía a tu espacio de trabajo de Kommo las conversaciones del sitio web y la información enviada, para que tu equipo pueda continuar los chats y dar seguimiento a los leads. Esta guía explica cómo agregar un botón de chat web o un formulario web de Kommo a tu proyecto de Lovable y comprobar que la conexión funcione correctamente. ## Casos de uso - **Responder las preguntas de los visitantes** — Permite que los visitantes contacten a tu equipo sin salir de tu sitio web de Lovable. - **Ofrecer varias opciones de contacto** — Permite que los visitantes inicien un chat en vivo o usen un canal conectado, como WhatsApp Business, Facebook Messenger o Instagram. - **Captar solicitudes de demo o consulta** — Usa un formulario web para recopilar la información que tu equipo necesita antes de hacer seguimiento. - **Calificar leads** — Agrega campos para datos como nombre, correo electrónico, número de teléfono, compañía, ubicación, servicio de interés o presupuesto. - **Organizar los leads del sitio web** — Agrega el botón de chat al pipeline correcto y elige el pipeline y la etapa de destino para los envíos del formulario web. ## Elige cómo conectar Lovable a Kommo Kommo ofrece dos formas de captar conversaciones y la información enviada desde un sitio web de Lovable: | **Opción** | **Ideal para** | **Qué sucede en Kommo** | | --- | --- | --- | | Botón de chat web | Preguntas generales, solicitudes de soporte y conversaciones en vivo | La conversación aparece como un chat nuevo y un nuevo lead entrante en Kommo. Aprende a crear un botón de chat web en [este artículo](/resources/docs/es/create-and-install-a-website-chat-button). | | Formulario web de Kommo | Solicitudes de contacto, cotización, demo, consulta y registro | Kommo crea un lead en el pipeline seleccionado. Los datos del cliente se guardan en los campos correspondientes del lead, contacto y compañía. Aprende a crear un formulario web en [este artículo](/resources/docs/es/manage-webforms-in-kommo). | Puedes agregar cualquiera de las dos opciones o usar ambas. Por ejemplo, agrega el botón de chat en todo tu sitio web para responder preguntas generales y coloca un formulario web en una página específica de contacto o demo. ## Agrega el botón de chat web a Lovable Kommo te ofrece dos formas de agregar el botón de chat web a Lovable. Puedes copiar el código de instalación e incluirlo en tu propio prompt o usar el prompt listo para usar de Kommo. En ambos casos, envía el prompt en el chat de Lovable y Lovable agregará el botón a tu proyecto. **Para agregar el botón de chat web:** 1. En Kommo, ve a **Pipelines**. Abre el pipeline donde agregaste el botón de chat web. Haz clic en **Automatiza**. ![User interface displaying pipeline stages and lead management options in a CRM tool.](https://cdn.document360.io/56933ead-06fc-4574-95de-8fa458a5db1d/Images/Documentation/automate-es.png) 2. Haz clic en el nombre del botón para abrir los ajustes. ![Kommo interface displaying lead sources with highlighted chat button option.](https://cdn.document360.io/56933ead-06fc-4574-95de-8fa458a5db1d/Images/Documentation/add-chat-button-1-es.png) 3. Abre la pestaña **Instalación**. Luego, puedes agregar el botón a Lovable de una de estas dos formas. 1. **Usando tu propio prompt:** 2. En la sección **Pegar en el código de tu sitio web**, copia el código del cuadro. ![Installation instructions for a web chat button with code snippet and options.](https://cdn.document360.io/56933ead-06fc-4574-95de-8fa458a5db1d/Images/Documentation/add-caht-button-2-es.png) 3. Agrega el código a tu propio prompt y describe dónde o cómo quieres que aparezca el botón. Por ejemplo: ```plaintext Agrega este botón de chat web de Kommo en la esquina inferior derecha de cada página de mi sitio web: [Pegar el código del botón] ``` 4. Envía el prompt en el chat de Lovable. **Usando el prompt listo para usar de Kommo:** 1. Desplázate hacia abajo hasta **Añadir a tu sitio web de Lovable** y haz clic para abrir la sección. 2. Copia del cuadro el prompt listo para usar. ![Instructions for adding a chat button to a website using a script.](https://cdn.document360.io/56933ead-06fc-4574-95de-8fa458a5db1d/Images/Documentation/add-chat-button-3-es.png) 3. Pégalo y envíalo en el chat de Lovable. Lovable agrega automáticamente el botón de chat web a tu proyecto. Abre la vista previa del sitio web y comprueba que el botón aparezca en la posición correcta. Los visitantes pueden usarlo para iniciar un chat en vivo o elegir uno de los canales de mensajería conectados al botón. > [!NOTE] > **Consejo:** Después de agregar el botón de chat a tu sitio, envía un mensaje de prueba. En Kommo, ve a **Comunicaciones → Inbox** **de chat** y confirma que el mensaje aparezca allí. Si tienes activada la etapa Leads entrantes, comprueba que se cree un nuevo lead en el pipeline correcto. ## Agrega un formulario web de Kommo a Lovable Kommo proporciona el código del formulario web que Lovable necesita para agregar el formulario a tu sitio web. Copia el código, pégalo en el chat de Lovable y describe dónde quieres que aparezca el formulario. Lovable agregará el formulario web a tu proyecto. Para copiar el código del formulario: 1. En Kommo, ve a **Pipelines**. 2. Abre el pipeline que contiene el formulario web. 3. Haz clic en **Automatiza**. 4. Selecciona el formulario web. ![Kommo interface showing lead sources with highlighted web form option for leads.](https://cdn.document360.io/56933ead-06fc-4574-95de-8fa458a5db1d/Images/Documentation/add-webform-1-es.png) 5. Abre la pestaña **Instalación del formulario**. 6. Copia el código del cuadro. Para agregar el formulario en Lovable: 1. Abre tu proyecto de sitio web en Lovable. 2. En el chat de Lovable, describe dónde debe aparecer el formulario. Por ejemplo: ```plaintext Agrega este formulario web de Kommo a la sección Contacto de mi sitio web: [Copiar el código del formulario web de Kommo] ``` 3. Pega el código del formulario web de Kommo en el mismo mensaje. 4. Envía el prompt. Revisa la página generada y confirma que el formulario completo aparezca en el lugar correcto y coincida con el resto de tu sitio web. > [!NOTE] > **Consejo:** Después de agregar el formulario web a tu sitio, pruébalo enviándolo con datos de contacto de prueba. Comprueba que se cree un nuevo lead en Kommo y que todos los datos aparezcan en los campos correctos.