The latest articles on DEV Community by Pedro Naranjo (@konversa). https://dev.to/konversa https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4166611%2F0bd69889-889a-42d1-96ae-44e7061eac87.png https://dev.to/konversa en Pedro Naranjo Sat, 10 Oct 2026 13:33:34 +0000 https://dev.to/konversa/enlace-de-whatsapp-con-mensaje-prellenado-como-armarlo-y-medir-que-canal-te-trae-clientes-2gn8 https://dev.to/konversa/enlace-de-whatsapp-con-mensaje-prellenado-como-armarlo-y-medir-que-canal-te-trae-clientes-2gn8 <p>Casi todos los negocios pequeños ponen "Escríbenos por WhatsApp" en su web o en su bio de Instagram, pero muchos lo hacen con un enlace que abre un chat vacío. El cliente tiene que pensar qué escribir, y una parte se rinde antes del primer mensaje. Un enlace con mensaje prellenado resuelve eso en cinco minutos y, además, te dice de dónde vino cada conversación.</p> <h2> 1. El formato del enlace </h2> <p>La estructura es siempre la misma:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>https://wa.me/NUMERO?text=MENSAJE_CODIFICADO </code></pre> </div> <ul> <li> <strong>NUMERO</strong>: el número completo en formato internacional, solo dígitos. Sin <code>+</code>, sin espacios, sin guiones ni ceros iniciales. Ejemplo: para un número de México sería <code>5215512345678</code>.</li> <li> <strong>text</strong>: el mensaje que aparecerá escrito en el chat, listo para enviar. Debe estar codificado para URL.</li> </ul> <p>Ejemplo real de estructura:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>https://wa.me/5215512345678?text=Hola%2C%20vi%20su%20web%20y%20quiero%20una%20cotizaci%C3%B3n </code></pre> </div> <h2> 2. Cómo codificar el mensaje sin complicarte </h2> <ul> <li>Espacio: <code>%20</code> </li> <li>Salto de línea: <code>%0A</code> </li> <li>Coma: <code>%2C</code> </li> <li>Tildes y eñes (á, é, ñ): se codifican solas si usas una herramienta, así que no las escribas a mano.</li> </ul> <p>Si no quieres hacerlo a mano, en cualquier consola del navegador puedes usar:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="nf">encodeURIComponent</span><span class="p">(</span><span class="dl">"</span><span class="s2">Hola, vi su web y quiero una cotización</span><span class="dl">"</span><span class="p">)</span> </code></pre> </div> <p>Copia el resultado después de <code>?text=</code> y listo.</p> <h2> 3. Usa un mensaje distinto por canal </h2> <p>Aquí está la ventaja que casi nadie aprovecha. Crea un enlace por cada lugar donde pones el botón y cambia la frase:</p> <ul> <li>Web, botón de la portada: "Hola, vi su web y quiero información".</li> <li>Instagram (bio): "Hola, los vi en Instagram y quiero preguntar por…".</li> <li>Tarjeta o volante con QR: "Hola, vi su tarjeta y quiero información".</li> <li>Google Business Profile: "Hola, los encontré en Google".</li> </ul> <p>Cuando llegue el mensaje, ya sabes qué canal funcionó sin instalar nada. Al final de la semana cuentas cuántas conversaciones trajo cada uno y decides dónde invertir tiempo.</p> <h2> 4. Si usas la app WhatsApp Business </h2> <p>La app incluye un <strong>enlace corto</strong> y un <strong>código QR</strong> que puedes personalizar con un mensaje de bienvenida predefinido (en Herramientas de empresa). Sirven igual para tarjetas, vitrinas y publicaciones impresas. El enlace con <code>wa.me</code> y <code>?text=</code> te da más control para diferenciar canales.</p> <h2> 5. Errores frecuentes </h2> <ul> <li>Poner el número con <code>+</code> o con espacios: el enlace no abre el chat correcto.</li> <li>Mensajes demasiado largos: mantén una frase corta y natural.</li> <li>Olvidar probarlo desde un celular y desde el computador antes de publicarlo.</li> <li>Poner el mismo enlace en todos los canales y perder la medición.</li> </ul> <h2> Cierre </h2> <p>Un enlace bien armado es una de las mejoras más baratas que puedes hacer a una web de negocio. En <a href="https://aikonversa.com" rel="noopener noreferrer">Konversa</a> construimos webs para pymes de LatAm con el botón de WhatsApp ya conectado y un asistente que responde mientras tú atiendes otras cosas.</p> <p>¿Qué mensaje prellenado te ha funcionado mejor en tu negocio? Te leo en los comentarios.</p> spanish whatsapp webdev beginners Pedro Naranjo Wed, 07 Oct 2026 13:41:18 +0000 https://dev.to/konversa/checklist-para-que-la-web-de-una-pyme-cargue-rapido-en-celulares-sin-rehacerla-3hkl https://dev.to/konversa/checklist-para-que-la-web-de-una-pyme-cargue-rapido-en-celulares-sin-rehacerla-3hkl <p>Muchos clientes de una pyme en LatAm llegan a su web desde un celular de gama media, con datos móviles y una señal irregular. Si la página tarda en mostrarse, el usuario vuelve a Instagram o al buscador antes de ver el botón de WhatsApp. La buena noticia: casi siempre se puede mejorar sin rehacer el sitio.</p> <p>Este es el checklist que usamos al revisar webs de negocios pequeños.</p> <h2> 1. Mide primero, con datos de campo </h2> <p>Abre <a href="https://pagespeed.web.dev/" rel="noopener noreferrer">PageSpeed Insights</a> y mira la versión móvil. Si el sitio tiene suficiente tráfico verás datos reales de usuarios (Core Web Vitals). Las tres métricas a vigilar:</p> <ul> <li> <strong>LCP</strong> (Largest Contentful Paint): idealmente 2,5 s o menos.</li> <li> <strong>INP</strong> (Interaction to Next Paint): 200 ms o menos.</li> <li> <strong>CLS</strong> (Cumulative Layout Shift): 0,1 o menos.</li> </ul> <p>No persigas el 100/100 del laboratorio; persigue que la página principal y la de precios se vean rápido en un celular real.</p> <h2> 2. Las imágenes suelen ser el 80 % del problema </h2> <p>La foto de portada de 4 MB tomada con el teléfono es el culpable más común.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"/img/portada-800.webp"</span> <span class="na">srcset=</span><span class="s">"/img/portada-480.webp 480w, /img/portada-800.webp 800w, /img/portada-1200.webp 1200w"</span> <span class="na">sizes=</span><span class="s">"100vw"</span> <span class="na">width=</span><span class="s">"1200"</span> <span class="na">height=</span><span class="s">"675"</span> <span class="na">alt=</span><span class="s">"Fachada de la panadería"</span> <span class="na">fetchpriority=</span><span class="s">"high"</span><span class="nt">&gt;</span> </code></pre> </div> <ul> <li>Exporta en <strong>WebP o AVIF</strong> y a un ancho razonable (casi nunca más de 1200 px).</li> <li>Declara <code>width</code> y <code>height</code> para que el diseño no "salte" (eso baja el CLS).</li> <li>Usa <code>loading="lazy"</code> en imágenes que están más abajo, <strong>pero no</strong> en la imagen principal: esa debe cargar primero.</li> </ul> <h2> 3. Cuidado con los scripts de terceros </h2> <p>Widgets de chat, píxeles, mapas incrustados y carruseles pesan más que el sitio mismo. Revisa cuáles aportan algo y carga el resto con <code>defer</code>. Un mapa de Google incrustado se puede reemplazar por una imagen estática con enlace a la ubicación.</p> <p>Para el contacto, un enlace directo a WhatsApp no necesita librerías:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"https://wa.me/TUNUMERO?text=Hola%2C%20vengo%20de%20la%20web"</span><span class="nt">&gt;</span>Escríbenos por WhatsApp<span class="nt">&lt;/a&gt;</span> </code></pre> </div> <h2> 4. Fuentes: menos familias, <code>font-display: swap</code> </h2> <p>Dos familias tipográficas con dos pesos cada una suelen bastar. Con <code>font-display: swap</code> el texto se ve de inmediato con una fuente del sistema mientras carga la definitiva.</p> <h2> 5. Caché y CDN </h2> <p>Si tu hosting lo permite, sirve archivos estáticos con encabezados de caché largos y detrás de un CDN. Es un cambio de configuración, no de diseño, y ayuda mucho a los visitantes que vuelven.</p> <h2> 6. Prueba como tu cliente </h2> <p>En Chrome DevTools activa la limitación de red "Fast 4G" o "Slow 4G" y la CPU en 4x. Navega desde la portada hasta el botón de WhatsApp. Si a ti te desespera, a tu cliente también.</p> <h2> Cierre </h2> <p>Una web rápida no es un lujo técnico: es la diferencia entre que el cliente vea tu oferta o se vaya. En <a href="https://aikonversa.com" rel="noopener noreferrer">Konversa</a> construimos webs para pymes de LatAm pensadas primero para celular y conectadas a WhatsApp, y estos seis puntos son lo primero que revisamos antes de publicar.</p> <p>¿Qué es lo que más te ha costado optimizar en un sitio pequeño? Te leo en los comentarios.</p> spanish webdev performance beginners Pedro Naranjo Tue, 06 Oct 2026 13:58:09 +0000 https://dev.to/konversa/como-conectar-un-chatbot-de-whatsapp-a-la-web-de-una-pyme-sin-sobreingenieria-4m3p https://dev.to/konversa/como-conectar-un-chatbot-de-whatsapp-a-la-web-de-una-pyme-sin-sobreingenieria-4m3p <p>Cuando una pyme en Latinoamérica pide "una web con chatbot", casi nunca necesita una plataforma enorme. Necesita que el cliente que llega desde Google o Instagram pueda escribir por WhatsApp en un clic y reciba respuesta al instante, aunque sea domingo. Esta es la arquitectura mínima que nos ha funcionado en Konversa.</p> <h2> 1. La web: rápida, estática y con un solo objetivo </h2> <p>La mayoría de visitas llega desde el celular con datos móviles. Una página liviana (HTML estático o un framework con render en servidor) que cargue en menos de dos segundos vende más que una web "bonita" de 8 MB. Cada sección debe empujar a una sola acción: escribir por WhatsApp.</p> <h2> 2. El botón: un enlace wa.me con mensaje prellenado </h2> <p>No hace falta un widget pesado. Un enlace como <code>https://wa.me/&lt;número&gt;?text=Hola%2C%20vengo%20de%20la%20web</code> abre WhatsApp con un mensaje listo. Truco útil: usa un texto distinto por página ("vengo de la página de precios") para saber de dónde viene cada conversación sin instalar nada más.</p> <h2> 3. El chatbot: WhatsApp Business Platform + un webhook </h2> <p>Para responder automáticamente necesitas la WhatsApp Business Platform (Cloud API). El flujo básico:</p> <ol> <li>Meta envía cada mensaje entrante a tu webhook (un endpoint HTTPS).</li> <li>Tu servidor identifica la intención: precio, horario, ubicación, agendar o "hablar con alguien".</li> <li>Respondes con una plantilla corta o con un modelo de IA limitado a la información real del negocio.</li> <li>Si la conversación necesita a una persona, marcas el chat y notificas al dueño.</li> </ol> <p>Regla de oro: el bot debe saber cuándo callarse. Transferir a un humano a tiempo vale más que diez respuestas automáticas.</p> <h2> 4. La base de conocimiento: una hoja, no un data lake </h2> <p>Precios, horarios, zonas de entrega, preguntas frecuentes y políticas caben en un documento corto. Si el dueño puede editarlo sin llamar a un programador, el bot se mantiene actualizado. Si no, en un mes estará respondiendo con precios viejos.</p> <h2> 5. Medir lo único que importa </h2> <p>Para una pyme no hacen falta veinte métricas. Mide tres:</p> <ul> <li>Conversaciones iniciadas desde la web por semana.</li> <li>Tiempo de primera respuesta.</li> <li>Conversaciones que terminan en venta o cita.</li> </ul> <h2> Errores que vemos seguido </h2> <ul> <li>Esconder el botón de WhatsApp al final de la página.</li> <li>Un bot que inventa respuestas porque no tiene límites claros.</li> <li>Formularios largos en lugar de una conversación.</li> <li>No revisar nunca las conversaciones reales para mejorar las respuestas.</li> </ul> <h2> Cierre </h2> <p>La tecnología es la parte fácil. Lo difícil es que el mensaje correcto llegue rápido. Si quieres ver cómo lo aplicamos en negocios reales, en <a href="https://aikonversa.com" rel="noopener noreferrer">Konversa</a> hacemos páginas web con chatbot de WhatsApp integrado para pymes de Latinoamérica, listas en unas 48 horas.</p> spanish whatsapp webdev chatbot