Created
April 22, 2024 23:05
-
-
Save CodyWatters/8a600a34d79cd6f4f38c2650c2f6b580 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<body> | |
<div> | |
<!-- | |
This is more-or-less the setup steps for how to embed a retool app with javascript & html | |
https://docs.retool.com/apps/web/guides/embed-apps#pass-data-to-an-embedded-app . It should | |
be roughly the same for React apps. | |
--> | |
<script src="https://cdn.tryretool.com/embed.js"> </script> | |
<!-- | |
This is the parent app; assume it's your custom app. | |
It's an app with two buttons that switch the ID of a div between 'foo' and 'bar'. | |
--> | |
<h1> | |
This is a custom non-retool app (the parent app) | |
</h1> | |
<script> | |
const changeDivId = (fromId, toId) => { | |
let div = document.getElementById(fromId); | |
if (div) { | |
div.id = toId; | |
div.innerHTML = 'Div ID is now: ' + toId; | |
} | |
} | |
</script> | |
<h2 id="bar">Initial Div ID: bar</h2> | |
<button style="padding: 4px; margin: 8px" onclick="changeDivId('bar','foo')">Change Div ID to foo</button> | |
<button style="padding: 4px; margin: 8px" onclick="changeDivId('foo','bar')">Change Div ID to bar</button> | |
<div style="padding: 4px; margin: 8px" >Below this is the retool app</div> | |
<div style="height: 300px; width: 100%;" id="container"></div> | |
<script> | |
/* | |
The embed URL should be your app's embed URL | |
*/ | |
const yourEmbedURL = 'https://retoolin.retool-qa.com/embedded/public/c4a80a84-e101-453b-8a03-d7410b899b01' | |
const rt = window.retool.RetoolDashboard(document.getElementById('container'), yourEmbedURL) | |
</script> | |
</div> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment