Put your mascot on your website

Play a transparent animation on any page with one <video> tag and two hosted files, with no plugin or script. You need a finished animation from Make it move.

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, Safari, iOS, Android and more) narrows the list.
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: turn hosting on in Get Links, then ask again.

Add it to your page#

Paste the tag where the mascot should appear and use your two URLs.

<video
  autoplay
  loop
  muted
  playsinline
  width="240"
  height="240"
  aria-hidden="true"
>
  <!-- Safari, iPhone and iPad: HEVC with alpha -->
  <source
    src="https://assets.masko.ai/.../waving-hello-i9j0.mov"
    type='video/mp4; codecs="hvc1"'
  />
  <!-- Chrome, Firefox and Edge: WebM with alpha -->
  <source
    src="https://assets.masko.ai/.../waving-hello-g7h8.webm"
    type="video/webm"
  />
</video>

• HEVC first. A browser plays the first source it can, and Safari and iOS keep the transparency only with the HEVC .mov (video/mp4; codecs="hvc1"). Chrome, Firefox and Edge play the WebM.
• muted, autoplay, playsinline. Browsers autoplay only silent video, and playsinline keeps iPhone from opening it full screen.
• aria-hidden. For a decorative mascot. Drop it and add a label if the mascot carries meaning.

In React, keep the element mounted: a new <source> does not reload a playing video, and a new key per clip blanks the picture. To switch clips, use two players as in Show a mascot while your AI thinks.

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 Animation Sizes, pick 360px under Preset sizes, press Save Settings.
• 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 at https://masko.ai/api/mcp (setup for Cursor or ChatGPT) 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.
Use the hosted .mov (HEVC) and .webm links, HEVC source first, with
autoplay, loop, muted and playsinline. Prefer the 360 px versions if they exist.
Show me the page where the mascot plays when you are done.

Next#