Perfil
Panel
Cerrar sesión
Contenido
Puntos clave
- Cuando tengas el código de integración de CompleteGreet, añadir una burbuja de vídeo a React o Vue consiste sobre todo en colocar el script en el lugar correcto y probarlo bien.
- Las reglas de visualización permiten elegir en qué páginas y situaciones aparece la burbuja, según las funciones disponibles.
- Prueba siempre la burbuja en dispositivos reales. Cambiar el tamaño de una ventana no permite detectar todos los problemas.
¿Cómo se instala CompleteGreet en un sitio React o Vue?
El principio es sencillo. Para añadir un widget de burbuja de vídeo a React o Vue, utiliza el código de integración disponible en tu cuenta de CompleteGreet. El widget se carga fuera del árbol de componentes. Revisa el método actual en tu panel, ya que puede variar según el producto y el proyecto.
Sigue estos pasos:
- Inicia sesión en el panel de CompleteGreet y abre la sección de instalación disponible en la navegación actual.
- Elige la plataforma de tu sitio. Para un proyecto React o Vue personalizado, utiliza la opción de HTML personalizado si está disponible.
- Copia todo el código asociado a tu sitio. Incluye el identificador que conecta el widget con tu cuenta.
- Abre el archivo HTML principal o el componente raíz del diseño, coloca el código donde indiquen las instrucciones actuales y guarda los cambios.
- Inicia el servidor de desarrollo y abre una página incluida en tus reglas. La burbuja debería aparecer en la posición configurada.
Si no aparece, revisa primero el dominio permitido, la consola, la caché y las reglas de visualización antes de cambiar la integración.
¿Y con Next.js o Nuxt?
En Next.js o Nuxt, el renderizado del lado del servidor exige una precaución adicional. El widget debe iniciarse en el navegador, no durante el renderizado del servidor.
En Next.js, utiliza el método de carga de scripts recomendado para tu versión y arquitectura. El componente Script puede ser adecuado, pero elige la estrategia después de medir su efecto en la página y comprobar la hidratación.
En Nuxt, un plugin que solo se ejecute en el cliente puede impedir que el código se inicie durante el renderizado del servidor. El nombre del archivo y su registro dependen de la versión de Nuxt. Sigue la documentación actual del proyecto para evitar errores relacionados con el objeto window.
Después de la carga, el comportamiento depende de las reglas definidas en CompleteGreet y del enrutador. Prueba cada cambio de ruta en vez de suponer que el widget se mantiene o se vuelve a cargar correctamente.
¿Qué puedes personalizar en React o Vue?
Segmentación de páginas y visitantes
Las reglas de URL pueden limitar la burbuja a ciertas rutas, como la página de precios o una demostración. Puede haber otros criterios según la configuración actual. Utiliza solo los que puedas verificar.
Las reglas suelen configurarse en el panel, no en el código del sitio. Así el equipo puede ajustar la visibilidad sin modificar la aplicación, siempre que tenga los permisos y funciones necesarios.
Acciones de los botones y comportamiento al hacer clic
El botón de la burbuja puede llevar a una URL, un calendario u otra acción compatible. Elige una acción clara y prueba el recorrido completo.
Una integración con React o Vue también puede escuchar eventos si la API actual lo permite. Comprueba los métodos disponibles y evita vincular el widget al estado principal de la aplicación sin necesidad.
Campos de formulario y gestión de contactos
Puedes mostrar un formulario breve si esta función está disponible. Limita los campos a los datos necesarios y explica con claridad para qué se recopilan.
Los datos pueden guardarse en el panel o enviarse al destino configurado. Prueba los webhooks, el CRM, las notificaciones y el consentimiento con datos de prueba.
Identidad visual y posición
Ajusta los colores, la imagen y la posición con las opciones disponibles. Prueba las esquinas inferiores y cualquier posición personalizada junto a menús, chats, carritos y avisos de cookies.
Entre los mejores widgets de vídeo para aplicaciones modernas, la mejor opción depende principalmente del control visual, las reglas de visualización, el rendimiento y la compatibilidad con tu proyecto.
–cg-primary: #3D5ACE;
–cg-accent: #E48333;
–cg-bg: #f7f7fb;
–cg-border: #e2e2ea;
–cg-text: #1a1a2e;
–cg-text-sec: #4a4a68;
–cg-text-muted: #7a7a96;
–cg-white: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
background: var(–cg-bg);
border: 1px solid var(–cg-border);
border-radius: 12px;
max-width: 600px;
margin: 0 auto;
overflow: hidden;
}
#cg-ig-PL8 .cg-accent-bar {
height: 4px;
background: var(–cg-primary);
}
#cg-ig-PL8 .cg-header {
padding: 24px 24px 16px;
text-align: center;
}
#cg-ig-PL8 .cg-header h3 {
margin: 0 0 8px;
font-size: 20px;
font-weight: 700;
color: var(–cg-text);
line-height: 1.3;
}
#cg-ig-PL8 .cg-header p {
margin: 0;
font-size: 14px;
color: var(–cg-text-sec);
line-height: 1.5;
}
#cg-ig-PL8 .cg-progress {
display: flex;
justify-content: space-between;
padding: 0 32px 24px;
position: relative;
}
#cg-ig-PL8 .cg-progress::before {
content: ”;
position: absolute;
top: 12px;
left: 48px;
right: 48px;
height: 2px;
background: var(–cg-border);
z-index: 0;
}
#cg-ig-PL8 .cg-progress-step {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(–cg-white);
border: 2px solid var(–cg-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(–cg-text-muted);
position: relative;
z-index: 1;
}
#cg-ig-PL8 .cg-progress-step.active {
border-color: var(–cg-primary);
background: var(–cg-primary);
color: var(–cg-white);
}
#cg-ig-PL8 .cg-progress-step.complete {
border-color: var(–cg-primary);
background: var(–cg-white);
color: var(–cg-primary);
}
#cg-ig-PL8 .cg-steps {
padding: 0 24px 24px;
}
#cg-ig-PL8 .cg-step {
display: flex;
gap: 16px;
margin-bottom: 20px;
position: relative;
}
#cg-ig-PL8 .cg-step:last-child {
margin-bottom: 0;
}
#cg-ig-PL8 .cg-step-badge {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(–cg-primary);
color: var(–cg-white);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
#cg-ig-PL8 .cg-step-content {
flex: 1;
background: var(–cg-white);
border: 1px solid var(–cg-border);
border-radius: 8px;
padding: 16px;
}
#cg-ig-PL8 .cg-step-title {
font-size: 15px;
font-weight: 600;
color: var(–cg-text);
margin: 0 0 6px;
}
#cg-ig-PL8 .cg-step-desc {
font-size: 13px;
color: var(–cg-text-sec);
margin: 0 0 12px;
line-height: 1.5;
}
#cg-ig-PL8 .cg-code-block {
background: #1a1a2e;
border-radius: 6px;
padding: 12px 40px 12px 12px;
position: relative;
overflow-x: auto;
}
#cg-ig-PL8 .cg-code-block pre {
margin: 0;
font-family: “SF Mono”, Monaco, “Cascadia Code”, “Roboto Mono”, Consolas, “Courier New”, monospace;
font-size: 12px;
line-height: 1.6;
color: #e2e2ea;
white-space: pre-wrap;
word-break: break-word;
}
#cg-ig-PL8 .cg-code-block .cg-copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: var(–cg-accent);
color: var(–cg-white);
border: none;
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
cursor: default;
}
#cg-ig-PL8 .cg-cta {
padding: 0 24px 24px;
text-align: center;
}
#cg-ig-PL8 .cg-cta-btn {
display: inline-block;
background: var(–cg-primary);
color: var(–cg-white);
text-decoration: none;
font-size: 15px;
font-weight: 600;
padding: 14px 28px;
border-radius: 8px;
transition: background 0.2s;
}
#cg-ig-PL8 .cg-cta-btn:hover {
background: #2f48a8;
}
#cg-ig-PL8 .cg-source {
text-align: center;
padding: 0 24px 20px;
font-size: 11px;
color: var(–cg-text-muted);
}
#cg-ig-PL8 .cg-source a {
color: var(–cg-text-muted);
text-decoration: none;
}
@media (max-width: 480px) {
#cg-ig-PL8 .cg-header {
padding: 20px 16px 12px;
}
#cg-ig-PL8 .cg-progress {
padding: 0 20px 20px;
}
#cg-ig-PL8 .cg-progress::before {
left: 32px;
right: 32px;
}
#cg-ig-PL8 .cg-steps {
padding: 0 16px 20px;
}
#cg-ig-PL8 .cg-step {
gap: 12px;
}
#cg-ig-PL8 .cg-step-content {
padding: 14px;
}
#cg-ig-PL8 .cg-cta {
padding: 0 16px 20px;
}
#cg-ig-PL8 .cg-cta-btn {
padding: 12px 20px;
font-size: 14px;
width: 100%;
box-sizing: border-box;
}
}
Asistente de cinco pasos para instalar una burbuja de vídeo de CompleteGreet en React o Vue, desde la creación de la cuenta hasta las pruebas previas a la publicación.
Instalar CompleteGreet en React o Vue
Añade una burbuja de vídeo a tu sitio React o Vue con estos pasos
Crear la cuenta
Crea tu cuenta de CompleteGreet y obtén en el panel el identificador o el código asociado a tu sitio.
Elegir el método de instalación
Utiliza el script o el método que muestre tu cuenta para la versión actual del proyecto.
Código de instalación proporcionado por CompleteGreet
Añadir la integración
Coloca el script o el componente en el lugar recomendado del archivo principal o del diseño raíz.
Integración de CompleteGreet disponible en tu panel
Configurar el sitio
Añade el identificador del sitio y define la posición y las reglas de visualización en la configuración actual.
Configuración con el identificador de tu sitio
Personalizar y publicar
Añade el vídeo, ajusta el aspecto y prueba la burbuja antes de publicar la configuración.
Consulta los datos HTML estáticos anteriores para ver todos los detalles.
¿Qué debes comprobar antes de publicar?
Antes de publicar, prueba la burbuja en dispositivos reales. Cambiar el tamaño del navegador no siempre reproduce el comportamiento de Safari en iOS, Chrome en móvil o los elementos flotantes de tu interfaz.
Mide los Core Web Vitals antes y después de instalarla. Comprueba si el widget cambia de forma apreciable el LCP, el CLS o la capacidad de respuesta de la página. Las recomendaciones de Google sobre Web Vitals te ayudan a interpretar las mediciones actuales. Utiliza tus propios datos y corrige cualquier desplazamiento del diseño que observes durante la carga.
Revisa la segmentación en cada ruta. En React y Vue, el widget puede mantenerse o reiniciarse al navegar según dónde esté colocado el código y qué enrutador utilices.
Confirma que el saludo solo aparece en las URL previstas y que no se muestra durante el pago, en zonas privadas ni en páginas donde pueda dificultar una tarea.
Ten en cuenta también el consumo de datos en móvil.
No inicies un vídeo pesado sin una acción del visitante. Una miniatura clara y un botón de reproducción le dan más control y evitan descargas innecesarias.
Los conflictos de capas son frecuentes en sitios reales. Abre el menú móvil, el carrito, las ventanas modales y el aviso de consentimiento para comprobar que la burbuja no tapa nada ni queda escondida detrás de otro elemento.
Recorre también todo el proceso como visitante sin iniciar sesión. Borra los datos de prueba y avanza desde la página de entrada hasta la acción principal. La burbuja de vídeo debe acompañar el recorrido sin interrumpir ningún paso importante.
Añadir una burbuja de vídeo a React o Vue suele consistir en cargar un código independiente de la aplicación. El método exacto depende de la versión del producto, el renderizado del servidor y la arquitectura del sitio.
La secuencia siguiente muestra las comprobaciones principales: identificar el sitio, colocar el código en la estructura principal, revisar las rutas y probar el resultado real.
Empieza en el panel de CompleteGreet, añade el dominio correspondiente y elige el método adecuado para tu entorno actual.
Copia el código de instalación que aparece para ese sitio. Utiliza tu identificador real y no reutilices un ejemplo de otra cuenta.
Ejemplo de script de CompleteGreet con el identificador de tu sitio- Abre el archivo HTML principal, el componente de diseño o el mecanismo de scripts recomendado por tu entorno.
- Coloca el código según las instrucciones actuales. Si utilizas renderizado del servidor, asegúrate de que la inicialización que depende del navegador solo se ejecuta en el cliente.
- Guarda los cambios, reinicia el servidor de desarrollo si es necesario y abre directamente una página incluida en tus reglas.
No supongas que una carga asíncrona elimina cualquier impacto. Mide el renderizado, la red y la capacidad de respuesta antes y después de añadir el widget.
Con React Router o Vue Router, prueba la navegación en ambos sentidos. Confirma que las reglas de URL, el estado de reproducción y el cierre siguen funcionando de forma coherente.
Los resultados comerciales dependen del tráfico, el vídeo, la oferta y la página. Mide los clics, los contactos y las conversiones de tu sitio antes de atribuir un efecto al widget.
Prueba en ordenador y móvil antes de publicar. La burbuja debe mantenerse visible sin tapar el contenido y cualquier solicitud de permiso debe respetar las recomendaciones de accesibilidad del W3C para que el widget pueda entenderse y controlarse tanto con el teclado como con un lector de pantalla.
Preguntas frecuentes
¿Cómo añado CompleteGreet a React sin aumentar innecesariamente el bundle?
Utiliza el método de integración recomendado en tu cuenta y carga el código fuera del bundle principal cuando esté previsto. Aun así, mide el peso de red, la ejecución y el renderizado de tu aplicación.
¿Por qué la burbuja de CompleteGreet no aparece durante el desarrollo local?
Comprueba primero que la dirección local y su puerto estén permitidos en los ajustes del sitio. Después revisa las reglas de URL, el consentimiento, la consola, los bloqueadores y la caché.
¿CompleteGreet ralentiza una aplicación React?
El efecto depende del vídeo, el método de carga, la red y la aplicación. Compara los Core Web Vitals y las solicitudes antes y después de instalarlo en vez de confiar en una promesa general.
¿Se pueden mostrar vídeos distintos según las rutas de React Router?
Las reglas de página o la API actual pueden permitir adaptar el contenido según la URL. Configura las campañas disponibles y prueba cada ruta, incluido el uso de los botones de avance y retroceso del navegador.
¿CompleteGreet funciona con frameworks React renderizados en el servidor, como Next.js?
Una integración del lado del cliente puede funcionar con Next.js y otros entornos SSR. Utiliza el método recomendado para tu versión e impide que el código dependiente del navegador se ejecute durante el renderizado del servidor.
¿Qué plan debería elegir para una aplicación SaaS React con 10.000 visitantes al mes?
Consulta los precios actuales y la definición de visitante antes de elegir. Revisa también los límites, los excesos, el número de sitios y las funciones incluidas, ya que estos elementos pueden cambiar.
