Skip to main content

Embed Appsmith

Embedding Appsmith application is essential for a seamless user experience within your application ecosystem. This page shows how to embed an Appsmith app in your parent application.

Public Embed​

When embedding Appsmith in a public mode, the Appsmith app is publicly accessible, and users do not need to log in to Appsmith to access it. Follow the steps below to embed Appsmith in public mode:

  1. Navigate to App Settings > Share & Embed in your Appsmith application.
  2. Copy the provided Embed URL.
  3. Within the same App Settings > Share & Embed section, toggle the Make application public setting.
  4. If you haven't already, deploy your app by clicking the Deploy button in the top right corner.
  5. After deployment, use the following HTML <iframe> code snippet to embed the Appsmith app in your application. Replace <Embed_URL> with the actual Embed URL obtained in Step 2: 
      <!DOCTYPE html>
      <html>
      <head>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Your App Title</title>
      </head>
      <body>
          <!-- Replace "<Embed_URL>" with your actual Embed URL -->
          <iframe id="embeddedAppsmith" src="<Embed_URL>" scrolling="yes"
          seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
      </body>
      </html>
  6. Launch and access your application. You will see that the embedded Appsmith app is rendered in the HTML iframe.

Private Embed​

Enterprise

When embedding Appsmith in private mode, access to the Appsmith app is restricted to ensure only authorized users can access it which helps in increased security. Follow the steps below to embed Appsmith in private mode:

Prerequisites​

  • Ensure you have a self-hosted instance of Appsmith. See the Appsmith installation guides for detailed instructions on setting up your Appsmith instance.
  • Ensure that Frame ancestors include the parent app domain if you have restricted access for embedding Appsmith. For more information, see Frame ancestors.
  • Ensure that you've hosted Appsmith app under the sub-domain of the same domain as the parent app. For example, appsmith.company.com and internal.company.com sharing the same domain (company.com).

Embed Appsmith​

  1. Set up your Single Sign-On (SSO1) provider on your Appsmith instance. See the SSO configuration guides for detailed steps on configuring your SSO provider.
  2. Go to the App Settings > Share & Embed within your Appsmith application.
  3. If the SSO Method is not selected, select the preferred option.
  4. Copy the provided Embed URL.
  5. If you haven't already, deploy the Appsmith app by clicking the Deploy button in the top right corner.
  6. Use an HTML <iframe> and set the Embed URL (from step 4) as its source in your application. See the code snippet below, where the <iframe> with a unique ID, embeddedAppsmith will host the embedded Appsmith app: 
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Your App Title</title>
    </head>
    <body>
        <!-- Replace "<Embed_URL>" with your actual Embed URL -->
        <iframe id="embeddedAppsmith" src="<Embed_URL>" scrolling="yes"
        seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
    </body>
    </html>
  7. Launch and log into your application. Once you login to your parent app and are authenticated, you can see that the embedded Appsmith app is rendered in the HTML iframe. You can also watch the video on how to embed Appsmith in private mode.
  8. Appsmith automatically populates the following tokens, which you can use in your Appsmith apps to interact securely with your APIs and queries:
    • Client-side tokens - Use these tokens in JS Objects, APIs or queries on Appsmith
      • {{appsmith.user.idToken}}
      • {{appsmith.user.rawIdToken}}
      • {{ appsmith.user.userClaims }}
    • Server-side token - Use this in your Appsmith API header to securely authorize your users.
      • <<APPSMITH_USER_OAUTH2_ACCESS_TOKEN>>

For more information, see Identity and Access Tokens.

Troubleshooting​

If you face difficulties viewing the embedded Appsmith App, consider the following solutions:

  • Use HTTPS for the Appsmith instance and the parent application to avoid potential issues.
  • If you use Firefox, be aware of additional third-party cookie restrictions that may affect private embeds.
  • Users might experience problems when strict third-party cookie-sharing restrictions are enabled on their browsers.

If you continue to face issues, contact the support team using the chat widget at the bottom right of this page.

See also​

Footnotes​

  1. Single Sign-On (SSO) in private embeds isn't supported for GitHub OAuth 2.0. ↩