| description |
|---|
Guide on how to embed Appsmith into an existing application |
Tools and Dashboards are great as an app and on a website, and now, you can have it both in one go by embedding apps to your website! In this guide, you'll learn how to embed Appsmith Apps into any website.
For this guide, we’ll be considering the Customer Support Dashboard from the demo app’s, and embed that into an HTML page. You can also check out the live preview here.
Firstly, let’s create an HTML page and call it `cs_dashboard.html`. Now, add the basic HTML structure to make it an HTML page:
<!DOCTYPE html>
<html>
<head>
<title> Customer Support Dahboard </title>
</head>
<body>
</body>
</html>
You’ll also have to make sure that your app is public to embed into other application. You can do this by clicking on the Share option on the top toolbar and toggle the viewing option to Public. Here’s a GIF showing the same:
Next, create an iframe tag and add the sharable link from share options to the src attribute with height and width set to 500 and 100% respectively:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe src="https://app.appsmith.com/applications/5f2aeb2580ca1f6faaed4e4a/pages/5f2d61b580ca1f6faaed4e79" height="700" width="100%"></iframe>
</body>
</html>
Awesome, by opening the HTML page in a web browser, you should see your application embedded into your HTML page. Below is a screenshot of the same:
If you want to get your app to use the whole page in your browser, you can still change your height and width parameters like so:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe src="https://app.appsmith.com/applications/5f2aeb2580ca1f6faaed4e4a/pages/5f2d61b580ca1f6faaed4e79"frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
</body>
</html>
Additionally, you can also see the Appsmith toolbar on the top, you can remove this by adding ?embed=true to the share URL. Update the code to the following:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe src="https://app.appsmith.com/applications/5f2aeb2580ca1f6faaed4e4a/pages/5f2d61b580ca1f6faaed4e79?embed=true" height="700" width="100%"></iframe>
</body>
</html>
Awesome! Now you can see the app without any toolbar! Below is a screenshot:
