Frontend Integration

This page provides instructions on setting up the frontend integration for your platform. The frontend code provided below demonstrates the necessary steps to interact with the GameChute API.

Setup

To integrate your frontend with the game platform API, follow these steps:

1. Add the iframe to your template

   Add an iframe element to your HTML template. This iframe will load the game UI.

   <iframe id="hexzard" src="https://www.hexzard.com/games/dice"></iframe>

2. Listen for the ready event from the iframe

   Add an event listener to listen for the "message" event from the iframe. This event will be triggered when the iframe is ready to receive data.

   const GAME_HOST = "https://www.hexzard.com";
    
   window.addEventListener(
     "message",
     async (event) => {
       if (event.origin !== GAME_HOST) return;
    
       const sessionId = await retrieveSessionToken();
    
       const message = {
         sessionId,
         currencyCode: "BTC",
         languageCode: "en",
       };
    
       event.source.postMessage(message, GAME_HOST);
     },
     false
   );

3. Fetch the session token from your backend

   Implement a function to fetch the session token from your backend. This token will be used to authenticate the user with the game platform API.

   async function retrieveSessionToken() {
     const res = await fetch("/session", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
     });
    
     const data = await res.json();
    
     const sessionId = data?.result?.data?.json?.createdSession;
    
     if (res.status !== 200 || !sessionId) {
       throw new Error("Failed to retrieve a session id");
     }
    
     return sessionId;
   }

   This function sends a POST request to the /session endpoint on your backend to retrieve the session token. Adjust the endpoint URL as per your backend implementation.

4. Send the session token to the game platform

   Once you have obtained the session token, send it to the game platform API using the postMessage method.

   event.source.postMessage(message, GAME_HOST);

Considerations

• Customize the additional parameters in the message object as per your requirements, such as the currency code, language code and theme.
• Handle any error scenarios appropriately, such as when the session token retrieval fails or when the response status is not as expected.