Loading the Iframe
Once the signature is generated, the casino can embed the LoyaltyGyre iframe into their platform to display rewards and allow users to interact with the loyalty system. The iframe URL includes the necessary parameters and the generated signature to securely load the content for the player.
Iframe Parameters
The following parameters must be included in the iframe URL:
- casino: The casino's unique ID, assigned by LoyaltyGyre.
- player: The player's unique ID.
- balance: The player's credits balance.
- box: The ID of the box to display or interact with.
- timestamp: The current timestamp in UTC (format:
YYYY-MM-DD HH:MM:SS). - sig: The signature generated by hashing the parameters along with the API key.
Iframe URL Format
The iframe URL should follow this format:
https://app.loyaltygyre.com/box?casino=CASINO_ID&player=PLAYER_ID&balance=BALANCE&box=BOX_ID×tamp=TIMESTAMP&sig=SIGNATURE
Resizing the Iframe Dynamically
To improve user experience, the iframe should automatically adjust its height based on the content it displays. This avoids unnecessary scrollbars and ensures the iframe fits within the casino’s platform layout.
Iframe code for dynamic resizing
<script>
// Dynamically resize iframe based on its content
// (remove vertical scrollbar inside iframe)
window.addEventListener('message', event => {
if (event.data.iframeHeight) {
const iframe = document.getElementById('loyaltygyre');
iframe.style.height = event.data.iframeHeight + 'px';
}
});
</script>
<iframe id="loyaltygyre" src="<IFRAME URL>"
style="width: 100%; height: 500px; border: none;"></iframe>
Workflow
sequenceDiagram
participant P as Player
participant C as Casino
participant L as LoyaltyGyre
autonumber
P->>C: Open loyalty page
Note over C: Generate single-use Signature
destroy C
C-->>P: Use signature<br> in iframe URL
P->>L: Load iframe with signed URL
Note over P,L: Player is authenticated on LoyaltyGyre