Skip to main content

Embedding Without SDK

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

Generate a JWT​

Similar to using the SDK, you will need to generate a JSON Web Token (JWT) for your user. See the Authenticating Users documentation for details on how to generate a JWT.

You can generate a JWT using your backend server or any other secure environment - the JWT should not be generated in the client's browser.

Authenticate the user​

Before displaying the iframe, you must call the authentication endpoint https://app.prismatic.io/embedded/authenticate with your customer's JWT. This will do two things:

  1. Validate your JWT
  2. Verify that the associated customer user exists (a user will be created if one does not exist).

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

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>