¶ Take your games to the Web
With our new Embed feature, currently still in beta, you can now share your games outside of the HypeHype app and let players enjoy your games on the web.
¶ Why embed your HypeHype game?
Embedding your game is an important part of your games promotion. It drives more visibility for you and the game, more traffic and direct plays to your HypeHype games outside of the HypeHype platform.
- 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 games embed codes
¶ How to get the Website embed code
Generating your games embed codes could couldn't be simplier:
1. Open your HypeHype game on feed
2. Click "Share"
3. Select "Embed" to copy the code
Your embed code will now be copied to your devices clipboard.
This contains both the standard "iframe" embed code used for websites and blogs along with the itch.io specific code to save as an .html file.
Be sure to only copy the section that is needed for your specify use case.
¶ Creating the Html file
¶ On Mobile
It's possible to do this on your mobile device by downloading a code editor app from the iOS or Google Play store.
Search for "HTML editor" on your app store and install an app designed for writing code on mobile, like TrebEdit, Textastic, or QuickEdit.
¶ On Desktops
This will vary depending on if you're on a Mac or Windows machine, but the process is essentially the same.
Paste the exported code into your text editor of choice and ensure you save or export the file as an .html file. Often simply naming your file with the .html extension will create the file in the correct format.
EG:
File > Save As > My_Game_Name.html
¶ Embedding your game on a website or a blog
Example Website Code:
<!-- Use this on your website, blog and more -->
<iframe src="https://embed.hypehype.com/playlist/08f3d5aa51bf0058ca58e7"></iframe>
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:
¶ 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
Please Note: Use the specific code generated for your game, this is just an example and will not display your own game.
<!-- 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/game/trials-obby/r/vFtFzLVICBgBOt"></iframe>
</body>
</html>
¶ Uploading your HTML File to itch.io
- On itch.io, create or edit a project page.
-
Enter all the required game details as per their on screen instructions such as game name and game description.
-
Upload the single .HTML file that includes your iframe code.
- In the Project Kind dropdown, select: HTML - You have a ZIP or HTML file that will be played in the browser.
- In the Upload section, select the option: This File will be played in browser.
¶ Embed Options
Once your .HTML file is uploaded, you can set the embed dimensions and other optimal settings.
¶ Viewport dimensions
For Landscape Games we recommend starting with:
Width = 1024 / Height = 768
For Portrait Games we recommend starting with:**
Width = 450 / Height = 800
We recommend experimenting with these sizes to get your desired result.*
¶ Frame Options
- 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.
¶ Cover Images, Video and Screenshot assets
itch.io allows you to add custom assets to your game page to help market your game and enhance the overall appeal. This is important to take the time to really show off what your game has to offer potential players.
¶ Custom Cover Image
Think of this as your games Thumbnail, much like in HypeHype. You can easily use the functionality inside HypeHype to save your games thumbnail to you device.
PRO TIP: When taking a thumbnail for itch.io using the HypeHype functionality, position your most important information towards the bottom of the screenshot so that it's cropped correctly once uploaded.
¶ Screenshots
Using the same process as above, take a series of 3 to 5 thumbnails to show off your games most exciting visuals. If you're on a desktop, these can be created using basic photo editting software or graphics packages.
We recommend the following Screenshot Dimensions:
Landscape: 1920x1080
Portrait: 1080x1920
¶ Game Trailer / Video
If you do have a trailer for your game, it's a great idea to upload this to youtube and share the link in your page too!
Consider recording so game footage when playing your game. If a picture or screenshot is worth a thousand words, then a video is considered worth significantly more, as it can convey a story, emotions, and movement making it much more impactful than a single image.
¶ Publish your game
- In the Visibility & access section, we recommend setting this to draft so you can test properly before setting your game to public.
Once you’re satisfied with how everything is looking, 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.
For further details on HTML files:
- See the HTML5 Documentation