Skip to main content

Embedding Without SDK

While we strongly recommend using the Embedded SDK to embed the Prismatic marketplace, some frontend tech stacks prohibit Node module installation. If your frontend tech stack requires that you write custom HTML and JavaScript, you can still embed the marketplace.

The embedded marketplace is essentially an iframe pointing to https://app.prismatic.io/integration-marketplace/ with a few query parameters:

  • jwt: The JWT you generate (see Authenticating Users)
  • embedded: Must be set to "true"
  • theme: Can be LIGHT or DARK

Before displaying the iframe, you must call the authentication endpoint https://app.prismatic.io/embedded/authenticate with your customer's JWT. This will validate your JWT and verify that the associated customer user exists (a user will be created if one does not exist).

In this pure HTML/JS example, on page load we fetch a JWT for our user and then call the authentication endpoint. Once we receive a response, we set the src property of our iframe appropriately.

<html>
  <head>
    <script type="text/javascript">
      addEventListener("load", (event) => {
        const baseUrl = "https://app.prismatic.io";

        // Replace this with a function that fetches the real JWT from an API:
        const jwt = "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI...";

        // Send an authenticate request first to verify the JWT is valid.
        // This will also create the embedded user if they don't already exist
        fetch(`${baseUrl}/embedded/authenticate`, {
          method: "POST",
          headers: {
            Authorization: `Bearer ${jwt}`,
          },
          mode: "no-cors", // Required in some cases
        })
          .then((response) => {
            // Construct an embedded marketplace URL with JWT
            const embeddedUrl = new URL(`${baseUrl}/integration-marketplace/`);
            embeddedUrl.searchParams.set("jwt", jwt);
            embeddedUrl.searchParams.set("embed", "true");
            embeddedUrl.searchParams.set("theme", "LIGHT");

            // Set the iframe's src property to the constructed URL
            const iframeElement = document.getElementById("my-embedded-iframe");
            iframeElement.src = embeddedUrl.toString();
          })
          .catch((error) => {
            alert(`An error occurred when authenticating: ${error}`);
          });
      });
    </script>
    <style>
      .embedded-iframe {
        width: 100%;
        height: 50vh;
      }
    </style>
  </head>
  <body>
    <h1>Pure HTML Embed Example</h1>
    <iframe id="my-embedded-iframe" class="embedded-iframe" src="about:blank">
    </iframe>
  </body>
</html>