To help out when you implement the overlay, below are examples of how to implement the overlay in the best possible way and a few things to think of.
- In order to have the game and overlay centered, the game container should have a width and height set statically (for example by javaScript on window resize). The container that wraps the game should have centered content, without any CSS applied by the casino, it will be
justify-content: center; - Ensure that the overlay is properly integrated by following one of these methods:
- Integration of the overlay into an HTML file.
- If the overlay is integrated into a JS file instead of an HTML file, confirm that the overlay is initialized only once.
- The game is centered but then gets slightly pushed to the side when the overlay expands.
- There is some padding on each side even when the Game Companion / Overlay is opened
- There is some padding in the bottom as well, both overlay and game are clearly visible without a scroll
- The height of the Game Companion / Overlay and the game should be the same
- When resizing the screen, it should follow the same padding rules and keep the same height as the overlay
- When reloading the page, the overlay should load again
- When switching to another language on the site, the language for the overlay should switch as well.
- When reloading the page, the overlay should load again
- When switching to another language on the site, the language for the overlay should switch as well.
- There is no empty space anywhere, only the game and the overlay.
- The game resizes properly once the overlay has been loaded, the overlay should never push down the bottom part of the game when the Game Companion / Overlay is closed
- When the Game Companion / Overlay is opened, the mini Overlay should be on the top of the game and the Overlay compact should be will display a portion on top, overlaying the game.
- When the overlay opens it should make the game window slightly tighter (as per the video)