Introduction to Full Integration

Overview

This guide provides detailed instructions for integrating web components into operator websites. It covers the necessary steps to import the necessary scripts, loading the components and communicating through events.

The web component technology is framework agnostic, and is preferred over a traditional iFrame integration as it gives a more streamlined deep integration with operators websites.

Importing the Component Script

The first step is to import the entrypoint script for the required component into the page (as a module).

This can be done through the use of a <script> tag:

<script type="module" src="<script-url>" defer></script>

Alternatively, the script can be created and appended dynamically to a specific element:

const loaderScript = document.createElement('script');
loaderScript.type = 'module'
loaderScript.src = `<script-url>`;
loaderScript.defer = true;

const targetElement = document.getElementById('container');
targetElement.appendChild(loaderScript);

Script Integrity Check

When importing a web component script, you can optionally validate its content using the browser's Subresource Integrity feature.

Integrity hashes for all available components are listed in the manifest.json file:

https://<cdn-url>/<bundle-version>/manifest.json

Example:

https://cdn.prod-gt-demo-games.gamnify.tech/v1.1.0/manifest.json

Simply include an integrity attribute containing the hash value(s) you want to check against, and set the crossorigin attribute to anonymous:

<script
  type="module"
  src="<script-url>"
  integrity="<hash-value>"
  crossorigin="anonymous"    
  defer
></script>

If the hashes do not match, the browser will automatically block the script from executing.

Note

In the event of a hash change, the Gamnify team will notify the operator.

The operator should retain both the old and new hashes to ensure a smooth transition.

Loading the Component

After importing the relevant script, a new web component will be registered and made available on the page. Simply add the component tag anywhere on the page and pass in the required attributes to load it.

The component will automatically load the necessary assets and then render its content onto the page, providing a seamless experience to users.

The below is an example of how this registration would look:

<gt-demo-component 
  attrOne="<value>" 
  attrTwo="<value>"
></gt-demo-component>

Details of each web component integration are provided in their dedicated pages.

Communication

Communication with web components is achieved through events.

Listening to Events

Events emitted by web components can be captured by adding event listeners for the relevant event types:

window.addEventListener('<event-type>', event => {
  const payload = (event as CustomEvent).detail;
  console.log('Event emitted with payload:', payload);
});

Dispatching Events

Similarly, events can be sent to an web component using the dispatchEvent function:

window.dispatchEvent(
  new CustomEvent('<event-type>', {
    detail: {
      key: 'value',    
    },
    composed: true,
  })
);

Details of events implemented by each web component are provided in their dedicated pages.