How to Embed Rive Animations in WordPress (Step-by-Step Guide)

Rive lets you ship lightweight, interactive animations with real-time state machines. This article shows three reliable ways to add Rive to WordPress—plus performance, accessibility, and troubleshooting tips.

What you need: a public Rive share link or a hosted .riv file.

---

Method 1 — iframe Embed (Fastest)

Perfect for blog posts, landing pages, and portfolios when you need it working in seconds.

1. In Rive, click Share → Embed and copy the iframe code.
2. In WordPress, add a Custom HTML block and paste it.

<iframe
  src="https://rive.app/s/YOUR-RIVE-ID/embed"
  loading="lazy"
  style="width:100%;height:420px;border:0;border-radius:12px"
  allow="autoplay; encrypted-media; clipboard-write"
  title="Rive animation"
></iframe>

Pros: zero setup. Cons: limited deep control over state machines from the page.

---

Method 2 — <rive-player> Web Component (Most Control)

Load the official Rive runtime and control artboards, state machines, and inputs.

<!-- Load the Rive runtime -->
<script src="https://unpkg.com/@rive-app/webgl"></script>

<!-- Add the player -->
<rive-player
  src="https://your-cdn.com/assets/hero.riv"
  state-machines="State Machine 1"
  autoplay
  style="width:100%;max-width:720px;height:420px;display:block;margin:auto;border-radius:12px"
  aria-label="Interactive Rive animation"
></rive-player>

Optional: set state-machine inputs after load.

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const player = document.querySelector('rive-player');
    player.addEventListener('load', () => {
      const inputs = player?.rive?.stateMachineInputs('State Machine 1') || [];
      const hover = inputs.find(i => i.name === 'hover');
      const pressed = inputs.find(i => i.name === 'pressed');
      if (hover) hover.value = true;
      setTimeout(() => { if (pressed) pressed.value = true; }, 1200);
    });
  });
</script>

---

Method 3 — Theme Enqueue + Shortcode (Plugin-Free, Clean Content)

For production sites: load the runtime once and insert players via a tidy shortcode.

Step A — Enqueue the runtime (child theme functions.php or a snippets plugin)

function enqueue_rive_player() {
  wp_enqueue_script('rive-webgl','https://unpkg.com/@rive-app/webgl',[],null,true);
}
add_action('wp_enqueue_scripts','enqueue_rive_player');

Step B — Add a [rive] shortcode

function rive_player_shortcode($atts) {
  $a = shortcode_atts([
    'src' => '',
    'states' => '',
    'autoplay' => 'true',
    'width' => '100%',
    'height' => '420px',
    'label' => 'Rive animation'
  ], $atts);

  ob_start(); ?>
  <rive-player
    src="<?php echo esc_url($a['src']); ?>"
    state-machines="<?php echo esc_attr($a['states']); ?>"
    <?php echo ($a['autoplay'] === 'true') ? 'autoplay' : ''; ?>
    aria-label="<?php echo esc_attr($a['label']); ?>"
    style="width:<?php echo esc_attr($a['width']); ?>;height:<?php echo esc_attr($a['height']); ?>;display:block;margin:auto;border-radius:12px"
  ></rive-player>
  <?php return ob_get_clean();
}
add_shortcode('rive','rive_player_shortcode');

Step C — Use it in posts/pages

[rive src="https://cdn.example.com/cta.riv" states="Button" autoplay="true" width="720px" height="420px"]

---

Performance Tips (Core Web Vitals)

• Lazy-load below-the-fold iframes with loading="lazy" or initialize <rive-player> on intersection.
• Optimize the .riv: remove unused artboards, simplify bones, keep textures lean, minimize nested state logic.
• Prevent layout shift: set a fixed height or aspect ratio.
• Serve assets from a CDN and enable caching.
• Prefer one runtime per page (webgl or canvas) unless you need both.

---

Accessibility & Fallbacks

• Add a descriptive aria-label to the player.
• Ensure the page remains usable without the animation; provide a static poster image if JS is disabled.
• For interactive controls (play/pause/trigger), support keyboard input and visible focus states.

---

FAQ

Why use Rive instead of GIF or video?

Rive gives real-time, input-driven state machines with tiny files. You get responsiveness and control that static formats can’t provide.

Can I host the .riv file in my Media Library?

Yes—ensure it’s publicly accessible (some hosts require a MIME rule). Otherwise, use a CDN or your theme folder.

Does this work with page builders (Elementor/Block Editor)?

Yes. Use an HTML block for Methods 1–2. For Method 3, insert the [rive] shortcode.

---

Hire a Rive Animator (Free Consultation)

If you want production-ready Rive animations with clean developer handoff, I can help—from UI micro-interactions to game UI and character rigs.

🌐 riveanimator.com
📧 [e-mail]