Embed Appsmith
Tools and Dashboards are great as an app and on a website, and now, you can have both by embedding apps into your website. In this guide, you'll learn how to embed Appsmith Apps into any website.
Creating HTML page
Firstly, lets create an HTML page and call it `dashboard.html
`. Now, add the basic HTML structure to make it an HTML page:
<!DOCTYPE html>
<html>
<head>
<title> Customer Dashboard </title>
</head>
<body>
</body>
</html>
You'll also have to ensure your app is public to embed into other applications. You can do this by clicking on the Share option on the top toolbar and toggle the viewing option to Public. Here's a video example:
Next, create an iframe
tag and add the shareable link from share options to the src
attribute with height and width set to 500
and 100%
, respectively.
Include the meta tag in the head to ensure that the embedded application renders responsively on different screen sizes:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Customer Support Dashboard </title>
</head>
<body>
<iframe src="<LINK_OF_APP>" height="700" width="100%"></iframe>
</body>
</html>
Opening the HTML page
If you are opening the HTML page as a file
, the browser won't allow you to do that. The HTML file needs to come from a server.
After creating the HTML page, save it as dashboard.html
and have an HTTP server serve it. There are several ways to do it as described below:
Serving an HTML file with Node.js
Once you have created your HTML file, create a new app.js``
`` file. Paste the below-mentioned code and edit your HTML filename.
const http = require('http');
const fs = require('fs');
http.createServer(function(req, res) {
res.writeHead(200, { 'content-type': 'text/html' });
const html = fs.readFileSync('./dashboard.html');
res.end(html);
}).listen(3000, () => {
console.log('running on 3000');
});
Now, in the terminal, run node app.js
This would prompt a running on 3000
message. Next, go to your browser and open http://localhost:3000/
This opens your HTML file.
Running npx http-server
Here's another way to open an HTML file.
Now, if you have Node JS installed, go to the command terminal and run:
npx http-server
Next, open http://localhost:8080/dashboard.html, and it should open the HTML File.
Modifying layout
You can modify the layout of your embedded code directly from within your Appsmith app and control the appearance when displayed on a website or external application.
- To change the layout, open the
app settings
. - Click on
Share & Embed
. - Update the Embed size as desired.
- Copy the updated embed code.
If you want to get your app to use the whole page in your browser, you can change your height and width parameters, like shown below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"
<title></title>
</head>
<body>
<iframe src="<LINK_OF_APP>" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
</body>
</html>
Remove Appsmith top bar
You can remove the Appsmith top bar with page tabs by appending ?embed=true
to the share URL. Alternatively, you can get this prepared URL from the App Settings
on the canvas, as shown below.
- Click on
App settings
in the Canvas properties. - Click on
Share & Embed
. - Toggle
Show navigation bar
. - Copy the updated embed code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Customer Support Dashboard </title>
</head>
<body>
<iframe src="<LINK_OF_APP>" height="700" width="100%"></iframe>
</body>
</html>
Embedding private apps
Appsmith supports embedding private apps only on self-hosted Business Edition instances.
You can embed private Appsmith apps on your website or in an external application and authenticate users seamlessly through SSO.
Prerequisites
- The Appsmith app and the parent app should be under sub-domains of the same domain. For eg.
appsmith.company.com
andinternal.company.com
. - You must configure the same SSO identity provider(IDP) on the Appsmith and the parent applications.
To configure Appsmith to use SSO, you can append the below parameters (based on your SSO type) to the URL path of the app you're embedding.
ssoTrigger=oidc
for OIDC SSO.ssoTrigger=saml
for SAML 2.0 based SSO.ssoTrigger=google
for Google OAuth 2.0 SSO
General notes
- The feature may not work on
HTTP
URLs. UseHTTPS
for both the Appsmith instance and the parent application. - Firefox has additional third-party cookie restrictions that may cause issues with private embeds.
- Users may see issues when strict third-party cookie sharing restrictions are enabled on the browser.
- SSO in private embeds isn't supported for GitHub OAuth 2.0.
- For Google OAuth 2.0 configuration, the parent and child can be two OAuth 2.0 clients under the same project.