HTML5 v2 SDK
Info
We recommend that you migrate to the new HTML5 v3 SDK, which contains more features.
Requirements
When integrating the CrazyGames SDK, make sure to follow our requirements. They will help you use the SDK in the best way possible and guide you in terms of ad placements and account integration.
Installation
You can install the SDK by including the following script in the head of your game's index.html
:
The SDK doesn't need to be initialized before being used. The initialization is done internally.
Development
Your game runs on different domains during development/release, which the SDK considers to be different environments.
- The
localhost
and127.0.0.1
domains are consideredlocal
environments. Advertisements are not available. Instead, an overlay text will be displayed. For other events such as happy time, gameplay start, etc. the console output can be consulted. If you are using a different domain/ip for local development, you can always enforce thelocal
environment by appending the?useLocalSdk=true
query parameter to the URL in your browser. - On
CrazyGames
domains the SDK has thecrazygames
environment, where it functions properly. - On any other domains (including your domain on which you may host your game) the SDK has the
disabled
environment. All the calls to the SDK methods will throw an error (or call the error callback). To prevent this, we recommend checking on which environment the SDK is running, and avoid making use of it outsidelocal
orcrazygames
environments.
You can check the environment like this:
You can check if the game is running in QA Tool like this:
To simulate the setup used on CrazyGames, download this template. The file sdk.html
uses our game loader to display your game. It assumes that index.html
contains the html of your game. This lets your game run using the same setup as it would on crazygames.com. You'll just have to browse to localhost:port/sdk.html
to see our game loader in action.
Info
When you upload your game we only look at your index.html
file, and provide the game loader for you. The sdk.html
page will not be used: keep any logic out of that file, and make sure that your index.html
does not include the game loader.
Modules
The SDK has the following modules:
ad
- display video ads, detect adblockersbanner
- display bannersgame
- various game eventsuser
- for interacting with the currently signed in user
Each one of these modules can be accessed as follows:
window.CrazyGames.SDK.[moduleName]
, for example window.CrazyGames.SDK.ad
.
Other
Disable unwanted page scroll
By default, browsers scroll the page when a user presses spacebar or the arrow keys. Your game should prevent this behavior. You might not notice it in development because your game is taking on the full height of the window. But when your game is embedded on CrazyGames, you’ll need to prevent scroll. You can do so by adding the following code to your game:
window.addEventListener("wheel", (event) => event.preventDefault(), {
passive: false,
});
window.addEventListener("keydown", (event) => {
if (["ArrowUp", "ArrowDown", " "].includes(event.key)) {
event.preventDefault();
}
});
Sitelock
We currently do not have a sitelock for plain Javascript games but do recommend building in some protections to avoid your game files getting stolen. Check the sitelock page for more info.
Migration from HTML5 v1 SDK
You can find the docs for the old HTML5 v1 SDK here.
Init
You don't need to call init()
anymore. The new SDK does the initialization on its own.
Global event listeners
The global events ('adStarted'
, 'adFinished'
, etc.) are gone. Now the methods accept a callback object with various callbacks. Although callbacks can be passed to almost every SDK method in the SDK V2, they are most useful for ads, where you need to know when an ad starts or completes.
const crazysdk = window.CrazyGames.CrazySDK.getInstance();
// init and wait until it gets initialized...
crazysdk.removeEventListener("adFinished", () => console.log("End rewarded ad (callback)"));
crazysdk.removeEventListener("adError", (error) => console.log("Error rewarded ad (callback)", error));
crazysdk.removeEventListener("adStarted", () => console.log("Start rewarded ad (callback)"));
crazysdk.requestAd("rewarded");
Single banner request
The new requestBanner
method can request a single banner at a time. The limit of maximum 2 banners of the same size is still present.