SuperApp Embedding in Web Application

This guide explains how to integrate the Inspektlabs SuperApp into your web application. The integration process consists of generating the SuperApp URL with a token and then embedding this URL into your application, with the option to handle events if required.

1. Generate SuperApp Token

To embed the SuperApp, you first need to generate a token from the Inspektlabs API.

Base URL

https://urlgen.inspektlabs.com/SuperAppToken

Payload:

{
  "apiKey": "<secret_key_provided_by_Inspektlabs>",
  "clientId": "<client_id_provided_by_Inspektlabs>",
  "caseId": "<unique_client_identifier>",
  "personaId": "<customised_persona_id_provided_by_Inspektlabs>"
}

Send a POST request to the endpoint with the given payload, and the response will return a token, which is a unique alphanumeric string.

Response:

{
  "token": "Generated_Token",
  "status": "true",
  "message": "Token added successfully"
}

2. Form the SuperApp URL

Append the generated token to the SuperApp base URL

https://superapp.inspektlabs.com/#<token>

Replace <token> with the actual value from the API response to generate the final SuperApp URL for embedding in your application.

3. Embed SuperApp in an Iframe

Embed the SuperApp URL in your web application using an <iframe>, and for each inspection, pass the generated URL as the iframe source.

<iframe
   src="https://superapp.inspektlabs.com/#<token>"
   title="Inspektlabs SuperApp"
   width="100%"
   height="100%"
   frameborder="0"
   allow="camera; geolocation; accelerometer; gyroscope; fullscreen">
</iframe>

Event Communication

The SuperApp communicates with the parent application using postMessage.

You must listen for and handle these messages to manage screen orientation and track progress.

• rotation → Switch screen orientation from portrait → landscape
• uploaded → Switch screen orientation from landscape → portrait

(also indicates that the final page of the SuperApp has been reached)

Embedding with React Web App

Here’s an example implementation in React for listening to SuperApp events:

import { useEffect } from "react";

function SuperAppFrame({ token }) {
  useEffect(() => {
    const handleMessage = (event) => {
      if (event.data === "rotation") {
        console.log("Switch to landscape mode");
      } else if (event.data === "uploaded") {
        console.log("Switch back to portrait mode - final page reached");
      }
    };

    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, []);

  return (
    <iframe
      src={`https://superapp.inspektlabs.com/#${token}`}
      title="Inspektlabs SuperApp"
      width="100%"
      height="100%"
      frameBorder="0"
      allow="camera; geolocation; accelerometer; gyroscope; fullscreen"
    />
  );
}

export default SuperAppFrame;

On this page

• SuperApp Embedding in Web Application
• 1. Generate SuperApp Token
• 2. Form the SuperApp URL
• 3. Embed SuperApp in an Iframe
• Event Communication
• Embedding with React Web App