Embedding Games

Deploy your customized games on your website, WordPress, Wix, Squarespace, Shopify, or any platform that supports HTML.

Every game you publish on Reskinnable has a unique URL like:

https://play.reskinnable.com/a/x/wmeL/

This URL is all you need to embed your game. All examples below use a standard <iframe> tag, which works on every platform and browser.

Quick Start

Standalone Game Page

Host the game full-page on your own domain. Visitors see your URL, not ours.

Full HTML page

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Play Our Game</title>
  <style>
    * { margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; overflow: hidden; }
    iframe { width: 100%; height: 100%; border: none; }
  </style>
</head>
<body>
  <iframe
    src="https://play.reskinnable.com/a/x/wmeL/"
    allowfullscreen
  ></iframe>
</body>
</html>

View live example

Embed in Your Website

Place the game within your existing site layout alongside your navigation, content, and footer.

Embed code

<div style="width: 100%; max-width: 480px; margin: 0 auto;">
  <div style="aspect-ratio: 9/16; width: 100%;">
    <iframe
      src="https://play.reskinnable.com/a/x/wmeL/"
      style="width: 100%; height: 100%; border: none;"
      allowfullscreen
    ></iframe>
  </div>
</div>

View live example

Platform Guides

Embedding on CMS Platforms

All platforms use the same embed code. Paste this into your platform's HTML or code block:

Universal embed code

<div style="width: 100%; max-width: 480px; margin: 0 auto;">
  <div style="aspect-ratio: 9/16; width: 100%;">
    <iframe
      src="https://play.reskinnable.com/a/x/wmeL/"
      style="width: 100%; height: 100%; border: none;"
      allowfullscreen
    ></iframe>
  </div>
</div>

WordPress

Open the page or post in the WordPress editor
Click the + button to add a new block
Search for "Custom HTML" and select it
Paste the embed code above
Click Preview to verify it looks correct, then Publish

Note: WordPress.com free plans do not support iframes. You need a paid Business plan or higher, or self-hosted WordPress.org.

Wix

Open your site in the Wix Editor
Click Add Elements (+) in the left sidebar
Select Embed Code → Embed HTML
In the HTML Settings panel, choose "Code" and paste the embed code above
Resize the element to fit your page layout
Click Update, then Publish

Note: Wix sandboxes HTML embeds, so fullscreen may not work. The game URL must use HTTPS.

Squarespace

Edit your page and click Add Block or the + icon
Select Code from the block menu
In the code editor, make sure "Display Source" is unchecked
Paste the embed code above
Click outside the block and Save

Note: Code Blocks require a Squarespace Business plan or higher.

Shopify

From your Shopify admin, go to Online Store → Themes
Click Customize on your active theme
Navigate to the page where you want the game
Click Add section → Custom Liquid
Paste the embed code above into the Liquid field (add padding: 40px 0; to the outer div for spacing)
Click Save

Other platforms: Any platform that lets you insert custom HTML will work. Look for "HTML block", "Code embed", or "Custom code" in your CMS.

Advanced

URL Parameters

Append these to your game URL to control behavior. Parameters can be combined.

Parameter	Effect
`?autoplay=true`	Skips the menu screen and starts the game immediately
`?mute=true`	Starts the game muted
`?mute_mode=all`	Mute button silences all audio (music + sound effects). Default is music only.
`?exit_url=https://...`	After the game ends, changes "Play Again" to "Continue" and redirects to this URL

Example: Autoplay & muted

https://play.reskinnable.com/a/x/wmeL/?autoplay=true&mute=true&mute_mode=all

Game Events & Messaging API

Listen for game lifecycle events using the browser's postMessage API.

Reskinnable games send events to the parent page via window.postMessage. Each message includes a source field set to "reskinnable-game" so you can filter out unrelated messages.

Event	Description	Payload
`GAME_LOADED`	Game assets loaded and ready to play	None
`GAME_START`	Player started a round	None
`GAME_OVER`	Round ended	`{ score: number }`

Listening for events

window.addEventListener("message", (event) => {
  // Only handle messages from Reskinnable games
  if (event.data.source !== "reskinnable-game") return;

  switch (event.data.type) {
    case "GAME_LOADED":
      console.log("Game ready!");
      break;
    case "GAME_START":
      console.log("Player started the game");
      break;
    case "GAME_OVER":
      console.log("Score:", event.data.payload.score);
      // Example: send score to your analytics
      // analytics.track("game_completed", { score: event.data.payload.score });
      break;
  }
});

View interactive demo

Common use cases

Post scores to a leaderboard or database
Track game events in your analytics platform (GA4, Mixpanel, etc.)
Show a custom completion screen or redirect after the game ends
Trigger rewards, discounts, or unlocks based on player score

Responsive Tips

Our games are designed for a 9:16 portrait aspect ratio. Use CSS to keep them responsive.

Responsive wrapper

<style>
  .game-container {
    width: 100%;
    max-width: 480px;  /* prevents game from getting too wide */
    margin: 0 auto;    /* centers on page */
  }
  .game-wrapper {
    aspect-ratio: 9 / 16;
    width: 100%;
  }
  .game-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
</style>

<div class="game-container">
  <div class="game-wrapper">
    <iframe src="https://play.reskinnable.com/a/x/wmeL/" allowfullscreen></iframe>
  </div>
</div>

max-width: 480px — Prevents the game from stretching too wide on desktop. Adjust to your layout.

aspect-ratio: 9 / 16 — Maintains the correct proportions at any size. Supported by all modern browsers.

margin: 0 auto — Centers the game horizontally in its container.

Troubleshooting

Game shows a blank white area

Make sure your website uses HTTPS. Browsers block iframes from HTTPS sources (like our games) when loaded on HTTP pages. This is called "mixed content" and is the most common issue.

Game doesn't go fullscreen

Ensure your iframe has the allowfullscreen attribute. Some platforms like Wix sandbox iframes and may block fullscreen regardless.

Game appears but is cut off or too small

Use the responsive wrapper from the Responsive Tips section above. The aspect-ratio: 9/16 CSS property ensures the game always displays at the correct proportions.

Sound doesn't play automatically

This is expected browser behavior. All modern browsers require a user interaction (click or tap) before playing audio. The game handles this automatically—sound will start after the player's first interaction.

Need help?

If you run into any issues embedding your game, reach out and we'll help you get it working.

Contact Support