[SOLVED] Wordpress integration
Hi! I'm new to Rive and as somebody who lacks knowledge in coding, I was wondering if there were beginner-friendly ressources available anywhere that explain how to embed a Rive element on Wordpress without having to upgrade your account?
[SOLUTION]
1. Download your Rive animation file and rename it (ex: animation.riv)
2. Create a folder on your computer and add the Rive file to it.
3. Create a index.html text file with the following code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rive Animation</title>
</head>
<body>
<h1>Hosted Rive File</h1>
<p>Your .riv file is available at the following URL:</p>
<a href="animation.riv">Download animation.riv</a>
</body>
</html>
4. Create a _headers text file with the following code:
/animation.riv Access-Control-Allow-Origin: *
5. Create a Netlify account.
6. Go to Netlify Drop and drop the entire file. Copy the generated link.
7. Open your website builder and edit a page.
8. Add a custom HTML block and copy-paste the following script:
<canvas id="riveCanvas"></canvas>
<script src="https://unpkg.com/@rive-app/canvas@latest"></script>
<script>
new rive.Rive({
src: 'https://your-netlify-link.netlify.app/animation.riv',
canvas: document.getElementById('riveCanvas'),
autoplay: true
});
</script>
9. Replace your-netlify-link.netlify.app with your own Netlify link.
10. Preview the page.
If the animation is not loading, click F12 to view the console of your web browser and the origin of the error should be mentionned.