Put your mascot on your website

Play a transparent animation on any page with the Masko player and two hosted files. You need a finished animation from Create an animated character.

5 min · No credits · HTML or React

Get the links in Studio#

1. Open your mascot in Studio and press Get Links.
2. Turn on Enable asset hosting (the button then reads Links). Made animations before that? Press Update links to publish them.
3. Under Export JSON, press Copy or Download JSON. The platform filter (Web, Mobile, Safari / iOS, Android and more) narrows the list, and the line under it gives what the files weigh.
4. Keep two links per animation: transparent_video_mov (HEVC) and transparent_video_webm (WebM).

Get the links with the API#

Mascots created with the API have hosting on, so a completed animation job already carries urls.hevc and urls.webm. For every hosted link of a mascot at once, read its free export.

curl https://api.masko.ai/v1/mascots/MASCOT_ID/cdn-export \
  -H "Authorization: Bearer $MASKO_API_KEY" \
  -H "Masko-API-Version: 2026-09-26"

The export lists only ready, hosted files. If hosting is off or nothing is hosted yet, it returns 409 with the code cdn_export_not_ready. A mascot made in Studio starts with hosting off: turn it on in Get Links, or with POST /v1/mascots/MASCOT_ID/publish (turn on hosting), then ask again. Hosting makes the files public, so ask the mascot's owner first.

Add it to your page#

Give the Masko player your two URLs.

<div id="mascot" style="width: 240px; height: 240px"></div>
<script src="https://cdn.jsdelivr.net/npm/@masko/player@0.1/dist/masko-player.js"></script>
<script>
  MaskoPlayer.mount(document.getElementById('mascot'), {
    clip: {
      webm: 'https://assets.masko.ai/.../waving-hello-g7h8.webm',
      hevc: 'https://assets.masko.ai/.../waving-hello-i9j0.mov'
    }
  });
</script>

• The right file everywhere. The player plays the HEVC .mov on Safari, on iPhone and iPad and in Mac apps' web views, and the WebM elsewhere, so the mascot stays transparent, also in Chrome setups that decode HEVC but draw a box around it.
• It loops without a flash, plays the animation's own voice if it has one (browsers allow sound after the person's first click or key press; sound: false mutes it), shows a play button when the browser blocks autoplay and pauses while the tab is hidden.

To switch between animations, or make the mascot react to your app, put its animations in a canvas and play the release: Play a canvas.

Make the files lighter#

For a mascot shown at 240 px, a 360 px version loads much faster than full size: about 0.5 MB instead of 0.9 MB for a 5-second WebM (file sizes). Size variants are free, in WebM, HEVC and Android formats.

• In Studio: Get Links, Settings tab, turn on 360 px under Sizes, press Sync.
• With the API: turn the sizes on once, then fill in your existing animations.

curl -X PATCH https://api.masko.ai/v1/mascots/MASCOT_ID/settings \
  -H "Authorization: Bearer $MASKO_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "publish_params": { "animation_sizes": { "enabled": true, "sizes": [360] } } }'

curl -X POST https://api.masko.ai/v1/mascots/MASCOT_ID/size-variants \
  -H "Authorization: Bearer $MASKO_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'

The export then also lists transparent_video_mov_360 and transparent_video_webm_360, used like the full-size pair.

What you get#

• Permanent links on https://assets.masko.ai, not signed links that expire.
• Every format in one JSON: video (MP4 on a solid background), transparent_video_webm, transparent_video_mov and transparent_video_android (color and alpha stacked in one MP4), plus pose images, stickers and cursor followers.
• No credits for links and size variants. Asset hosting is billed separately; see Billing.

Using an AI agent?#

Paste this into your coding agent, in your website's project, connected to the Masko MCP server (setup for Claude Code, Codex, Cursor and more) or with the Masko skill and an API key.

Put my Masko mascot on this website by following
https://masko.ai/docs/tutorials/mascot-on-your-website
Use my mascot "MASCOT_NAME" and its animation "ANIMATION_NAME".
Use the Masko MCP tools if they are connected. Otherwise use the REST API at
https://api.masko.ai/v1 with MASKO_API_KEY from my environment. Never put the
key in browser code.
If hosting is off, ask me before you turn it on.
Play the hosted .webm and .mov (HEVC) links with the Masko player's clip
option (@masko/player 0.1.9 or later). Prefer the 360 px versions if they exist.
Show me the page where the mascot plays when you are done.

Next#