Does the Rive hover state machine work inside a Wix iFrame?

Yes. The mouse events on the canvas element fire inside the iFrame context. The Hover state machine input responds to mouseenter and mouseleave events on the canvas — Wix's iFrame sandbox doesn't prevent this.

Where do I host the .riv file for Wix?

Use any public HTTPS URL — jsDelivr, Cloudflare R2, S3, or your own server. Wix doesn't provide file hosting for .riv files, so you need an external host.

Why does my Rive icon look cut off in Wix?

The Wix embed element size needs to match the canvas size set in the HTML. In the Wix editor, drag the embed element to match the canvas width and height. For a 150×150 canvas, set the embed element to 150×150 in the editor.

Limited offer — lifetime access:$99$79

Rive · Wix

Add a Rive icon to your Wix site in minutes

Wix embeds custom HTML in an iFrame. Paste a self-contained HTML page with the Rive WebGL script and canvas — hover state machine works inside the iFrame context.

Host your .riv file

Upload your icon to any public HTTPS host — jsDelivr, Cloudflare R2, S3. Wix doesn't host .riv files natively. Copy the public URL.

Add an HTML Embed element in Wix

In the Wix editor: click + Add Elements → Embed & Social → Embed HTML. This adds an HTML iFrame element to your page.

Paste the full HTML snippet

Click 'Enter Code' on the embed element. Paste the complete HTML page below — the Rive script, canvas element, and hover init are all self-contained.

HTML

<html>
<body style="margin:0;padding:0;background:transparent;overflow:hidden;">
  <script src="https://unpkg.com/@rive-app/webgl@2.9.1"></script>
  <canvas id="rive-icon" width="150" height="150" style="cursor:pointer;"></canvas>
  <script>
    var canvas = document.getElementById("rive-icon");
    var hoverInput = null;

    var r = new rive.Rive({
      src: "https://your-domain.com/your-animation.riv",
      canvas: canvas,
      autoplay: true,
      artboard: "Main",
      stateMachines: ["State Machine 1"],
      onLoad: function() {
        var inputs = r.stateMachineInputs("State Machine 1");
        hoverInput = inputs && inputs.find(function(i) { return i.name === "Hover"; });
        canvas.addEventListener("mouseenter", function() { if (hoverInput) hoverInput.value = true; });
        canvas.addEventListener("mouseleave", function() { if (hoverInput) hoverInput.value = false; });
      }
    });
  </script>
</body>
</html>

hover to preview

Resize the embed to match your canvas

In the Wix editor, resize the embed element to match the canvas size set in the HTML. For a 150×150 canvas, set the embed element to 150×150. Wix's iFrame clips any overflow.

Get notified about new Wix icons

iFrame sizing note

Wix embeds use an iFrame, so the embed element in the editor needs to match the canvas size. If the icon is clipped, make the embed element larger to match the canvas width and height.

Common questions

Does hover work inside a Wix iFrame?

Yes. Mouse events fire on the canvas inside the iFrame context. The Rive state machine responds to them normally.

Where do I host the .riv file?

Any public HTTPS URL. jsDelivr, Cloudflare R2, S3. Wix doesn't host .riv natively.

Why is my icon clipped?

Resize the embed element in the Wix editor to match the canvas dimensions in the HTML. A 150×150 canvas needs a 150×150 embed element.

Grab your first Wix icon

Browse icons ready for Wix — free to download.

Browse icons