Basic Example - TMG Web Catalog SDK

TMGWebCatalogSDK.Component.CounterDisplay

TMGWebCatalogSDK.Component.CounterController

TMGWebCatalogSDK.Component.ProfilePhotoSingle

TMGWebCatalogSDK.Component.ProfilePhoto

TMGWebCatalogSDK.Component.Profile (Fullscreen)

Open Profile

Integration Code

      /* Our default SDK package is an ES6 module. This is supported by all modern browsers.
       * See: https://caniuse.com/es6-module
       *
       * Host applications should host a copy of the SDK and import it, as shown below. It's also
       * required to set the script as type="module".
       */
      import TMGWebCatalogSDK from './index.js';
      let sdk;

      const getParameters = () => ({
        appAuthToken: document.getElementById('sdk-auth-token-input').value || undefined,
        credentials: document.getElementById('sdk-auth-credentials-input').value || undefined,
        network: document.getElementById('sdk-auth-network-input').value || undefined,
        hostAppName: document.getElementById('sdk-auth-app-input').value || undefined,
        hostAppVersion: document.getElementById('sdk-auth-app-version-input').value || undefined,
        userId: document.getElementById('sdk-user-id-input').value || undefined,
      });

      const openProfile = () => {
        if (sdk) {
          const {
            appAuthToken,
            credentials,
            network,
            hostAppName,
            hostAppVersion,
            userId,
          } = getParameters();

          const { open } = sdk.requestComponent(
            TMGWebCatalogSDK.Component.Profile,
            TMGWebCatalogSDK.Display.DisplayMode.Enum.Fullscreen,
            {
              id: `${network}:user:${userId}`,
            },
          );

          open();
        }
      };

      const $profileFullscreen = document.querySelector('#tmg-profile-fullscreen');
      $profileFullscreen.addEventListener('click', openProfile);

      window.sdkInit = () => {
        // cleanup
        [
          '#tmg-counter-display',
          '#tmg-counter-controller',
          '#tmg-profile-singlephoto',
          '#tmg-profile-photo',
        ].forEach((sel) => {
          if (document.querySelector(sel)) {
            document.querySelector(sel).innerHTML = '';
          }
        });

        const {
          appAuthToken,
          credentials,
          network,
          hostAppName,
          hostAppVersion,
          userId,
        } = getParameters();

        sdk = new TMGWebCatalogSDK({
          locale: 'en-US',
          // locale: 'pt-BR',
          appAuthToken,
          credentials,
          network,
          hostAppName,
          hostAppVersion,
          // overrideWebUrl: 'http://localhost:3000',
        });

        sdk.requestComponent(TMGWebCatalogSDK.Component.CounterDisplay, '#tmg-counter-display');
        sdk.requestComponent(TMGWebCatalogSDK.Component.CounterController, '#tmg-counter-controller');

        sdk.requestComponent(TMGWebCatalogSDK.Component.ProfilePhotoSingle, '#tmg-profile-singlephoto', { id: `${network}:user:${userId}`, position: 1 });
        sdk.requestComponent(TMGWebCatalogSDK.Component.ProfilePhoto, '#tmg-profile-photo', { id: `${network}:user:${userId}` });

        /**
         * Example of listening to and treating data from events that come from the catalog.
         */
        TMGWebCatalogSDK.on(
          TMGWebCatalogSDK.CommunicationEvents.ProfileChatMessage,
          (payload, success, error) => {
            if (Math.floor(Math.random() * 2) === 0) {
              success({
                responseForEvent: TMGWebCatalogSDK.CommunicationEvents.ProfileChatMessage,
                statusCode: 200,
              });
            } else {
              error({
                responseForEvent: TMGWebCatalogSDK.CommunicationEvents.ProfileChatMessage,
                statusCode: 500,
              });
            }
          },
        );
        
        TMGWebCatalogSDK.on(
          TMGWebCatalogSDK.CommunicationEvents.ProfileFavoriteToggle,
          (payload, success, error) => {
            if (Math.floor(Math.random() * 2) === 0) {
              success({
                responseForEvent: TMGWebCatalogSDK.CommunicationEvents.ProfileFavoriteToggle,
                statusCode: 200,
              });
            } else {
              error({
                responseForEvent: TMGWebCatalogSDK.CommunicationEvents.ProfileFavoriteToggle,
                statusCode: 500,
              });
            }
          },
        );
      };

      window.sdkInit();

      const $form = document.getElementById('parameters-form');
      $form.addEventListener('submit', (e) => {
        e.preventDefault();
        window.sdkInit();
      });