Perfil
Panel
Cerrar sesión
Índice
En pocas palabras
- CompleteGreet se añade desde la sección de inserción de código de Squarespace. Antes de empezar, comprueba que tu plan de Squarespace incluye esta función.
- Después de instalarlo, puedes controlar el aspecto de la burbuja, las páginas donde aparece y lo que ocurre cuando alguien hace clic.
- Antes de publicar, prueba la burbuja en ordenador y móvil. Revisa también las reglas de URL, el rendimiento, la accesibilidad y todas las acciones disponibles.
Para añadir una burbuja de vídeo a Squarespace, copia el código que te proporciona CompleteGreet en la sección de inserción de código. Después, pruébalo todo en el sitio publicado.
Los planes de CompleteGreet tienen límites basados en visitantes únicos. Consulta siempre la página de precios y tu cuenta para conocer las tarifas, la capacidad y las funciones incluidas en este momento.
La posibilidad de añadir código y scripts externos depende del plan de Squarespace que tengas. Revisa la documentación y los ajustes del sitio antes de continuar.
El tiempo necesario cambia según el plan, el vídeo, el diseño, las acciones y las pruebas que tengas que hacer.
CompleteGreet está pensado para saludos personales en vídeo y acciones claras. Te permite mostrar el lado humano de un sitio de Squarespace sin complicar el recorrido del visitante.
¿Cómo se instala CompleteGreet en Squarespace?
Para instalar CompleteGreet necesitas el código disponible en tu cuenta y acceso a la sección de inserción de código de Squarespace. El tiempo dependerá de tu sitio y de las pruebas que realices.
Una burbuja de vídeo es un pequeño elemento situado en una esquina del sitio. Puede mostrar un saludo tuyo o de tu equipo y dirigir al visitante hacia el siguiente paso. Nuestra guía sobre qué es una burbuja de vídeo explica de forma sencilla cómo funciona este tipo de widget.
Sigue estos pasos:
1. Crea una burbuja nueva en CompleteGreet y ponle un nombre fácil de reconocer, por ejemplo, Inicio Squarespace.
2. Graba o sube tu saludo en un formato compatible. Antes de subirlo, comprueba en tu cuenta los formatos permitidos y el límite de tamaño actual.
3. Elige la miniatura, la posición, los colores y el texto del botón. Podrás cambiar estos ajustes desde CompleteGreet sin tener que volver a insertar el código.
4. Publica la burbuja y copia completo el código de instalación asociado al sitio y al widget.
5. Abre la administración de Squarespace en una pestaña nueva. Busca los ajustes avanzados y la sección de inserción de código, que Squarespace utiliza para cargar scripts externos en el sitio. La documentación oficial de Squarespace muestra dónde debes colocar el código según el procedimiento actual.
6. Pega todo el código de CompleteGreet en el lugar indicado por la documentación actualizada. Comprueba que no falte ninguna parte.
7. Guarda los cambios en Squarespace.
8. Abre el sitio publicado en una ventana privada. Comprueba que la burbuja aparece, se abre y ejecuta las acciones elegidas. Si no aparece, recarga por completo la página y revisa la caché y el consentimiento para scripts.
La inserción de código puede estar reservada a determinados planes de Squarespace y las condiciones pueden cambiar. Antes de instalar, revisa tu plan actual y la documentación. Comprueba también que la plantilla y los ajustes de seguridad permiten cargar el script.
El recuento de visitantes únicos depende del plan de CompleteGreet activo. Encontrarás la definición y los límites actuales en la página de precios y en tu cuenta.
¿Qué puedes personalizar en Squarespace?
Puedes controlar el aspecto, el comportamiento y las acciones de la burbuja. Las opciones disponibles dependen del plan y de la versión que utilices. herramientas de burbujas de vídeo aplican reglas distintas para las URL, las acciones, la personalización y los límites.
Páginas y visitantes
Muestra la burbuja solo en las páginas donde resulte útil. Por ejemplo, puedes usarla en la página de inicio y ocultarla donde pueda molestar durante una acción importante. Revisa qué opciones ofrece tu cuenta para retrasos, grupos de visitantes y dispositivos.
Prueba por separado en móvil y ordenador, porque las plantillas de Squarespace pueden distribuir los elementos de manera distinta según la pantalla. La burbuja no debe tapar menús, botones importantes, formularios ni avisos de consentimiento.
Botones y formularios
Un botón puede abrir un calendario, un formulario, una página de producto u otra dirección relevante. Utiliza un texto corto que deje claro qué ocurrirá después del clic.
Si tu cuenta incluye formularios de contacto dentro del widget, puedes recoger el nombre y el correo electrónico sin sacar al visitante de la página. Pide solo los datos necesarios y revisa el consentimiento y la conservación de la información.
Identidad visual y apariencia
Combina los colores con la paleta de tu sitio de Squarespace. Elige también la miniatura, la posición y la distancia respecto a los bordes, dejando sitio para chats, avisos de consentimiento y botones fijos que ya existan.
Escoge un tamaño visible que no tape el contenido. No hay una medida que funcione en todas las plantillas, así que prueba la miniatura en varias páginas y dispositivos reales.
Después de cambiar el vídeo o la miniatura, la caché puede seguir mostrando la versión anterior. Recarga por completo la página y compruébala en una ventana privada.
#cg-ig-PL4 {
max-width: 600px;
margin: 0 auto;
background: #f7f7fb;
border: 1px solid #e2e2ea;
border-radius: 12px;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}
#cg-ig-PL4 .cg-accent-bar {
height: 4px;
background: #3D5ACE;
}
#cg-ig-PL4 .cg-content {
padding: 24px;
}
#cg-ig-PL4 .cg-title {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
line-height: 1.3;
}
#cg-ig-PL4 .cg-subtitle {
font-size: 14px;
color: #7a7a96;
margin: 0 0 24px 0;
line-height: 1.5;
}
#cg-ig-PL4 .cg-steps {
display: flex;
flex-direction: column;
gap: 0;
}
#cg-ig-PL4 .cg-step {
display: flex;
gap: 16px;
position: relative;
padding-bottom: 24px;
}
#cg-ig-PL4 .cg-step:last-child {
padding-bottom: 0;
}
#cg-ig-PL4 .cg-step:not(:last-child)::before {
content: ”;
position: absolute;
left: 15px;
top: 32px;
width: 2px;
height: calc(100% – 16px);
background: #e2e2ea;
}
#cg-ig-PL4 .cg-step-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: #3D5ACE;
color: #ffffff;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}
#cg-ig-PL4 .cg-step-content {
flex: 1;
padding-top: 4px;
}
#cg-ig-PL4 .cg-step-title {
font-size: 15px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 6px 0;
line-height: 1.4;
}
#cg-ig-PL4 .cg-step-desc {
font-size: 13px;
color: #4a4a68;
margin: 0 0 12px 0;
line-height: 1.5;
}
#cg-ig-PL4 .cg-code-box {
background: #1a1a2e;
border-radius: 8px;
padding: 12px 16px;
position: relative;
}
#cg-ig-PL4 .cg-code-label {
font-size: 11px;
color: #7a7a96;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
display: block;
}
#cg-ig-PL4 .cg-code-text {
font-family: “SF Mono”, Monaco, “Cascadia Code”, “Roboto Mono”, Consolas, monospace;
font-size: 12px;
color: #E48333;
margin: 0;
line-height: 1.6;
word-break: break-all;
}
#cg-ig-PL4 .cg-code-note {
font-size: 11px;
color: #7a7a96;
margin-top: 8px;
font-style: italic;
}
#cg-ig-PL4 .cg-path-box {
background: #ffffff;
border: 1px solid #e2e2ea;
border-radius: 6px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 8px;
}
#cg-ig-PL4 .cg-path-icon {
width: 16px;
height: 16px;
background: #3D5ACE;
border-radius: 3px;
flex-shrink: 0;
}
#cg-ig-PL4 .cg-path-text {
font-size: 13px;
color: #4a4a68;
margin: 0;
}
#cg-ig-PL4 .cg-path-arrow {
color: #7a7a96;
font-size: 12px;
}
#cg-ig-PL4 .cg-cta {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #e2e2ea;
}
#cg-ig-PL4 .cg-cta-btn {
display: block;
width: 100%;
background: #3D5ACE;
color: #ffffff;
text-decoration: none;
text-align: center;
padding: 14px 20px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
transition: background 0.2s ease;
}
#cg-ig-PL4 .cg-cta-btn:hover {
background: #2f4aa8;
}
#cg-ig-PL4 .cg-source {
margin-top: 16px;
font-size: 11px;
color: #7a7a96;
text-align: center;
}
#cg-ig-PL4 .cg-source a {
color: #7a7a96;
text-decoration: underline;
}
#cg-ig-PL4 .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 480px) {
#cg-ig-PL4 .cg-content {
padding: 16px;
}
#cg-ig-PL4 .cg-title {
font-size: 18px;
}
#cg-ig-PL4 .cg-step {
gap: 12px;
}
#cg-ig-PL4 .cg-step-num {
width: 28px;
height: 28px;
font-size: 13px;
}
#cg-ig-PL4 .cg-step:not(:last-child)::before {
left: 13px;
top: 28px;
}
}
Instala CompleteGreet en Squarespace
Añade la burbuja de vídeo mediante la inserción de código y comprueba el sitio publicado.
Crea tu cuenta de CompleteGreet
Crea la burbuja de vídeo y elige su aspecto y sus acciones.
Copia el código de instalación
Abre la sección de instalación de CompleteGreet y copia todo el código.
<código de CompleteGreet para pegar en Squarespace>
Pega este código en la sección de inserción de código de Squarespace.
Abre los ajustes de código
Busca la sección de inserción de código en la administración de Squarespace.
Ajustes › Avanzado › Inserción de código
Pega el código
Pega todo el código de CompleteGreet en el lugar indicado por Squarespace.
Guarda y publica
Guarda los cambios y comprueba la burbuja en el sitio publicado.
Consulta el resumen estático anterior para ver todos los pasos.
¿Qué conviene revisar antes de publicar?
Dedica unos minutos a hacer una comprobación completa. Así encontrarás problemas de posición, reproducción, reglas de página y formularios antes que tus visitantes.
Empieza en el ordenador y utiliza una ventana privada. Observa cómo carga y dónde queda la burbuja, y comprueba que la miniatura se vea nítida. Abre el vídeo y revisa la reproducción, el sonido, los botones y las acciones.
Pulsa el botón de reproducción y asegúrate de que la imagen, el sonido, los subtítulos y los controles funcionen como esperas.
Pasa después al móvil. Una burbuja de vídeo se comporta de otra manera en una pantalla pequeña. Comprueba la posición, la apertura del vídeo y el tamaño del botón para cerrar. El visitante debe poder abrir y cerrar la burbuja con el pulgar sin tapar la navegación.
Un formulario sencillo en ordenador puede resultar incómodo en un teléfono. Reduce los campos a los que de verdad necesitas, revisa el teclado que aparece en cada campo y prueba el envío completo desde el móvil.
Las reglas de URL son una causa habitual de errores. Prueba varias páginas reales del sitio de Squarespace y confirma que la burbuja solo aparece donde debe. Comprueba también todas las páginas que quieras excluir.
Un saludo personal puede tener sentido en la página de inicio, la página de precios o una página de servicio. No siempre resulta útil durante el pago, la recuperación de contraseña o en páginas legales. Configura las reglas según la estructura real del sitio.
Mide también el rendimiento. Una burbuja de vídeo añade scripts y contenido multimedia a la página. Compara el sitio antes y después de instalarla en ordenador y móvil para detectar cargas más lentas, movimientos del contenido o retrasos al hacer clic.
Compara los resultados con las recomendaciones de Google sobre Web Vitals y revisa los avisos sobre movimientos de contenido o interacciones lentas. Si los valores empeoran, cambia los ajustes de carga en la configuración real.
Haz una prueba con una conexión móvil más lenta, no solo con la red rápida de la oficina. Comprueba cuánto tarda la burbuja en abrirse, cómo se reproduce el vídeo y si los botones responden en condiciones parecidas a las de tus visitantes.
Por último, pide a alguien que no conozca el proyecto que pruebe la página. Pídele que abra el vídeo y utilice la acción de la burbuja. Una mirada nueva suele encontrar problemas que el equipo ya no ve.
Un usuario nuevo puede detectar en segundos un obstáculo que tú llevas semanas sin ver.
Publica cuando hayas revisado el aspecto, las acciones, el rendimiento y la facilidad de uso.
Una burbuja de vídeo puede hacer que un sitio de Squarespace resulte más personal sin estropear su estructura visual.
Aun así, comprueba cada plantilla y la vista móvil, porque la posición puede cambiar.
La carga asíncrona no garantiza que el rendimiento siga igual. Mide la página publicada antes y después de instalar la burbuja.
Accesibilidad
Respeta las preferencias de movimiento reducido, añade subtítulos y ten en cuenta las normas del navegador sobre reproducción automática. Cerrar, reproducir y mover el foco también debe funcionar con el teclado.
Consulta también las pautas de accesibilidad del W3C al comprobar el teclado, el foco, los lectores de pantalla, el contraste y las alternativas al vídeo.
Prueba el sitio con Safari en iOS y Chrome en Android, porque la plantilla y el ancho de pantalla pueden cambiar la posición de la burbuja.
Preguntas frecuentes
¿Cuánto cuesta CompleteGreet para el sitio web de una pequeña empresa?
El precio, el límite de visitantes, el número de burbujas y las funciones incluidas dependen del plan actual. Revisa la página de precios y tu cuenta antes de comparar opciones.
¿Con qué plataformas funciona CompleteGreet?
CompleteGreet puede utilizarse en plataformas compatibles como Shopify, WordPress, Wix, Squarespace, Webflow y WooCommerce, además de otros sitios que admitan el código de instalación necesario. Consulta la documentación actualizada de cada plataforma.
¿Cuánto se tarda en instalar CompleteGreet en una tienda Shopify?
El tiempo depende del vídeo, el aspecto, las acciones y las pruebas. Shopify puede utilizar una aplicación o un método distinto al de Squarespace, así que sigue siempre la guía actualizada.
¿Qué ocurre si el sitio supera el límite de visitantes del plan?
El recuento y la gestión del tráfico adicional siguen las condiciones del plan actual. Antes de elegir una suscripción, revisa qué ocurre cuando te acercas al límite o lo superas.
¿CompleteGreet sirve para recoger opiniones o solo para saludos?
CompleteGreet funciona bien para saludos en vídeo, formularios sencillos y acciones claras. Si necesitas cuestionarios largos con muchas ramas, quizá te convenga una plataforma especializada en encuestas.
¿CompleteGreet cobra costes adicionales durante un pico de tráfico?
Los planes tienen límites de visitantes únicos. Antes de una campaña o un pico estacional, revisa las condiciones actuales y cómo se gestiona un cambio de plan o el tráfico adicional.
