¶ Why to embed your HypeHype game?
Embedding your game can be part of game promotion. It drives more visibility for you and the game, more traffic and direct plays to your HypeHype games outside HypeHype.
- Easy to share:
Embedding lets people play your game directly in their browser. It's as simple as embedding YouTube videos. - Broader reach and more plays:
Post your game on blogs, websites, forums, or itch.io, making it simpler for new players to discover it. - Always updated:
When you update your HypeHype game, the embedded version is automatically updated everywhere it’s been placed.
Please note. Embedding is a new feature in beta test.
¶ How to get the iframe / embed code of your HypeHype game?
1. Open your HypeHype game on feed
2. Click "Share"
3. Select "Embed" to copy the code
Example code:
<!-- Use this on your website, blog and more -->
<iframe src="https://embed.hypehype.com/playlist/08f3d5aa51bf0058ca58e7"></iframe>
¶ Embedding your game on a website or a blog
1. Open Your Website’s HTML
In the HTML of the page or post where you want the HypeHype game to appear, choose the spot where you want the embedded game.
2. Paste the iframe Code
Paste the code you copied from HypeHype directly into your HTML.
3. Adjust Width/Height (Optional)
You can control the size of your embedded HypeHype content by adding width="" or height="" attributes, or style it via CSS.
4. Save and Preview
Once you’re done, save or publish the changes. Then open or refresh your web page to see the embedded HypeHype game in action.
¶ Embedding your HypeHype game on itch.io
itch.io is an open marketplace for indie creators, focused on independent video games. Here’s how to embed your HypeHype game there:
1. Export embed code to a single HTML file
- Create an HTML file that contains the iframe snippet in its body.
- Example code for itch.io (adjust src to your own game embed URL):
<!-- Use this on https://itch.io and similar -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HypeHype - YOUR GAME NAME</title>
<style>
html, body {
margin: 0;
padding: 0;
border: 0;
}
iframe {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
position: fixed;
top: 0;
border: 0;
}
</style>
</head>
<body>
<iframe src="https://embed.hypehype.com/playlist/08f3d5aa51bf0058ca58e7"></iframe>
</body>
</html>
2. Upload the HTML File to itch.io
- On itch.io, create or edit a project page.
- Upload the single HTML file that includes your iframe code.
- Choose "This game will be played in the browser" so itch.io knows it can be played in the browser.
3. Configure the Embed
- In the itch.io project settings, you may need to set the embed dimensions or other optional settings.
- Choose "Mobile friendly" and your project can run on mobile phones excluding iPhones and iPads.
- Choose "Automatically start on page load".
- Choose "Fullscreen button" to add a button to the bottom right corner of your embed to make it fullscreen.
- Once everything is uploaded, your HypeHype game should appear as a playable experience right in your itch.io page.
4. Publish your game
- Once you’re satisfied, make your project public and Save.
- Everyone visiting your itch.io game page can play the embedded HypeHype content directly in their browser.
- Example page and games: https://hypehype.itch.io.
5. For more details
- See the HTML5 Documentation