Skip to main content

Embedding Without SDK

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

At its core, the embedded marketplace is an iframe of https://app.prismatic.io/integration-marketplace/ with a few query parameters:

  • jwt which you generate (see Authenticating Users).
  • embedded which should have a value of "true"
  • theme which 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 ensure that your JWT is valid, and that the associated customer user exists (a user will be created if they do not exist).

In this pure HTML/JS example, on page load we fetch a JWT for our user and then call the authenticate endpoint. Once we get 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", // Needed 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 occured 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>