Using Retool as a Front Plugin

I am attempting to embed Retool in Front as a plugin—see Overview.

I am struggling with where to install the Front SDK in Retool—see Installation.

Do I do this in a js code query?

Or do I set it up under advanced organization settings as preloaded javascript?

Has anyone done this? Any tips?

Hi Galen!

We synced a bit on this separately, but wanted to share an update for the community as a whole here! For getting data from Front, I’m not confident it would be possible to import the Front SDK into Retool directly to act as a listener. The way that we sandbox JS so that it is actually run on a different page will most likely be a blocker on that. The supported workflow for embedding Retool apps is the reverse of this, importing a Retool SDK into the parent window and declaring a CSS selector to pass the value of into Retool.

@alex-godin Was also looking into Front and came up with a pretty decent workaround! If you embed the retool app in another webpage, that will allow you to install the Front SDK on that intermediary website. You would also be able to add the Retool SDK for passing values from the intermediary website into the embedded iframe using a “Parent Window” type query (outlined here)

One note is that I don’t believe it is possible to pass data from the embedded app into parent windows, but the Front API could be a good option for modifying data or triggering actions in Front from the Retool app.

I wanted to check if this is still the case today or if there's any work around using the ParentWindow query?

Hi @kindredAsaf thanks for reaching out! This should still be true today.

We added a Front integration for easily querying the Front API in August 2021 & this workaround should still be doable: If you embed the retool app in another webpage, that will allow you to install the Front SDK on that intermediary website. You would also be able to add the Retool SDK for passing values from the intermediary website into the embedded iframe using a “Parent Window” type query (outlined here)