How to Add an Animated Mascot to Squarespace

Does Squarespace support Rive or Lottie animations?

Not natively. Squarespace's help center lists 37 block types, from Archive and Audio to Video and Zola, and none plays Rive or Lottie files. Squarespace's block animation settings apply to whole blocks, not to the contents of an animation file.

That leaves three practical routes:

For a character that waves on arrival and celebrates after a sign-up, you need the Code Block. For a looping hero, video is simpler.

Which Squarespace plan lets you run JavaScript?

Squarespace's Code Block article says that to add JavaScript or an iframe, the site needs to be on the Core, Plus or Advanced plan. Code Injection, which adds code to the site header, footer or a single page's header, is available on Core, Plus, Advanced and some legacy billing plans.

On Basic you can't add the JavaScript that starts Rive, so the Code Block route is out; use the video or GIF route below. Checkout pages don't accept custom code on any plan.

If you aren't sure which plan a site is on, check its billing panel before building the embed. Moving from Basic to Core just for a mascot is a real cost, so compare it with the video route below.

How do I add a Rive mascot with a Code Block?

1. Edit the page, hover over a section, click Add block (or +) and choose Code.
2. Click the pencil icon on the block.
3. Set the mode to HTML and leave Display Source off, or the code shows as text.
4. Paste the snippet, with your own .riv URL.

<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>

The runtime version is pinned, so a new release can't change your site unannounced, and the snippet skips autoplay when the visitor prefers reduced motion. Code Blocks are limited to 400 KB, which is plenty, since the runtime and .riv load from their own URLs.

Squarespace notes that code sometimes doesn't appear while you're logged in, even though visitors see it. Check the published site in a private window, or click Preview in Safe Mode. If a script ever blocks the editor, Squarespace lets you disable scripts in preview and then edit the block.

To use the same mascot on several pages, you can move the runtime <script src> line into the site-wide Header with Code Injection and keep only the canvas and the start-up script in each Code Block. Use the header, not the footer: the footer loads after your Code Blocks, so the start-up script would run before rive exists.

Where should the .riv file live?

On a host that sends CORS headers. Rive's runtime downloads the .riv with a network request from your page, and when that file sits on another domain, the browser only hands it over if the response includes Access-Control-Allow-Origin for your site (or *). Without it, the console shows a CORS error and the canvas stays blank.

We could not confirm that files uploaded through Squarespace's link editor are served with CORS headers or accept the .riv extension, so we don't recommend relying on them. Options that work:

• GitHub Pages: its responses include access-control-allow-origin: * (we checked in October 2026). Commit the .riv to a public repository with Pages enabled.
• Cloudflare R2 or another object store: add a CORS policy that allows GET from your Squarespace domain.
• Any CDN that lets you set response headers.

Check before you paste, replacing both URLs:

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

If that prints an access-control-allow-origin line that matches your site or *, the browser will load the file.

How do I make the mascot react to buttons and forms?

A Code Block's HTML is part of the page, not an iframe, so its script can listen to the rest of the page. The snippet above already fires the yes reaction when someone clicks the character. To celebrate after a form submission, add a listener for the submit event, which bubbles up from any form:

<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 the same pattern for moods: set mascot.viewModelInstance.number("mood").value to 3 (thinking) while something loads, or 8 (sleeping) on an empty page. Test on the published site after each change, since the editor may not run your code while you are logged in.

What works on the Squarespace Basic plan?

Video and GIF, with no code:

• Video Block: upload a video file of up to 30 minutes. Squarespace says you must turn on Mute before Autoplay, and Loop restarts it at the end. Set player controls to None so it reads as an animation, not a player. A custom thumbnail may not show for autoplaying videos.
• Animated GIF: upload it anywhere you can add an image, such as an Image Block or a logo. Squarespace warns that editing a GIF in its image editor, or adding image effects, converts it to a static JPG, and large GIFs slow the site, so size it to its display size first.

Neither route is transparent the way a Rive canvas is. An MP4 has a solid background, and a GIF has hard-edged transparency at best. Match the clip's background color to the section it sits in. A true transparent video (VP9 WebM plus HEVC MOV for Safari) needs a <video> tag in a Code Block, so it is back on Core or higher; see transparent video on a website.

Which mascot files should I prepare for Squarespace?

It depends on the plan. On Basic you need a square or vertical MP4 and maybe a GIF. On Core or higher, one .riv covers every state, with a still poster image for reduced motion.

Charmotion produces both from one image of your character or logo: 17 animations (10 looping moods, 6 reactions and a launch intro). Every set on the paid plans (from $20 a month) has the video formats: MP4 at 1080x1080, 9:16 video and GIF, plus the .riv with the Character view model used in the snippets above, transparent WebM and HEVC MOV, and web, React and SwiftUI code. Charmotion doesn't export Lottie or transparent GIF.

Add a Rive mascot to a Squarespace page

1. Check the plan. Confirm the site is on Core, Plus or Advanced; JavaScript in Code Blocks doesn't run on Basic.
2. Host the .riv. Upload the .riv to GitHub Pages, Cloudflare R2 or another CDN that returns Access-Control-Allow-Origin, and test it with curl.
3. Add a Code Block. Edit the page, click Add block, choose Code, set the mode to HTML and keep Display Source off.
4. Paste the snippet. Paste the canvas and the pinned Rive web runtime script with your .riv URL and state machine name.
5. Wire events. Fire triggers on canvas clicks or on the page's submit event, and set mood numbers for loading or empty states.
6. Check the live site. Open the published page in a private window or use Preview in Safe Mode, since code may not show while logged in.

Frequently asked questions

Why doesn't my Squarespace Code Block show the animation?

Check four things: the site is on Core or higher, the block is in HTML mode with Display Source off, the .riv URL returns an Access-Control-Allow-Origin header, and you are viewing the live site or Safe Mode. Squarespace notes that code sometimes doesn't display while you are logged in.

Can I put the Rive script in Squarespace Code Injection instead?

Yes, on Core, Plus, Advanced and some legacy plans. Put the runtime script tag in the site-wide header, which Squarespace injects into the head of every page, and keep the canvas and the start-up code in a Code Block where the mascot should appear. Avoid the footer: it loads after the Code Block, so the start-up code would run first.

Will a Squarespace Video Block autoplay on phones?

Only when it is muted, which Squarespace enforces by requiring Mute before Autoplay. Browsers can still refuse autoplay in low-power or data-saver modes, so choose a first frame that looks fine as a still image.

Quick answers from this guide

• Can I add custom JavaScript on the Squarespace Basic plan?

Sources

• 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