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 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 o un formulario web 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. |
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. |
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:
En Kommo, ve a Pipelines. Abre el pipeline donde agregaste el botón de chat web. Haz clic en Automatiza.
Haz clic en el nombre del botón para abrir los ajustes.
Abre la pestaña Instalación.
Luego, puedes agregar el botón a Lovable de una de estas dos formas.
Usando tu propio prompt:
En la sección Pegar en el código de tu sitio web, copia el código del cuadro.
Agrega el código a tu propio prompt y describe dónde o cómo quieres que aparezca el botón.
Por ejemplo:
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]Envía el prompt en el chat de Lovable.
Usando el prompt listo para usar de Kommo:
Desplázate hacia abajo hasta Añadir a tu sitio web de Lovable y haz clic para abrir la sección.
Copia del cuadro el prompt listo para usar.
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.
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:
En Kommo, ve a Pipelines.
Abre el pipeline que contiene el formulario web.
Haz clic en Automatiza.
Selecciona el formulario web.
Abre la pestaña Instalación del formulario.
Copia el código del cuadro.
Para agregar el formulario en Lovable:
Abre tu proyecto de sitio web en Lovable.
En el chat de Lovable, describe dónde debe aparecer el formulario.
Por ejemplo:
Agrega este formulario web de Kommo a la sección Contacto de mi sitio web: [Copiar el código del formulario web de Kommo]Pega el código del formulario web de Kommo en el mismo mensaje.
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.
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.