Inline integration

On this page you will find the javascript snippet drop on your page in order to render the game directly on your site.

The snippet

  <div class="monkeybytes-container">
    <view-port></view-port>
  </div>

  <script
    src="https://<clientId>-scripts.assets.monkeybytes.dev/<clientId>-client/application.js"
    data-white-label="<clientId>"
    data-environment="staging"
  >
  </script>

In the above example you will need to replace %clientId% with the clientId you have been given by Monkey Bytes.

How it works

The bare minimum required to render the game is the script-tag and the view-port-tag (<view-port>). The game will either replace the view-port tag or render inside it. What it will do will be controlled by Monkey Bytes and its decided based on which kind of routing logic already exists on your site.

The div with the class name monkeybytes-container is just an example to show that you can put the view-port more or less wherever you want on your page.

We do however recommend that you wrap our platform in a parent container which only contains the game. This way you can easilly apply different custom properties to the game without affecting anything else.

Custom elements & ShadowRoot

The game will render custom elements with shadowRoot inside it. 99% of the CSS will be contained within the shadowRoots, meaning that it will not bleed out and affect your page.