Sharing your Rosebud AI games on your own website or other platforms is straightforward and can be done in just a few steps. Check out this tutorial to learn how!
Check out this tutorial to learn how!
Here is a video version of this tutorial to make it easier to follow along. If you have any questions about following these steps, join our Discord and let us know how we can help make your experience even better!
The Template
While there are multiple approaches that work, the best way to upload Rosebud games is to add your game within an iframe in a simple HTML file. Below is a template we made to make it super easy for you to do this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Rosebud Game</title>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
#game-container {
width: 100%;
height: 100%;
max-width: 800px;
max-height: 600px;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="game-container">
<iframe src="{ YOUR PUBLISHED GAME URL }"
frameborder="0"
allowfullscreen="true"
allow="autoplay; fullscreen *; geolocation; microphone; camera; midi; monetization; xr-spatial-tracking; gamepad; gyroscope; accelerometer; xr; cross-origin-isolated"
sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-pointer-lock allow-top-navigation">
</iframe>
</div>
<script>
function resizeGame() {
var container = document.getElementById('game-container');
var aspectRatio = 800 / 600;
var windowRatio = window.innerWidth / window.innerHeight;
var width, height;
if (windowRatio > aspectRatio) {
height = Math.min(window.innerHeight, 600);
width = height * aspectRatio;
} else {
width = Math.min(window.innerWidth, 800);
height = width / aspectRatio;
}
container.style.width = width + 'px';
container.style.height = height + 'px';
}
window.addEventListener('resize', resizeGame);
window.addEventListener('orientationchange', resizeGame);
document.addEventListener('DOMContentLoaded', resizeGame);
</script>
</body>
</html>How to Embed on Your Website
- Open a text editor like VS Code Web or Notepad.
- Copy and paste the template code above into a new file.
- Change the iframe
widthandheightto match the dimensions of your Rosebud project (you can find these values in the config section at the bottom of the Code Tab in your Rosebud project). - Replace
{ YOUR PUBLISHED GAME URL }with the published URL of your game (make sure your game is publicly accessible). - Save the file as
.htmland upload it to your web server or use an HTML embed option available on your site builder. - Your game is now embedded and playable directly on your site!
Uploading to Itch.io
If you want to share your game on Itch.io, follow these additional steps:
- Create an Itch.io account if you don’t have one.
- Click on Upload a new project in the dropdown menu on the top right.
- Fill in the basic details:
- Title: Use the same title as your Rosebud game or a custom one.
- Project URL: Itch.io will auto-generate one, but you can edit it.
- Short Description: Add a brief description of your game.
- Set Kind of Project to HTML to enable browser play.
- Upload your HTML file (created from the template above).
- In Embed Options:
- Viewport dimensions: Match the dimensions of your iframe and Rosebud project.
- Frame options: Set ‘Automatically start on page load’ to true.
- Mobile friendly: Enable if your game is optimized for mobile.
- Click Save & Publish to share your game with the world!
With just a few steps, your game can reach a wider audience, whether on your own site or through Itch.io!