Embedding Retool and Public Apps

🚧

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=true query 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


Embedding Retool and Public Apps


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.