Embed Your Animated Mascot

Your mascot is ready! Here's everything you need to add it to your website. We deliver multiple formats so it works everywhere.

What You Receive

Every order includes these files:

Basic HTML Embed

The simplest way to add your mascot to any HTML page:

<video autoplay loop muted playsinline>
  <source src="/mascot-transparent.webm" type="video/webm">
  <source src="/mascot.mp4" type="video/mp4">
  <img src="/mascot.gif" alt="Mascot">
</video>HTML

Styled Example

Add some CSS to control size and positioning:

<style>
.mascot {
  width: 200px;
  height: 200px;
  object-fit: contain;
  /* Float in corner */
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}
</style>

<video class="mascot" autoplay loop muted playsinline>
  <source src="/mascot-transparent.webm" type="video/webm">
  <source src="/mascot.mp4" type="video/mp4">
</video>HTML + CSS

React / Next.js

export function Mascot() {
  return (
    <video 
      autoPlay 
      loop 
      muted 
      playsInline
      className="w-48 h-48 object-contain"
    >
      <source src="/mascot-transparent.webm" type="video/webm" />
      <source src="/mascot.mp4" type="video/mp4" />
    </video>
  );
}React

WordPress

For WordPress sites, you can:

1. Upload all files to your Media Library
2. Use the Custom HTML block and paste the embed code
3. Or use a plugin like "Video Embed & Thumbnail Generator"

Webflow / Framer / Squarespace

Most no-code builders support custom HTML embeds:

1. Upload video files to your project assets
2. Add an "Embed" or "Custom Code" block
3. Paste the HTML with your asset URLs

Performance Tips

• Lazy load — Add loading="lazy" for below-fold mascots
• Preload — Add <link rel="preload" href="/mascot.webm" as="video"> for critical mascots
• CDN — Host on a CDN for faster global delivery
• Size — Our files are already optimized (~1-2MB), but you can resize if needed

Browser Support

• WebM with transparency: Chrome, Firefox, Edge, Safari 16.4+ (iOS 16.4+)
• MP4 fallback: All browsers including IE11
• GIF fallback: Universal (email clients, ancient browsers)