You can embed Retool via our SDK, or share your app publicly through an iFrame.
Embedding Retool
Quick start
Include the Retool SDK and then initialize the dashboard using the following Javascript call.
<script src="https://cdn.tryretool.com/embed.js"> </script>
...
<script>
var rt = window.retool.RetoolDashboard(document.getElementById('container'), 'http://yourco.retool.com/editor/test_embeds')
</script>
This probably won't work on non-https websites!
Our authentication scheme requires Secure Cookies which only work in an https environment. Most modern browsers will not allow the inner iframe to access these cookies, and the embedded Retool will auto-logout.
Example
Here's a quick and simple example to get a feel for how to embed Retool in other web applications.
First, create a new HTML file and copy paste the below snippet in. Make sure to replace the placeholder URL with your actual Retool domain.
<html>
<head>
<script src="https://cdn.tryretool.com/embed.js"> </script>
<script>
function incrementCompanyId () {
var d = document.getElementById('companyid');
var curValue = parseInt(d.textContent)
d.textContent = String(curValue + 1)
}
</script>
</head>
<body>
<h1> Company id</h1><p id="companyid">13</p> <button onclick="incrementCompanyId()"> increment me </button>
<h1> User id</h1><p>1433</p>
<div style="height: 800px; width: 100%;" id='container'></div>
<script>
var rt = window.retool.RetoolDashboard(document.getElementById('container'), 'http://your.url.for.retool.here/editor/test_embeds')
</script>
</body>
</html>
Next, try pulling in some information from the host page like this:
We used the "Parent Window Query" and supplied the CSS selector for the company id in our host page (#companyid). Then we created a text component, and rendered that value using {{ query1.data }}.
If you press on the "Increment me" button - you'll see that Retool automatically picks up the changes from the host page.
Tip: Hiding the Retool nav bar
You can hide the Retool navigation bar using the
_hideNav=truequery parameter. Similarly, you can hide the query timer using_hideTimer=true.
Public Apps
You can share your Retool app publicly via a public link, and embed it in an iFrame in other applications or web pages. To get started, head over to the app you want to share, and make sure you're in edit mode. Click the "Share" button on the top right of your screen, and select the "Public" tab. You should see a link that you can quickly copy and share.
Here's an example of an embedded public Retool app from our Working with select components tutorial, via an iFrame:
You can add optional password protection to your public apps, too.
The authentication scheme here isn't rock solid though, so don't put sensitive data behind a password protected public Retool app.
Updated 3 months ago