Como adicionar um mascote animado ao Squarespace

O Squarespace aceita animações Rive ou Lottie?

Não de forma nativa. A central de ajuda do Squarespace lista 37 tipos de bloco, de Archive e Audio a Video e Zola, e nenhum reproduz arquivos Rive ou Lottie. As configurações de animação de bloco do Squarespace se aplicam ao bloco inteiro, não ao conteúdo de um arquivo de animação.

Isso deixa três caminhos práticos:

Para um personagem que acena na chegada e comemora depois de um cadastro, você precisa do Code Block. Para um hero em loop, vídeo é mais simples.

Qual plano do Squarespace permite rodar JavaScript?

O artigo sobre Code Block do Squarespace diz que, para adicionar JavaScript ou um iframe, o site precisa estar no plano Core, Plus ou Advanced. O Code Injection, que adiciona código ao cabeçalho do site, ao rodapé ou ao cabeçalho de uma única página, está disponível nos planos Core, Plus, Advanced e em alguns planos de cobrança antigos.

No Basic, você não consegue adicionar o JavaScript que inicia o Rive, então o caminho do Code Block fica de fora; use o caminho de vídeo ou GIF abaixo. As páginas de checkout não aceitam código personalizado em nenhum plano.

Se não tiver certeza de qual plano o site usa, confira o painel de cobrança antes de montar o embed. Passar do Basic para o Core só por causa de um mascote é um custo real, então compare com o caminho de vídeo abaixo.

Como adiciono um mascote Rive com um Code Block?

1. Edite a página, passe o mouse sobre uma seção, clique em Add block (ou +) e escolha Code.
2. Clique no ícone de lápis do bloco.
3. Defina o modo como HTML e deixe Display Source desativado, senão o código aparece como texto.
4. Cole o snippet com a URL do seu próprio .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>

A versão do runtime é fixa, então uma nova versão não altera seu site sem aviso, e o snippet pula a reprodução automática quando o visitante prefere movimento reduzido. Code Blocks têm limite de 400 KB, o que é mais que suficiente, já que o runtime e o .riv carregam das próprias URLs.

O Squarespace avisa que, às vezes, o código não aparece enquanto você está com a sessão iniciada, mesmo que os visitantes o vejam. Confira o site publicado em uma janela anônima ou clique em Preview in Safe Mode. Se algum script travar o editor, o Squarespace permite desativar os scripts na prévia e depois editar o bloco.

Para usar o mesmo mascote em várias páginas, você pode mover a linha <script src> do runtime para o Header do site inteiro com o Code Injection e manter só o canvas e o script de inicialização em cada Code Block. Use o header, não o footer: o footer carrega depois dos seus Code Blocks, então o script de inicialização rodaria antes de rive existir.

Onde o arquivo .riv deve ficar hospedado?

Em um host que envie cabeçalhos CORS. O runtime do Rive baixa o .riv com uma requisição de rede a partir da sua página e, quando o arquivo está em outro domínio, o navegador só o entrega se a resposta incluir Access-Control-Allow-Origin para o seu site (ou *). Sem isso, o console mostra um erro de CORS e o canvas fica em branco.

Não conseguimos confirmar se os arquivos enviados pelo editor de links do Squarespace são servidos com cabeçalhos CORS ou se aceitam a extensão .riv, então não recomendamos depender deles. Opções que funcionam:

• GitHub Pages: as respostas incluem access-control-allow-origin: * (verificamos em outubro de 2026). Faça commit do .riv em um repositório público com o Pages ativado.
• Cloudflare R2 ou outro armazenamento de objetos: adicione uma política de CORS que permita GET a partir do seu domínio do Squarespace.
• Qualquer CDN que permita definir cabeçalhos de resposta.

Confira antes de colar, substituindo as duas URLs:

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

Se aparecer uma linha access-control-allow-origin que corresponda ao seu site ou a *, o navegador vai carregar o arquivo.

Como faço o mascote reagir a botões e formulários?

O HTML de um Code Block faz parte da página, não é um iframe, então o script dele consegue escutar o resto da página. O snippet acima já dispara a reação yes quando alguém clica no personagem. Para comemorar depois do envio de um formulário, adicione um listener para o evento submit, que se propaga a partir de qualquer formulário:

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

Use o mesmo padrão para os humores: defina mascot.viewModelInstance.number("mood").value como 3 (thinking) enquanto algo carrega, ou 8 (sleeping) em uma página vazia. Teste no site publicado depois de cada mudança, já que o editor pode não rodar seu código enquanto você está com a sessão iniciada.

O que funciona no plano Basic do Squarespace?

Vídeo e GIF, sem código:

• Video Block: envie um arquivo de vídeo de até 30 minutos. O Squarespace diz que você precisa ativar Mute antes de Autoplay, e Loop reinicia o vídeo no final. Defina os controles do player como None para que pareça uma animação, não um player. Uma miniatura personalizada pode não aparecer em vídeos com reprodução automática.
• GIF animado: envie em qualquer lugar onde você possa adicionar uma imagem, como um Image Block ou um logo. O Squarespace avisa que editar um GIF no editor de imagens dele, ou adicionar efeitos de imagem, o converte em um JPG estático, e GIFs grandes deixam o site lento, então redimensione para o tamanho de exibição antes.

Nenhum dos dois caminhos tem a transparência de um canvas Rive. Um MP4 tem fundo sólido, e um GIF tem, no máximo, transparência com bordas serrilhadas. Use no clipe a mesma cor de fundo da seção em que ele fica. Um vídeo com fundo transparente de verdade (WebM VP9 mais MOV HEVC para Safari) precisa de uma tag <video> em um Code Block, então volta a exigir o Core ou superior; veja vídeo com fundo transparente em um site.

Quais arquivos do mascote devo preparar para o Squarespace?

Depende do plano. No Basic, você precisa de um MP4 quadrado ou vertical e, talvez, de um GIF. No Core ou superior, um único .riv cobre todos os estados, com uma imagem estática de pôster para movimento reduzido.

O Charmotion produz os dois a partir de uma imagem do seu personagem ou logo: 17 animações (10 humores em loop, 6 reações e uma intro de abertura). Todo conjunto nos planos pagos (a partir de US$ 20 por mês) tem os formatos de vídeo: MP4 em 1080x1080, vídeo 9:16 e GIF, além do .riv com o view model Character usado nos snippets acima, WebM transparente e MOV HEVC e código para web, React e SwiftUI. O Charmotion não exporta Lottie nem GIF transparente.

Adicione um mascote do Rive a uma página do Squarespace

1. Confira o plano. Confirme que o site está no plano Core, Plus ou Advanced; JavaScript em Code Blocks não roda no Basic.
2. Hospede o .riv. Envie o .riv para o GitHub Pages, o Cloudflare R2 ou outro CDN que retorne Access-Control-Allow-Origin, e teste com curl.
3. Adicione um Code Block. Edite a página, clique em Add block, escolha Code, defina o modo como HTML e deixe Display Source desativado.
4. Cole o snippet. Cole o canvas e o script do runtime web do Rive com versão fixada, junto com a URL do seu .riv e o nome da state machine.
5. Conecte os eventos. Dispare triggers em cliques no canvas ou no evento submit da página, e defina valores numéricos de mood para estados de carregamento ou estados vazios.
6. Confira o site no ar. Abra a página publicada em uma janela anônima ou use o Preview in Safe Mode, já que o código pode não aparecer enquanto você está com a sessão iniciada.

Perguntas frequentes

Por que meu Code Block do Squarespace não mostra a animação?

Confira quatro coisas: o site está no plano Core ou superior, o bloco está no modo HTML com Display Source desativado, a URL do .riv retorna o cabeçalho Access-Control-Allow-Origin e você está vendo o site publicado ou o Safe Mode. O Squarespace avisa que, às vezes, o código não aparece enquanto você está conectado à conta.

Posso colocar o script do Rive no Code Injection do Squarespace em vez disso?

Sim, nos planos Core, Plus, Advanced e em alguns planos antigos. Coloque a tag script do runtime no header geral do site, que o Squarespace injeta no head de todas as páginas, e mantenha o canvas e o código de inicialização em um Code Block onde o mascote deve aparecer. Evite o footer: ele carrega depois do Code Block, então o código de inicialização rodaria primeiro.

Um Video Block do Squarespace tem reprodução automática no celular?

Só quando está sem som, algo que o Squarespace garante ao exigir Mute antes de Autoplay. Os navegadores ainda podem bloquear a reprodução automática nos modos de economia de energia ou de dados, então escolha um primeiro frame que fique bom como imagem estática.

Respostas rápidas deste guia

• Posso adicionar JavaScript personalizado no plano Basic do Squarespace?

Fontes

• 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