Guías por plataforma 29 de abril de 2026

Cómo añadir una videoburbuja a OpenCart

Aprende a instalar una videoburbuja en OpenCart, personalizarla, probarla en móvil y publicarla sin romper la tienda.

Cómo añadir una videoburbuja a OpenCart

Puntos clave

  • La instalación depende de la plataforma y del método elegido; sigue la guía actual y prueba el script antes de publicar.
  • Opciones para mejorar la experiencia sin editar el código del tema.
  • Abre tu tienda OpenCart en Chrome, Safari y Firefox antes de anunciar el cambio.

¿Cómo instalas CompleteGreet en OpenCart?

La instalación depende de la plataforma y del método elegido; sigue la guía actual y prueba el script antes de publicar.

Cómo instalar una videoburbuja en OpenCart

Empieza iniciando sesión en el panel de CompleteGreet y crea una cuenta gratuita si todavía no la tienes. Dentro del panel, ve a Installation > Get Code y copia el fragmento de JavaScript que aparece en el recuadro gris.

Ahora cambia al panel de administración de OpenCart.

  1. Ve a Design > Theme Editor en el menú lateral izquierdo.
  2. Selecciona tu tema activo en el desplegable de la parte superior. Muchas tiendas usan el tema predeterminado, pero revisa Extensions > Themes si no estás seguro.
  3. Haz clic en common > header.twig en el árbol de archivos de la izquierda. Este archivo se carga en todas las páginas.
  4. Desplázate hasta el final y busca la etiqueta body de cierre, que puede verse como o como {{ body_bottom }}, según la versión de OpenCart.
  5. Pega el fragmento de CompleteGreet en una línea nueva justo antes de esa etiqueta de cierre.
  6. Haz clic en el botón naranja Save de la esquina superior derecha.
  7. Si aparece un aviso de seguridad preguntando si deseas continuar con la edición, haz clic en Yes para confirmarlo.

Hay un detalle que suele confundir al principio: la caché del tema de OpenCart no muestra los cambios de inmediato.

Ve a Dashboard > Developer Settings, desactiva el interruptor Theme Cache y actualiza la tienda en una ventana privada. La videoburbuja debería aparecer en la esquina inferior derecha.

Si no aparece después de borrar la caché, comprueba si tienes instalada una extensión de seguridad como Aitoc Anti Spam o las herramientas de seguridad de iSenseLabs. A veces bloquean JavaScript insertado. Añade tu dominio a la lista permitida o crea una excepción para scripts externos de completegreet.com solo después de confirmar la necesidad.

¿Qué puedes personalizar en OpenCart?

Todo lo que influye en la conversión sin tocar el código. Desde el panel puedes controlar dónde aparece el widget, qué acción propone al visitante y cómo se ve en tu sitio.

Opciones de personalización de una videoburbuja de OpenCart

Segmentación de páginas y reglas de activación

Puedes hacer que el widget aparezca solo en determinadas URL, ocultarlo por completo en otras o usar distintas bienvenidas en cada página. Muchas tiendas OpenCart usan un saludo en las páginas de producto y otro durante el checkout.

La temporización de los activadores es un punto delicado. Un retraso demasiado corto interrumpe la navegación; uno demasiado largo hace que el visitante se vaya antes de verlo. En páginas de alta intención, como el carrito y el checkout, prueba distintos retrasos y compáralos con el recorrido del visitante; no uses un intervalo universal. Los activadores de intención de salida se disparan cuando el cursor abandona la ventana y permiten captar a quien solo estaba mirando antes de que cierre la pestaña.

El comportamiento en móvil necesita reglas propias. El panel permite desactivar el widget por completo en teléfonos o moverlo a la esquina superior izquierda, donde no tapará el menú hamburguesa.

Llamadas a la acción y campos del formulario

Cada saludo termina con un botón de llamada a la acción. Puedes enlazarlo a una página de producto, una herramienta de reserva o un formulario sencillo para captar correos. Pide solo los datos que necesites, como nombre, correo, teléfono o mensaje. La longitud adecuada depende de la página y debe comprobarse con datos propios.

El mensaje de éxito debe explicar qué ocurrirá después. En lugar de un «gracias» genérico, indica el siguiente paso con un plazo realista o una instrucción clara.

Marca, tamaño y animación

Elige un tamaño que mantenga visibles la navegación y los botones; prueba varias dimensiones en el tema activo para evitar solapamientos. También puedes subir una miniatura propia en lugar de mostrar un fotograma del vídeo.

Optimiza las miniaturas para que carguen rápido y comprueba el resultado en Safari y otros navegadores; el formato y el peso adecuados dependen del tema.

Las animaciones en reposo añaden un pulso sutil cuando el visitante no interactúa. Llama la atención, lo cual puede venir bien en páginas de producto y molestar durante el checkout, donde conviene evitar distracciones. Desactívala en cualquier página que recopile datos de pago.

Las conexiones con webhooks y CRM permiten enviar los contactos directamente a tus herramientas actuales. Consulta las integraciones para ver las plataformas compatibles. Si tu herramienta no aparece en la lista nativa, Zapier puede cubrir el resto. El webhook se activa justo al enviar el formulario, para que tu equipo reciba el contacto antes de que el visitante abandone la página.

Puedes configurar widgets distintos para productos, carrito y contacto si el panel lo permite. Define cada mensaje según la tarea y prueba sus resultados antes de ampliarlo. El panel guarda cada configuración como una campaña independiente, así puedes probar saludos diferentes sin volver a publicar el código.

Un detalle que suele confundir a quienes empiezan: OpenCart almacena JavaScript en caché de forma agresiva. Después de publicar un cambio del widget, borra la caché del sistema desde Extensions > Modifications > Refresh en el panel de administración. De lo contrario, los visitantes podrían ver el saludo anterior durante horas.

¿Qué debes comprobar antes de publicar?

Abre la tienda en Chrome, Safari y Firefox antes de anunciar el cambio. La videoburbuja debe quedar en una esquina sin tapar el menú de navegación ni el botón Añadir al carrito de las páginas de producto.

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

Una parte importante de tus visitantes puede ver el widget desde un teléfono. Carga la tienda en iOS Safari y Android Chrome. La burbuja debe adaptarse sin forzar la reproducción del vídeo a pantalla completa y el botón de cierre debe quedar al alcance del pulgar. Si tapa el menú móvil o el botón de checkout en el tema Journal, ajusta el desplazamiento desde el panel de CompleteGreet.

Verificación de la segmentación de páginas

Comprueba que las reglas de página funcionan. Si configuraste el widget solo para páginas de producto, visita la portada y confirma que permanece oculto. Después revisa una categoría y un producto. Una regla mal configurada puede mostrar la burbuja en todas las URL o hacer que desaparezca.

Ejecuta una prueba de velocidad con la guía de Google sobre Web Vitals tras la instalación. Los recursos de vídeo añaden peso. Si baja tu puntuación LCP, revisa si el script carga de forma asíncrona y cómo se entrega el archivo de vídeo. Mide la misma página antes y después, porque no hay una solución fija que garantice el resultado en todas las tiendas.

Prueba los envíos de formulario de principio a fin. Completa el formulario de contacto dentro del widget, envíalo y confirma que el contacto llega a tu bandeja o CRM. Un formulario que falla puede dañar la confianza; pruébalo de principio a fin.

Las páginas de producto de OpenCart suelen registrar muchas salidas en móvil cuando la descripción no responde a las preguntas inmediatas. Una videoburbuja puede ofrecer un punto de contacto visible con una persona real sin alterar el diseño del tema. Comprueba ese efecto con los datos de tu tienda.

Los datos siguientes describen los requisitos técnicos para insertar el script, los límites de personalización disponibles en el panel de OpenCart y las métricas concretas que conviene revisar antes de publicar.

Fórmula de implementación para hosting compartido

Antes de añadir vídeos, mide el peso total de la página en tiendas con alojamiento económico. Compara la portada antes y después de cargar el script y los recursos multimedia. Si el tiempo o el peso empeoran, retrasa la carga o revisa el plan de alojamiento con datos reales.

Lista de comprobación de accesibilidad

Las videoburbujas deben respetar las preferencias de movimiento reducido y los estándares de navegación con teclado. Revisa las pautas de accesibilidad de W3C para asegurarte de que el widget no atrapa el foco ni reproduce automáticamente audio que incumpla las pautas WCAG 2.1.

Los temas de OpenCart varían mucho en la estructura del encabezado y el pie. El script de la videoburbuja debe colocarse antes de la etiqueta body de cierre, que en muchos temas OpenCart 3.x y 4.x corresponde al archivo common/footer.twig.

Las pruebas deben dar prioridad al checkout en Safari y Chrome para móvil, porque estos navegadores manejan los elementos flotantes de forma distinta que en escritorio. Un diseño roto en el paso de pago puede anular el beneficio de la implementación.

Las tiendas que usan Journal 3 u otros temas muy personalizados quizá deban ajustar el valor z-index en CSS para evitar que el contenedor del vídeo quede detrás de las capas de navegación. El valor adecuado depende del tema, así que usa el mínimo necesario y compruébalo junto con menús, banners y ventanas modales.

Preguntas frecuentes

¿Cómo añado CompleteGreet a un tema de OpenCart sin editar el código?

Pega el código de inserción en el pie de página de la configuración del tema. El administrador de OpenCart tiene un editor de temas en Extensions > Themes donde puedes añadir JavaScript personalizado a la sección del pie. Así cargas el widget en todas las páginas sin tocar los archivos de plantilla. El script se ejecuta de forma asíncrona y no debería bloquear el renderizado.

¿Por qué no aparece la videoburbuja en la vista previa de OpenCart?

Borra la caché de OpenCart después de añadir el código. Los archivos del tema suelen permanecer en caché hasta que actualizas la caché del sistema desde System > Maintenance > Cache. Comprueba también que el código esté en el pie y no en el encabezado, porque algunos temas eliminan scripts del encabezado en ciertos tipos de página.

¿Puedo mostrar CompleteGreet solo en las páginas de producto de OpenCart?

Sí, usa las reglas de segmentación del panel de CompleteGreet para hacer coincidir las URL de producto de OpenCart. Suelen utilizar rutas como product/product o incluir /product/ en la dirección. Puedes limitar el widget a URL que contengan product_id o probar una expresión regular para categorías concretas. Comprueba el resultado con páginas de alta intención y no des por hecho que todas las tiendas usan la misma estructura.

¿CompleteGreet ralentiza una tienda OpenCart?

Cualquier script o vídeo de terceros puede afectar al rendimiento. La carga asíncrona ayuda, pero el resultado depende del tema, las imágenes, otros scripts, el dispositivo y la red. Mide Core Web Vitals antes y después, y comprueba cuándo se inicializa el vídeo con datos de tu tienda.

¿Cuánto cuesta CompleteGreet al mes?

El precio, los límites de visitantes, las funciones y el periodo de suscripción pueden cambiar. Consulta la página de precios actual y revisa cómo se mide el tráfico y el uso antes de elegir un plan.

Azad Habib

Azad Habib

CEO & Founder of CompleteGreet

Azad Habib is the founder of CompleteGreet. With a background in ecommerce and user experience, he works at the intersection of trust, clarity, and conversion to help businesses make their websites feel more human from the first click.