Embedding

Embedding a world on any website

Once the world is published - go the the world landing page on HiberWorld.com (opens in a new tab) and click on the Share button under the main image. Click on Embed and you get a snippet of iframe code to add to your website.

Important info:

  • The world has to be published to embed it, it can be published as unlisted, but will need to be published.
  • We run the iframe using sandbox so that the world can run on its own thread in the browser.
  • allow-same-origin is needed in order to use localstorage.
  • The site that is embedding the world must be served over HTTPS.

Making the iframe responsive

You can make the iframe responsive and make it cover the whole area of its container while keeping the correct aspect ratio. You do this by adding this css to target the iframe used to embed:

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

or as a style attribute

<iframe
  title="HiberWorld player"
  src="https://hiberworld.com/embed/gameID"
  frameborder="0"
  allowfullscreen
  sandbox="allow-same-origin allow-scripts allow-popups allow-modals allow-forms allow-pointer-lock allow-top-navigation"
  tabindex="0"
  style="aspect-ratio: 16 / 9; width: 100%;" />

Removing the Hiber cookie banner

As standard the embedded world will show the Hiber cookie banner. You can remove it, but if you do, you need to add Hiber cookies under third-party cookies in your cookie policy.

This is the list of cookies from Hiber. (opens in a new tab)

This is how you remove the cookie banner:

Add a hideCookieBanner=true to the embed url in the embed script, for example:

https://hiberworld.com/embed/4WNoqP83v?hideCookieBanner=true (opens in a new tab)

Other recommendations

  • You can choose any ratio for embedding, but the Hiber3D engine works best at a 16:9 ratio

Limitations

  • Hiber Embed is not guaranteed to work in apps, due to app store guidelines
  • Hiber Embed does not work in Incognito mode in the browser
  • Hiber Embed is a beta functionality - if you find issues, please report them to us and we will fix them as soon as possible. Also, please give feedback on these instructions if something is not clear.
  • When embedding, scrolling over the iframe surface won’t actually scroll the page since the event is consumed inside the engine

Squarespace

Embedding your site in Squarespace is easy provided you have access to modifying the page.

  1. Find the page where you want to add an embedded world
  2. Press ‘EDIT’ on the page, then ‘ADD BLOCK’
  3. Choose to add an ‘EMBED’ block.
  4. Edit the EMBED block, choose ‘Code Snippet’
  5. In ‘Embed Data’, paste in the full script as described above
  6. That’s it!
SoundExternal GLBs