TEUTEUF GAMES

Distribution Integration Guide

TEUTEUF GAMES

Contents
Overview
Method 1. iFrame Embedding
Method 2: JavaScript Embedding
Appendix: Troubleshooting

Private and Confidential | teuteuf.fr 1

TEUTEUF GAMES

Overview
This document provides guidelines for integrating Teuteuf web games onto
your website or web application. Two primary methods are covered: iframe
embedding and JavaScript embedding.

Placing a Teuteuf game on a website or platform is a way to allow visitors

to play the game directly on your website without having to leave.

Our games are developed using a mix of HTML, CSS, JavaScript, and other
web frameworks including React and Angular depending on the title. Once
the game is on your site it can be played within the context of a web page.
The game resides on our web server and is accessed through a web
browser by end-users. You can also use CSS to style the game, such as
changing the border colour or rounding the corners.

Private and Confidential | teuteuf.fr 2

TEUTEUF GAMES

Method 1: iFrame Embedding

Embedding a game via an iframe is a straightforward way to include a
Teuteuf game title on your site without significant alterations to your site's
structure. To do this, you simply need to add an iframe element to your
document and specify the URL of the web game. The browser will then
load the web game and display it within the iframe.

Step by Step
a` Copy the iFrame Code
Obtain the iFrame snippet from Teuteuf Games once a partnership
agreement has been signed

<iframe src="https://teuteuf-worldle-
widget.pages.dev/" style="height: 100%, width: 100%,
border: 0"></iframe>

¸` Embed on Your Site

Insert the iFrame snippet into the HTML body of your webpage where you
want the game to display.

è` Adjust Dimensions (Optional)

Modify the width and height attributes to fit your layout.

ø` Verify the Integration

Load your webpage to ensure the game appears and is functional.

Private and Confidential | teuteuf.fr 3

TEUTEUF GAMES

Method 2: JavaScript Embedding

For a more integrated experience, you can use JavaScript to load games
dynamically. JavaScript embeds work differently from iframes. Instead of
creating a 'window' into another website, JavaScript embedding usually
involves incorporating interactive elements or entire applications — like
web games — directly into the fabric of a webpage. Here's how embedding
a Teuteuf game with JavaScript typically works.

Step by Step
ki Include a Script Tag
A <script> tag is added to your website's HTML, pointing to a JavaScript
file that contains the necessary code to load and display the game. This file
will be hosted on our CDN, the Teuteuf Games server, The tag might look
something like this:

<script src="https://example.com/path/to/game-
loader.js"></script>

¼i Activate the Script

When a user visits your webpage, their browser downloads and executes
the script referenced by the <script> tag. The script is responsible for
loading the game's assets, initializing the game, and rendering it within the
user's browser.

ði Dynamic DOM Manipulation

JavaScript typically creates and manipulates the Document Object Model
(DOM) to embed the game. It might add a <canvas> element where the
game will be drawn, or it could inject a combination of HTML, CSS, and
SVG elements that constitute the game's user interface.

Private and Confidential | teuteuf.fr 4

TEUTEUF GAMES

Method 2: JavaScript Embedding

4. Game Initialization
The JavaScript file includes all the necessary game logic. Once the DOM
elements are in place, the script initializes the game, often creating a game
loop that updates and renders the game elements in response to user
actions or as part of the gameplay mechanics.

id User Interaction
Users can interact directly with the game elements that are part of the
DOM. The JavaScript code handles user inputs such as mouse clicks,
keyboard presses, or touch gestures to provide interactivity.

—d Asset Loading
The JavaScript may load additional assets (such as images, sounds, and
animations) dynamically as needed. This is usually done via HTTP requests
initiated by the JavaScript code.

¾d Event Handling
The embedded JavaScript listens to various events, like user interactions or
timing events, to progress the game, render the next frame, or trigger
specific actions within the game.

äd Responsiveness
Our embedded JavaScript games are designed to be responsive, meaning
they can ad ust their size and layout depending on the user s device and
j '

screen size for an optimal gaming experience.

Private and Confidential | teuteuf.fr 5

TEUTEUF GAMES

Method 2: JavaScript Embedding

Example Embed Code
For a game, you might be given a snippet of code to include on your
website, which could look something like this:

<div id="game-container"></div>

<script src="https://example.com/path/to/game-
loader.js"></script>

<script>

GameLoader.load('game-container', {

width: 800,

height: 600

});

</script>

Advantages of JavaScript Embedding over iFrames

Seamless Integration
The game feels more like an integral part of the webpage, rather than a
separate document.

Performance
JavaScript embedding can be more performance-optimised as it avoids the
overhead of an iframe.

Private and Confidential | teuteuf.fr 6

TEUTEUF GAMES

Method 2: JavaScript Embedding

Customisation
Publishers have greater control over how the game interacts with the rest
of the webpage, including the ability to modify game settings or respond to
events on the surrounding page.

Direct DOM Access

The embedded game can directly access and manipulate the DOM of the
parent page (if allowed), which is not possible with iframes due to cross-
origin restrictions.

Appendix: Troubleshooting
Troubleshooting iframe issues can involve checking for syntax errors,
ensuring proper cross-origin permissions, adjusting responsive design
settings, and debugging with browser developer tools. Always consider the
latest best practices and browser compatibility as you work through these
solutions.

Issue #1 Content Not Displaying in Iframe

Symptoms The iframe loads, but the content does not
appear or shows a blank page.

Issue #1 Potential Solutions

Check the src URL Ensure that the URL is correctly entered and
that the content is accessible. Verify that the
server where the content is hosted is running.

Private and Confidential | teuteuf.fr 7

TEUTEUF GAMES

Appendix: Troubleshooting

Issue #1 Potential Solutions

Cross-Origin If the content is hosted on a different domain,
Policy ensure CORS (Cross-Origin Resource Sharing)
is properly configured to allow embedding.
HTTP vs. HTTPS If your host page is served over HTTPS, the
iframe content must also be served over
HTTPS to avoid mixed content blocking.

Issue #2 Iframe Content Not Responsive

Symptoms The game inside the iframe doesn't scale
properly on different devices or window sizes.

Issue #2 Potential Solutions

Responsive Ensure you’re using a responsive container for
Container the iframe as detailed in the previous section
on responsive design.
Viewport Settings Check that the <meta name="viewport"
content="width=device-width, initial-
scale=1"> tag is included in the head of the
HTML document of both the host page and
the iframe content.

Private and Confidential | teuteuf.fr 8

TEUTEUF GAMES

Appendix: Troubleshooting

Issue #3 Iframe Causes Horizontal or Vertical

Scrollbars
Symptoms Unwanted scrollbars appear on the host page
around the iframe.

Issue #3 Potential Solutions

Overflow Property Use overflow: hidden; on the iframe container
to hide scrollbars.
Correct Sizing Ensure the iframe and its container are sized
correctly with appropriate width and height
settings.

Issue #4 Iframe Border Visible

Symptoms There is an unwanted border around the
iframe.

Issue #4 Potential Solutions

Frameborder Use frameborder="0" in the iframe tag.
Attribute
CSS Styling Apply border: none; to the iframe in CSS.

Private and Confidential | teuteuf.fr 9

TEUTEUF GAMES

Appendix: Troubleshooting

Issue #5 Security Errors

Symptoms The browser console shows security errors
related to iframe content.

Issue #5 Potential Solutions

Content Security Ensure that the CSP headers on the host page
Policy (CSP) and the iframe content server are not
conflicting and allow for the embedding of the
content.
Sandbox Attribute If you’re using the sandbox attribute, ensure
you’re allowing necessary capabilities using
flags like allow-scripts and allow-same-origin,
while being aware of the security implications.

Issue #6 Script Errors or Blocked Interaction

Symptoms Scripts may not run as expected within the
iframe, or interactions between the parent and
the iframe content are blocked.

Issue #6 Potential Solutions

postMessage Ensure that you are using
window.postMessage for cross-document
communication and that the message event
listeners are set up properly to handle the
origin verification.

Private and Confidential | teuteuf.fr 10

TEUTEUF GAMES

Appendix: Troubleshooting

Issue #6 Potential Solutions

Feature-Policy Check if the Feature-Policy HTTP header is
Header blocking certain features within the iframe and
adjust it as necessary.

Issue #7 Full Screen Mode Not Working

Symptoms The content within the iframe does not enter
fullscreen mode when expected.

Issue #7 Potential Solutions

Allow Fullscreen Ensure that the allowfullscreen attribute is
present in the iframe tag.
Fullscreen API Use the Fullscreen API within the iframe
content to programmatically request fullscreen
mode, and ensure it is initiated by a user
action, like a click, as most browsers restrict
fullscreen changes to user-initiated events.

Private and Confidential | teuteuf.fr 11

TEUTEUF GAMES

Appendix: Troubleshooting
General Tips
X Keep your integration code updated with the latest versions provided by
Teuteuf GamesS
X Regularly test the game integration after updates to your website or
after Teuteuf Games releases updatesS
X For advanced issues, reach out to Teuteuf Games support with details
about the problem, please include browser console logs, and steps to
reproduce the issue.

Additional Support
By following this guide and using the troubleshooting appendix, you should
be able to integrate Teuteuf Games' web games into your site and address
common issues that may arise. For additional support, please contact
[email protected].

Private and Confidential | teuteuf.fr 12