@grabjs/superapp-sdk
    Preparing search index...

    Class ContainerModule

    JSBridge module for controlling the WebView container.

    Provides methods to interact with the WebView container. This code must run on the Grab SuperApp's WebView to function correctly.

    ES Module:

    import { ContainerModule } from '@grabjs/superapp-sdk';
    const containerModule = new ContainerModule();

    CDN (UMD):

    <script src="https://cdn.jsdelivr.net/npm/@grabjs/superapp-sdk/dist/index.js"></script>
    <script>
      const containerModule = new SuperAppSDK.ContainerModule();
    </script>

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Methods

    close getSessionParams hideBackButton hideLoader hideRefreshButton isConnected onContentLoaded onCtaTap openExternalLink sendAnalyticsEvent setBackgroundColor setTitle showBackButton showLoader showRefreshButton

    Constructors

    Methods

    • Close the container and return to the previous screen.

      Returns Promise<CloseResponse>

      Confirmation that the container is closing.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Close the container
      const response = await container.close();

      // Handle the response
      if (isSuccess(response)) {
        console.log('Container closed successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Get the session parameters from the container.

      Returns Promise<GetSessionParamsResponse>

      The session parameters as a JSON string that can be parsed into an object.

      The native layer returns session parameters as a JSON string. Parse with JSON.parse(result.result) to use as an object. Session parameters can contain primitives, base64 encoded strings, or nested objects.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Get session parameters
      const response = await container.getSessionParams();

      // Handle the response
      if (isSuccess(response)) {
        const sessionParams = JSON.parse(response.result?.result || '{}');
        console.log('Session params retrieved:', sessionParams);
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Hide the back button on the container header.

      Returns Promise<HideBackButtonResponse>

      Confirmation that the back button is now hidden.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Hide back button
      const response = await container.hideBackButton();

      // Handle the response
      if (isSuccess(response)) {
        console.log('Back button hidden successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Hide the full-screen loading indicator.

      Returns Promise<HideLoaderResponse>

      Confirmation that the loader is now hidden.

      Should be called when the entry point has finished loading.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Hide loader
      const response = await container.hideLoader();

      // Handle the response
      if (isSuccess(response)) {
        console.log('Loader hidden successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Hide the refresh button on the container header.

      Returns Promise<HideRefreshButtonResponse>

      Confirmation that the refresh button is now hidden.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Hide refresh button
      const response = await container.hideRefreshButton();

      // Handle the response
      if (isSuccess(response)) {
        console.log('Refresh button hidden successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Check if the web app is connected to the Grab SuperApp via JSBridge.

      Returns Promise<IsConnectedResponse>

      The connection status, indicating whether the MiniApp is running inside the Grab SuperApp.

      Call this method to verify the connection status before using other features.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Check connection status
      const response = await container.isConnected();

      // Handle the response
      if (isSuccess(response)) {
        console.log('Connected to Grab SuperApp:', response.result.connected);
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Notify the Grab SuperApp that the page content has loaded.

      Returns Promise<OnContentLoadedResponse>

      Confirmation that the content loaded notification was sent.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Notify content loaded
      const response = await container.onContentLoaded();

      // Handle the response
      if (isSuccess(response)) {
        console.log('Content loaded notification sent successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Notify the client that the user has tapped a call-to-action (CTA).

      Parameters

      • request: string

        The action identifier for the CTA that was tapped.

      Returns Promise<OnCtaTapResponse>

      Confirmation that the CTA tap was notified.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Notify CTA tap
      const response = await container.onCtaTap('AV_LANDING_PAGE_CONTINUE');

      // Handle the response
      if (isSuccess(response)) {
        console.log('CTA tap notified successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Open a link in the external browser.

      Parameters

      • request: string

        The URL to open in the external browser.

      Returns Promise<OpenExternalLinkResponse>

      Confirmation of whether the external link was opened successfully.

      Call this method to open the specified URL in an external browser (outside of the Grab app).

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Open external link
      const response = await container.openExternalLink('https://grab.com');

      // Handle the response
      if (isSuccess(response)) {
        console.log('External link opened successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Use this method to track user interactions and page transitions.

      Parameters

      Returns Promise<SendAnalyticsEventResponse>

      Confirmation of whether the analytics event was sent successfully.

      You can use predefined constants to ensure consistency across the platform.

      Predefined Values:

      ContainerAnalyticsEventState, ContainerAnalyticsEventName

      Simple usage

      import {
        ContainerModule,
        isSuccess,
        isErrorResponse,
        ContainerAnalyticsEventState,
        ContainerAnalyticsEventName,
      } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Send analytics event
      const response = await container.sendAnalyticsEvent({
        state: ContainerAnalyticsEventState.HOMEPAGE,
        name: ContainerAnalyticsEventName.DEFAULT,
      });

      // Handle the response
      if (isSuccess(response)) {
        console.log('Analytics event sent successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Set the background color of the container header.

      Parameters

      • request: string

        The background color to set (hex format, e.g., '#ffffff').

      Returns Promise<SetBackgroundColorResponse>

      Confirmation that the background color was set.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Set background color
      const response = await container.setBackgroundColor('#ffffff');

      // Handle the response
      if (isSuccess(response)) {
        console.log('Background color set successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Set the title of the container header.

      Parameters

      • request: string

        The title text to display in the header.

      Returns Promise<SetTitleResponse>

      Confirmation that the title was set.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Set title
      const response = await container.setTitle('Home');

      // Handle the response
      if (isSuccess(response)) {
        console.log('Title set successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Show the back button on the container header.

      Returns Promise<ShowBackButtonResponse>

      Confirmation that the back button is now visible.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Show back button
      const response = await container.showBackButton();

      // Handle the response
      if (isSuccess(response)) {
        console.log('Back button shown successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Show the full-screen loading indicator.

      Returns Promise<ShowLoaderResponse>

      Confirmation that the loader is now visible.

      Remember to call ContainerModule.hideLoader when the operation completes.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Show loader
      const response = await container.showLoader();

      // Handle the response
      if (isSuccess(response)) {
        console.log('Loader shown successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    • Show the refresh button on the container header.

      Returns Promise<ShowRefreshButtonResponse>

      Confirmation that the refresh button is now visible.

      Simple usage

      import { ContainerModule, isSuccess, isErrorResponse } from '@grabjs/superapp-sdk';

      // Initialize the container module
      const container = new ContainerModule();

      // Show refresh button
      const response = await container.showRefreshButton();

      // Handle the response
      if (isSuccess(response)) {
        console.log('Refresh button shown successfully');
      } else if (isErrorResponse(response)) {
        console.error(`Error ${response.status_code}: ${response.error}`);
      } else {
        console.error('Unhandled response');
      }

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods