Cómo añadir una videoburbuja a cualquier web (HTML)

¿Cómo instalar CompleteGreet en HTML?

Añadir una videoburbuja a un sitio HTML sencillo puede hacerse con un script y pruebas en las páginas publicadas. El mismo enfoque sirve para sitios estáticos, aplicaciones de una sola página y cualquier proyecto que sirva HTML directamente.

Este es el orden habitual:

1. Crea tu cuenta y abre el panel: Regístrate en CompleteGreet y entra en el panel principal. Busca el botón azul «New Widget» en la esquina superior derecha y haz clic. El creador se abrirá con una plantilla vacía y un botón para grabar vídeo.
2. Graba o sube tu saludo: Haz clic en el grabador para filmar desde el navegador o sube un MP4 desde el ordenador. La vista previa muestra cómo se verá la burbuja en escritorio y móvil. Mantén el vídeo breve y comprueba la velocidad de la página.
3. Configura el aspecto: Usa la barra lateral izquierda para definir la posición de la burbuja, elegir el color de marca con el selector hexadecimal y subir una foto de perfil. El avatar aparece antes de reproducir el vídeo.
4. Define la llamada a la acción: Abre la pestaña «Interactions» para añadir el texto del botón, como «Reservar una llamada» o «Ver precios», y su URL. También puedes activar un formulario de captación de correo si esa función está disponible.
5. Copia el código de instalación: Haz clic en «Save & Get Code» en la parte superior. Se abrirá una ventana con un script. Cópialo y pégalo justo antes de la etiqueta de cierre body en tu archivo HTML. El script se carga de forma asíncrona para no bloquear la representación de la página.

Ese es todo el proceso. Comprueba la siguiente carga de la página para confirmar que aparece el widget.

Si utilizas un generador estático como Jekyll, Hugo o Eleventy, pega el mismo script en la plantilla base. En aplicaciones de una sola página creadas con React o Vue, el código puede funcionar después de montar el DOM, pero debes probar los cambios de ruta. No necesitas instalar npm para este enfoque.

Un detalle que muchas personas pasan por alto es que la etiqueta script incluye un atributo data-widget-id que vincula la instalación con un widget concreto. Si creas widgets distintos para varias páginas, cada uno tendrá su propio identificador. El panel permite duplicarlos cuando quieras reutilizar un saludo.

Prueba la instalación en una ventana privada. La burbuja debería aparecer en una esquina después de cargar la página. Si no aparece, revisa la consola del navegador y comprueba que el widget esté activo en el panel.

¿Qué puedes personalizar en HTML?

En un sitio HTML, casi todo funciona como en una plataforma gestionada. La diferencia principal es que tú controlas la segmentación por página mediante tu propia lógica y no con un selector del panel.

La segmentación por página en HTML se basa en la URL.

Puedes hacer que el widget aparezca solo en determinadas rutas añadiendo un atributo data sencillo al código de inserción. Muchos equipos lo utilizan para mostrar saludos distintos en la página de precios y en el blog. Si el sitio funciona como una aplicación de una sola página, tendrás que actualizar el widget manualmente cuando cambie la ruta mediante la API de JavaScript. Esta es una de las partes que requiere más trabajo que instalar una aplicación de Shopify.

Llamadas a la acción y formularios

Los botones de llamada a la acción del widget se pueden editar. Puedes enlazarlos a Calendly, a un checkout de Stripe o a un enlace mailto. Muchos equipos usan un botón para reservar una llamada y otro para ver una demostración.

Los campos del formulario permiten personalizar la experiencia.

Tú decides qué campos mostrar: nombre, correo, teléfono o una pregunta sobre presupuesto o plazos. El formulario puede aparecer antes del vídeo para solicitar datos o después para captar contactos interesados. Los sitios HTML también pueden enviar los datos directamente a tu propio endpoint en lugar del sistema de notificaciones predeterminado, si necesitas que lleguen al CRM interno.

Marca y posición

El color, el tamaño y la posición de la burbuja se pueden ajustar desde el panel. En HTML también puedes sobrescribirlos con CSS si necesitas un tono de marca que no esté entre las opciones predeterminadas. La posición inicial suele ser abajo a la derecha con un pequeño margen, pero en páginas de producto con mucho tráfico quizá funcione mejor la izquierda si allí no compite con el chat. Muchas herramientas de videoburbujas mantienen su marca en los planes gratuitos. Comprueba las condiciones actuales de CompleteGreet para saber qué ocurre en los planes de pago.

Un detalle que causa problemas en algunas instalaciones HTML es el z-index.

Si la barra de navegación o una ventana modal tienen un z-index alto, la videoburbuja puede quedar debajo. Puedes corregirlo con una regla CSS para el contenedor del widget, pero prueba el resultado con tu tema. Como el script se carga de forma asíncrona, coloca la regla en la hoja de estilos principal y no dentro del código de inserción.

<script src="https://app.completegreet.com/widget.js" data-id="YOUR_ID" async></script>

<body> <!-- Contenido de tu página --> <script src="https://app.completegreet.com/widget.js" data-id="YOUR_ID" async></script>
</body>

Consulta los datos HTML estáticos anteriores para ver todos los detalles.

¿Qué debes comprobar antes de publicar?

Abre el sitio en Chrome, Safari y Firefox antes de anunciar nada. La videoburbuja debe quedar en una esquina sin tapar la navegación ni los botones del pie.

El móvil importa todavía más.

Muchos visitantes verán el widget desde un teléfono. Abre el sitio en Safari de iOS y Chrome de Android. La burbuja debe adaptarse sin forzar la reproducción a pantalla completa y el botón de cierre debe quedar al alcance del pulgar. Si cubre el menú móvil o el botón de pago, ajusta su posición en el panel.

Comprueba que las reglas de segmentación funcionan. Visita páginas donde el widget no debería aparecer y confirma que permanece oculto. Verifica que solo se carga en las URL incluidas en tu configuración.

Haz una prueba de velocidad con Google PageSpeed Insights después de instalarlo. Los recursos de vídeo pesan. Si empeora el LCP, comprueba la carga asíncrona y el tamaño del archivo y vuelve a medir la página real.

Prueba los envíos del formulario de principio a fin. Rellena el formulario de contacto del widget, envíalo y confirma que el contacto llega a tu bandeja de entrada o CRM. Un formulario roto daña la confianza rápidamente.

<script src="https://cdn.completegreet.com/widget.js" data-site-id="YOUR_ID" async></script>

Preguntas frecuentes

¿Cómo añado CompleteGreet a un sitio HTML sin editar archivos de código?

En un sitio HTML debes insertar el script en algún lugar. Muchos creadores y plataformas tienen un widget HTML o una sección de código personalizado para añadir el fragmento sin tocar los archivos principales. Copia el código de inserción de CompleteGreet, abre el editor HTML o el área de inyección de código y pégalo antes de la etiqueta de cierre body. La burbuja debería aparecer después de publicar y comprobar la página.

¿Dónde debo pegar exactamente el script de CompleteGreet en mi HTML?

Pega el script justo antes de la etiqueta de cierre body en cada página donde quieras mostrar la burbuja. Esta posición deja que el resto de la página cargue primero. El script es ligero y asíncrono. Si solo quieres el widget en algunas páginas, añádelo a esos archivos HTML o utiliza las reglas de segmentación del panel.

¿Por qué no aparece mi videoburbuja en el modo de vista previa HTML?

La burbuja puede ocultarse en las vistas previas por las reglas de seguridad del navegador o por un iframe aislado. Comprueba la web publicada en lugar de la vista previa del editor. Algunos editores HTML eliminan JavaScript, lo que impide que se renderice el widget. Publica la página y ábrela en una pestaña normal. Si sigue sin aparecer, verifica que el script no esté dentro de un comentario ni rodeado de etiquetas que impidan su ejecución.

¿Puedo mostrar CompleteGreet solo en páginas HTML concretas, como la de precios?

Sí. Añade el script solo a los archivos HTML donde quieras mostrar la burbuja y omítelo en el resto. También puedes colocarlo en todo el sitio y usar reglas de URL en el panel de CompleteGreet para mostrar u ocultar el widget según la ruta. Este enfoque funciona en sitios HTML estáticos, pero debes probar las reglas.

¿CompleteGreet ralentiza un sitio HTML?

El script se carga de forma asíncrona después del contenido, pero el resultado depende de la red, el dispositivo, los vídeos y los demás scripts. Mide la velocidad con Google PageSpeed Insights antes y después. Los archivos de vídeo pueden cargarse bajo demanda, aunque conviene colocar el script en una ubicación que puedas probar y mantener.

¿Cómo pruebo la videoburbuja en un móvil para mi sitio HTML?

Abre la página publicada en un teléfono real o utiliza el modo de dispositivo de Chrome DevTools. Toca la burbuja para probar la reproducción y el formulario. Comprueba que el botón de cierre sea fácil de pulsar y que el widget no cubra botones de pago, menús ni otros elementos importantes.

¿Cuánto cuesta CompleteGreet al mes?

Consulta la página de precios actual para conocer los planes, límites y condiciones. Los importes y las funciones pueden cambiar, así que no uses precios antiguos ni supongas que todos los planes incluyen vídeos o personalizaciones ilimitadas.