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.
You can embed Retool via our SDK, share your app publicly through an iFrame, or use our pre-built React wrapper.
Embedding Retool
Quick start: vanilla JavaScript
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>
Quick start: React
Install the react-retool npm module and import into your project.
// with npm
$ npm install react-retool --save
// with yarn
$ yarn add react-retool
import Retool from 'react-retool';
function App() {
return (
<Retool url="https://retoolin.tryretool.com/embedded/public/f7607e1f-670a-4ebf-9a09-be54cf17181e"/>
);
}
export default App;
Visit the README on npm for detailed documentation about the React wrapper (link).
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.
Public apps and Retool plans
Public apps are only available on the Pro Plan - if you're on the Free Plan or the Startup Plan, you will need to upgrade to use this feature.
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.
On-premise Setup
If you're looking to embed a Retool app that's hosed via an on-premise Retool instance, please double check your environment variables. The COOKIE_INSECURE environment variable must be set to false.
Updated 16 days ago