Skip to main content

Embedding Applications in iFrames

You can embed your Superblocks applications in other tools by sharing them through an iFrame.

On this page:

  1. Embed an Application in an iFrame
  2. Remove the header for an embedded Application

Limitations​

Before getting started, there are some limitations to be aware of:

  • You cannot login or create a new account from the iFrame. Logging in and creating accounts must be done directly in Superblocks. Support for these operations within an iFrame is being worked on, so reach out to help@superblocks.com if this is a requirement.
  • Embedding into a website with a content-security-policy is not supported.
  • The hosting page must use HTTPS.
  • PDF components are not supported.

Creating your iFrame​

To embed an iFrame into your own apps, simply add it to the source HTML or JS/React of your webpage. Here is a basic HTML snippet that adds an <iframe> tag whose src attribute is the URL of the deployed Superblocks application.

<!DOCTYPE html>
<html lang="en">
<body>
    <iframe
        src="https://app.superblocks.com/applications/<ID>/pages/<ID>"
        height="500"
        width="500"
        title="Superblocks iFrame"
    />
</body>
</html>

Similarly, you can embed Superblocks as an iFrame in third party tools like Datadog.

Superblocks applications can be embedded in third party tools via iframes

Hiding the Superblocks header​

By default, logged in user see a black header on Superblocks appls even when embedded in an iFrame. To hide the header, you can set the parameter ?showSuperblocksHeader=false to the URL passed to the iFrame:

<!DOCTYPE html>
<html lang="en">
<body>
    <iframe
        src="https://app.superblocks.com/applications/<ID>/pages/<ID>?showSuperblocksHeader=false"
        height="500"
        width="500"
        title="Superblocks iFrame"
    />
</body>
</html>

On the left a Superblocks Application is displayed in an iFrame and on the right the same Application was embedded in an iFrame with the URL parameter set to hide the header:

Embed applications via iframe and remove the header with URL parameter