Cómo poner un chat de WhatsApp en tu web y automatizarlo

Recursos del video: lo que necesitas y cómo llevarlo más allá

Para armarlo necesitas una cuenta de HighLevel y tu WhatsApp Business conectado a tu subcuenta. Si no la tienes, aquí puedes probar HighLevel 30 días gratis.

• Tu WhatsApp conectado: en el video uso GoGHL, que conecta tu WhatsApp Business de siempre por QR. El paso a paso está en conectar WhatsApp Business a GoHighLevel, y aquí puedes probar GoGHL 7 días gratis.
• El mensaje automático para copiar: «Hola {{contact.first_name}}, hemos recibido tu mensaje. En breve nos ponemos en contacto contigo para darte atención personalizada.»
• Un link de prueba con UTMs, como el de un anuncio de Google, para ver la campaña en el contacto: https://tupaginaweb.com/?utm_source=google&utm_medium=cpc&utm_campaign=mi-campana&utm_term=limpieza-dental
• Para llevarlo un paso más allá: en el CRM para WhatsApp armo el pipeline y la oportunidad de cada lead, y en enviar WhatsApp automático en GoHighLevel le escribes a cada contacto nuevo, venga de donde venga.

Paso a paso

1. Entra a Sites → Chat widget → New y elige SMS / Email chat (02:08).
2. Elige la burbuja, el ícono de WhatsApp, el color verde y tu foto (03:12).
3. Cambia el mensaje de bienvenida: «¿Tienes preguntas? Escríbenos por WhatsApp» (04:16).
4. En Chat window, ajusta los textos, los campos (nombre, teléfono y correo) y el botón Enviar (05:13).
5. Deja activa la protección de spam y pon el mensaje de confirmación en español (07:38).
6. Instálalo: Get code para WordPress o Tag Manager (08:34), Settings → Chat widget en una web de HighLevel (09:40) o el código en AI Studio (10:34).
7. Crea un workflow con el trigger Customer Replied, el filtro Reply Channel = Chat Widget y tu widget, y agrega la acción Send WhatsApp Message con el mensaje de bienvenida (11:17).
8. Pruébalo con tu número y con un link con UTMs (12:12).

Por qué el botón de WhatsApp de tu web ya no te sirve

Si estás pensando en ponerle a tu web uno de esos botones que, cuando le das clic, te abren WhatsApp, olvídalo: es del siglo pasado (00:00). La persona se va a WhatsApp y ahí pierdes el rastro. No sabes quién era ni de qué anuncio venía, y si usas Google Analytics, a lo mucho ves que alguien hizo clic.

Ese clic no te sirve para optimizar absolutamente nada. No te dice qué campaña te trae clientes ni a cuál le estás tirando dinero.

Con el chat widget de HighLevel pasa otra cosa. La persona ve la burbuja de WhatsApp, le da clic y deja sus datos. En ese momento se guarda toda su información, hasta la campaña de la que vino, entra a tu CRM y arranca una automatización que le escribe por WhatsApp.

Y ojo, porque esto no es un simple chat de WhatsApp. Es el principio de un sistema de automatizaciones que puedes venderle a negocios locales (00:36): al dentista, al urólogo o a la empresa de paneles solares que hoy tiene el botón verde y no sabe cuál de sus anuncios funciona.

Si los leads de tu cliente llegan por anuncios de clic a WhatsApp, eso se rastrea de otra forma; lo explico en tracking de WhatsApp en GoHighLevel.

Cómo poner un chat de WhatsApp en tu página web con GoHighLevel

Vamos a ello. Para construirlo te vas a Sites y luego a Chat widget (02:08). Le das clic a New y te aparecen varios tipos de chat.

Por qué no se usa el widget de «WhatsApp»

Fíjate que hay una opción que dice WhatsApp chat. Esa es específicamente para la API de WhatsApp (02:40): si tú la usas, puedes elegirla. Si usas WhatsApp Business conectado con GoGHL, como yo, eliges SMS / Email chat.

La idea es que se vea como un WhatsApp para que la persona deje sus datos y tengas el rastreo. Por detrás, una automatización le manda el mensaje por tu WhatsApp. La realidad es que es un formulario con cara de WhatsApp, y eso es justo lo que lo hace mejor que el botón: guarda la información antes de que la persona se vaya.

Que se vea como WhatsApp

Tienes dos formas de mostrarlo (03:12): como burbuja en la esquina inferior derecha o embebido dentro de la página. A mí me gusta la burbuja; es la más natural porque casi todo mundo ya conoce esa interfaz.

En la apariencia eliges el ícono, y ahí está el de WhatsApp (03:44). Con ese ícono y un verde estilo WhatsApp ya parece que la persona te va a escribir por ahí. Cambia también a verde los otros elementos que vienen en azul: el borde del avatar y el mensaje del visitante.

Luego el mensaje de bienvenida (04:16). Yo puse «Hola, ¿tienes preguntas? Escríbenos por WhatsApp». Te recomiendo cambiar la foto del avatar por la tuya o la del negocio de tu cliente (04:48): la que trae por defecto la tienen miles de páginas.

La ventana del chat: textos, campos y botón

En la pestaña Chat window personalizas la ventana que se abre al darle clic (05:13). Cambia el «Have a question?» que viene en inglés por algo como «¿Tienes alguna pregunta? Déjanos tus datos y un experto se pondrá en contacto contigo».

En los campos, yo dejé nombre, teléfono y correo, más un mensaje de ejemplo como «Quiero más información sobre…» para que la persona no se quede en blanco (05:57). El teléfono es el campo que más importa, porque a ese número le va a llegar el WhatsApp.

Abajo puedes redirigir a la persona después de enviar: a otra página o incluso a WhatsApp con un botón de clic a WhatsApp (06:28). Yo lo dejé apagado. También puedes cambiar el «Powered by» por tu agencia o tu marca, y el chat se ve como si lo hubieras hecho tú (07:01).

Ten en cuenta una cosa: en el video quito los consentimientos porque es una prueba. En la web de un cliente déjalos; son los que te aseguran que cumples con los requisitos legales para pedir los datos de las personas.

Spam, confirmación e idioma

La protección de spam déjala como viene (07:38). Si detecta spam, etiqueta al contacto y le pone DND para que no le salgan mensajes; después tú revisas si de verdad lo era.

En Messaging configuras lo que ve la persona cuando le da Enviar (07:51): «Hemos recibido tu mensaje» y, si quieres, un teléfono. Ahí también eliges el idioma: español. Guardas y listo, así de sencillo.

Instalar el chat en WordPress, en una web de HighLevel o en AI Studio

Ya construiste el chat; ahora falta ponerlo en la web (08:34).

WordPress o Google Tag Manager

Dale clic a Get code. Si tu web está en WordPress y no usas Tag Manager, copias ese código y lo pegas en el cuerpo o en el footer de tu sitio. Si usas Tag Manager, en la otra pestaña está el código para instalarlo desde ahí (08:39).

Una web hecha en HighLevel

Es lo más fácil. Entra a la web en Sites, ve a Settings y abajo aparece la opción Chat widget (09:40). Eliges el que creaste, guardas y, al abrir la página, la burbuja ya está abajo a la derecha.

Una web de AI Studio

AI Studio es puro prompt (10:34). Copias el código con Get code, le escribes en el chat «instala este chat widget en el sitio web» y le pegas el código. Lo instala y ya te aparece en la vista previa (10:50). Guardas y publicas.

El WhatsApp automático: el trigger del chat widget

Para que a cada persona le llegue un mensaje en cuanto llena el chat, creas un workflow muy sencillo (11:17).

1. Elige el trigger Customer Replied (11:43).
2. En los filtros, selecciona Reply Channel y elige Chat Widget.
3. Elige el chat widget que acabas de crear, para que solo ese dispare la automatización.
4. Agrega la acción Send WhatsApp Message con el mensaje de bienvenida (está arriba, en los recursos) y el nombre del contacto. Con GoGHL, sale por tu WhatsApp Business.
5. Guarda y publica.

Ojo con una cosa: si ya tienes otra automatización que le escribe a cada contacto nuevo, a la persona le pueden llegar dos mensajes. Revisa que solo una le escriba.

Esta automatización la puedes complicar tanto como quieras (13:20): esperar 24 horas a ver si contesta, darle seguimiento si no, agregarlo al pipeline y crearle una oportunidad. Para empezar, con el mensaje de bienvenida basta.

La prueba: el lead en tu CRM y la campaña de la que vino

Refresca la página, abre el chat y llénalo con tu nombre, tu teléfono y tu correo (12:21). En Contactos, HighLevel ya creó el contacto. Fíjate en el ícono de la conversación: es el de webchat, y ahí está el mensaje que escribió la persona (12:51).

Y en el celular ya llegó el WhatsApp automático (12:55). La persona dejó sus datos, tú recibiste la información como dueño del negocio y le respondiste sin hacer nada.

De qué campaña vino cada lead

Ahora lo más importante. Si en tus campañas de Google Ads o Meta Ads usas UTM, abre tu página con esos parámetros, como el link de prueba de los recursos (13:44). Las UTM son los valores que le agregas al link de un anuncio para saber de qué campaña llegó cada prospecto.

Llena el chat otra vez. En el contacto, abre First Attribution (14:32): ahí aparece que vino de Google, por CPC, con el término «limpieza dental». No tuviste que hacer nada; HighLevel lo guardó solo.

Eso es lo que quiero que te quede claro: este chat, a diferencia de los otros, sí hace tracking (14:45). Con eso tomas mejores decisiones al mejorar las campañas de tus clientes y sabes a qué le vas a poner dinero. Si tus anuncios son de Meta, aquí te explico cómo configurar las UTM en Meta Ads.