PostMessage API
The PostMessage API is a way to send messages between the parent casino window and the experience frontend that is iframed within it.
Experience → Casino
Remember to use window.parent.postMessage(message) to send messages to the casino window, not window.postMessage(message).
You can use @moneypot/frontend-utils for a type-safe way to post messages:
import { postMessageToParent } from "@moneypot/frontend-utils";
postMessageToParent({ type: "status", status: "ready" });
status (required)
Your experience must send this message when it has loaded. Else, it will remain hidden behind the casino loading screen.
window.parent.postMessage({ type: "status", status: "fatal" }, "*");
window.parent.postMessage(
{ type: "status", status: "ready", features: [] },
"*"
);
The casino shows a loading screen when a player visits your experience.
If your experience hits an error that it can’t recover from, send the fatal status. The casino will show an error page.
When your experience is ready to be revealed to the player, send the ready status.
You can opt-in to additional features with the features array.
Feature: “putSuccess”
This is UX polish for the player.
When sending the “putSuccess” feature, you are telling the casino that you will postMessage the putSuccess event every time the hub server confirms that it received a put transfer.
window.parent.postMessage({ type: "putSuccess", mpTransferId: string }, "*");
You can listen to hub’s GraphQL subscription:
subscription PutAlert {
hubPutAlert {
mpTransferId
}
}
When you opt-in to the “putSuccess” feature, the casino will show the user a pending spinner whenever they put money into your experience, and the spinner will remain until your experience sends the putSuccess event.
Opting in to the “putSuccess” feature but not sending putSuccess events is considered an API violation.
playerBalances (required)
Your experience must implement this message. It is essential for the casino’s “Take” form to provide a good UX.
If you don’t send this message, your experience may get disabled by the casino.
window.parent.postMessage(
{ type: "playerBalances", balances: { [currency: string]: number } },
"*"
);
Example:
window.parent.postMessage(
{
type: "playerBalances",
balances: { BTC: 10000, HOUSE: 20, TBTC: 0 },
},
"*"
);
Send this message to the casino upon initialization AND any time the player’s balances change.
The casino expects you to send all of the player’s balances every time even if only one balance has changed.
You must use this message to keep the player’s balances in sync as much as possible since it’s used to populate the “Take” form on the casino page. This form lets players request a withdrawal from your experience, so it’s very alarming to the player if this form shows stale balances.
path
(Optional)
window.parent.postMessage({ type: "path", path: string }, "*");
This message lets you update the casino URL so that you can support deep linking into your experience.
Send this message to the casino whenever your experience’s internal URL changes.
The casino will then update its URL with #path=<path>. e.g. https://moneypot.com/play/dice#path=/bets/123
When the user navigates to that URL, #path=/bets/123 is then appended to your experience iframe URL. e.g. https://dice.example.com/bets/123.
reload
window.parent.postMessage({ type: "reload" }, "*");
This message is used to reload the parent casino page and your experience iframe.
Sometimes you might want to reset/clean the experience state, and reloading the whole shebang is the easiest way to do that.
Casino → Experience
(The casino doesn’t send any messages to the experience, yet.)