Cómo agregar una mascota de marca animada a Squarespace

¿Squarespace es compatible con animaciones de Rive o Lottie?

No de forma nativa. El centro de ayuda de Squarespace enumera 37 tipos de bloque, desde Archive y Audio hasta Video y Zola, y ninguno reproduce archivos de Rive ni de Lottie. La configuración de animación de bloques de Squarespace se aplica a bloques completos, no al contenido de un archivo de animación.

Eso deja tres vías prácticas:

Para un personaje que saluda al llegar y celebra después de un registro, necesitas el Code Block. Para un hero en loop, el video es más sencillo.

¿Qué plan de Squarespace permite ejecutar JavaScript?

El artículo de Squarespace sobre el Code Block indica que, para agregar JavaScript o un iframe, el sitio debe estar en el plan Core, Plus o Advanced. La Code Injection, que agrega código al header del sitio, al footer o al header de una sola página, está disponible en Core, Plus, Advanced y algunos planes de facturación antiguos.

En Basic no puedes agregar el JavaScript que inicia Rive, así que la vía del Code Block queda descartada; usa la vía de video o GIF que se explica más abajo. Las páginas de checkout no aceptan código personalizado en ningún plan.

Si no sabes en qué plan está un sitio, revisa su panel de facturación antes de crear el embed. Pasar de Basic a Core solo por una mascota es un costo real, así que compáralo con la vía de video que se explica más abajo.

¿Cómo agrego una mascota de Rive con un Code Block?

1. Edita la página, pasa el cursor sobre una sección, haz clic en Add block (o +) y elige Code.
2. Haz clic en el ícono del lápiz del bloque.
3. Cambia el modo a HTML y deja Display Source desactivado, o el código se mostrará como texto.
4. Pega el snippet con la URL de tu propio .riv.

<div style="width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto">
  <canvas id="mascot" style="width: 100%; height: 100%"
          role="img" aria-label="Animated mascot"></canvas>
</div>
<script src="https://unpkg.com/@rive-app/webgl2@2.47.1"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const canvas = document.getElementById("mascot");
  const mascot = new rive.Rive({
    src: "https://YOUR-CDN.example.com/mascot.riv",
    canvas,
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => mascot.resizeDrawingSurfaceToCanvas(),
  });
  // Play the yes reaction when someone clicks the character.
  canvas.addEventListener("click", () => {
    mascot.viewModelInstance?.trigger("yes")?.trigger();
  });
</script>

La versión del runtime está fijada, así que una nueva versión no puede cambiar tu sitio sin aviso, y el snippet omite la reproducción automática cuando el visitante prefiere movimiento reducido. Los Code Blocks tienen un límite de 400 KB, más que suficiente, ya que el runtime y el .riv se cargan desde sus propias URL.

Squarespace advierte que a veces el código no aparece mientras tienes la sesión iniciada, aunque los visitantes sí lo ven. Revisa el sitio publicado en una ventana privada o haz clic en Preview in Safe Mode. Si algún script llega a bloquear el editor, Squarespace te permite desactivar los scripts en la vista previa y luego editar el bloque.

Para usar la misma mascota en varias páginas, puedes mover la línea <script src> del runtime al Header de todo el sitio con Code Injection y dejar solo el canvas y el script de inicio en cada Code Block. Usa el header, no el footer: el footer se carga después de tus Code Blocks, así que el script de inicio se ejecutaría antes de que exista rive.

¿Dónde debe alojarse el archivo .riv?

En un hosting que envíe encabezados CORS. El runtime de Rive descarga el .riv con una solicitud de red desde tu página y, cuando ese archivo está en otro dominio, el navegador solo lo entrega si la respuesta incluye Access-Control-Allow-Origin para tu sitio (o *). Sin eso, la consola muestra un error de CORS y el canvas queda en blanco.

No pudimos confirmar que los archivos subidos con el editor de enlaces de Squarespace se sirvan con encabezados CORS ni que acepten la extensión .riv, así que no recomendamos depender de ellos. Opciones que funcionan:

• GitHub Pages: sus respuestas incluyen access-control-allow-origin: * (lo comprobamos en octubre de 2026). Haz commit del .riv en un repositorio público con Pages activado.
• Cloudflare R2 u otro almacenamiento de objetos: agrega una política CORS que permita GET desde tu dominio de Squarespace.
• Cualquier CDN que te permita configurar los encabezados de respuesta.

Compruébalo antes de pegar, reemplazando ambas URL:

curl -sI -H "Origin: https://www.yoursite.com" \
  https://YOUR-CDN.example.com/mascot.riv | grep -i access-control

Si eso muestra una línea access-control-allow-origin que coincide con tu sitio o con *, el navegador cargará el archivo.

¿Cómo hago que la mascota reaccione a botones y formularios?

El HTML de un Code Block forma parte de la página, no es un iframe, así que su script puede escuchar el resto de la página. El snippet de arriba ya dispara la reacción yes cuando alguien hace clic en el personaje. Para celebrar después de enviar un formulario, agrega un listener para el evento submit, que se propaga desde cualquier formulario:

<script>
  // Add below the snippet above: celebrate when any form on the page is submitted.
  document.addEventListener("submit", () => {
    mascot.viewModelInstance?.trigger("success")?.trigger();
  });
</script>

Usa el mismo patrón para los estados de ánimo: asigna a mascot.viewModelInstance.number("mood").value el valor 3 (thinking) mientras algo se carga, u 8 (sleeping) en una página vacía. Prueba en el sitio publicado después de cada cambio, ya que el editor puede no ejecutar tu código mientras tienes la sesión iniciada.

¿Qué funciona en el plan Basic de Squarespace?

Video y GIF, sin código:

• Video Block: sube un archivo de video de hasta 30 minutos. Squarespace indica que debes activar Mute antes de Autoplay, y Loop lo reinicia al terminar. Configura los controles del reproductor en None para que se vea como una animación y no como un reproductor. Es posible que una miniatura personalizada no se muestre en los videos con reproducción automática.
• GIF animado: súbelo en cualquier lugar donde puedas agregar una imagen, como un Image Block o un logo. Squarespace advierte que editar un GIF en su editor de imágenes, o agregarle efectos de imagen, lo convierte en un JPG estático, y que los GIF grandes hacen más lento el sitio, así que ajústalo antes a su tamaño de visualización.

Ninguna de las dos vías ofrece la transparencia de un canvas de Rive. Un MP4 tiene un fondo sólido y un GIF, en el mejor de los casos, tiene una transparencia de bordes duros. Haz que el color de fondo del clip coincida con el de la sección donde va. Un video con fondo transparente real (WebM VP9 más MOV HEVC para Safari) necesita una etiqueta <video> en un Code Block, así que vuelve a requerir Core o superior; consulta video con fondo transparente en un sitio web.

¿Qué archivos de la mascota debo preparar para Squarespace?

Depende del plan. En Basic necesitas un MP4 cuadrado o vertical y, quizá, un GIF. En Core o superior, un solo .riv cubre todos los estados, con una imagen fija de póster para movimiento reducido.

Charmotion produce ambos a partir de una imagen de tu personaje o logo: 17 animaciones (10 moods en loop, 6 reacciones y una intro de inicio). Cada set de los planes de pago (desde $20 al mes) tiene los formatos de video: MP4 a 1080x1080, video 9:16 y GIF, además del .riv con el view model Character usado en los fragmentos de arriba, WebM y MOV HEVC transparentes y código web, React y SwiftUI. Charmotion no exporta Lottie ni GIF transparente.

Agregar una mascota de marca de Rive a una página de Squarespace

1. Revisa el plan. Confirma que el sitio esté en Core, Plus o Advanced; el JavaScript de los Code Blocks no se ejecuta en Basic.
2. Aloja el .riv. Sube el .riv a GitHub Pages, Cloudflare R2 u otra CDN que devuelva Access-Control-Allow-Origin, y pruébalo con curl.
3. Agrega un Code Block. Edita la página, haz clic en Add block, elige Code, configura el modo en HTML y deja Display Source desactivado.
4. Pega el fragmento de código. Pega el canvas y el script del runtime web de Rive con versión fija, junto con la URL de tu .riv y el nombre de la máquina de estados.
5. Conecta los eventos. Dispara triggers al hacer clic en el canvas o con el evento submit de la página, y asigna valores de `mood` para estados de carga o estados vacíos.
6. Revisa el sitio publicado. Abre la página publicada en una ventana privada o usa Preview in Safe Mode (vista previa en modo seguro), ya que el código puede no mostrarse mientras tienes la sesión iniciada.

Preguntas frecuentes

¿Por qué mi bloque de código de Squarespace no muestra la animación?

Revisa cuatro cosas: que el sitio esté en Core o un plan superior, que el bloque esté en modo HTML con Display Source desactivado, que la URL del .riv devuelva un header Access-Control-Allow-Origin y que estés viendo el sitio publicado o el modo seguro. Squarespace advierte que a veces el código no se muestra mientras tienes la sesión iniciada.

¿Puedo poner el script de Rive en Code Injection de Squarespace?

Sí, en Core, Plus, Advanced y algunos planes heredados. Pon la etiqueta script del runtime en el header de todo el sitio, que Squarespace inserta en el head de cada página, y deja el canvas y el código de inicio en un bloque de código donde deba aparecer la mascota. Evita el footer: se carga después del bloque de código, así que el código de inicio se ejecutaría antes.

¿Un bloque de video de Squarespace se reproduce automáticamente en teléfonos?

Solo si está silenciado, algo que Squarespace impone al exigir activar Mute antes de Autoplay. Aun así, los navegadores pueden bloquear la reproducción automática en modo de bajo consumo o de ahorro de datos, así que elige un primer fotograma que se vea bien como imagen fija.

Respuestas rápidas de esta guía

• ¿Puedo agregar JavaScript personalizado en el plan Basic de Squarespace?

Fuentes

• Adding content with blocks, Squarespace Help Center
• Code blocks, Squarespace Help Center
• Using code injection, Squarespace Help Center
• Video blocks, Squarespace Help Center
• Using animated .gifs, Squarespace Help Center
• Cross-Origin Resource Sharing (CORS), MDN Web Docs
• Configure CORS, Cloudflare R2 docs
• Web (JS) runtime, Rive
• Web runtime: Data binding, Rive
• prefers-reduced-motion, MDN Web Docs