Embed a Retool App

With PixieBrix, you can embed a Retool App in any web application, providing context from the page.

Prepare your Retool App for Embedding

Double-Check the Mobile Layout Setting

The PixieBrix Sidebar with 400px wide. Therefore, Retool’s “Enable mobile layout” setting will take effect when your App is embedded in the PixieBrix Sidebar.

Read more about Retool’s mobile layout.

Locating the “Enable mobile layout” App Setting

Configure Custom URL Parameters

Custom URL query parameters and hash parameters are used to pass information to the embedded Retool App. Follow Retool’s Configure Custom URL Parameters documentation

For example, to reference a URL query parameter, use the urlparams variable:

Showing all urlparams in a table

Embedding a Retool App via the Sidebar

New to PixieBrix? See the Page Editorguide.

1. In the PixieBrix Page Editor, add a Sidebar Panel Starter Brick

   
2. Remove the default Render Document brick

   
3. Add the Construct URL Brick and IFrame Brick

4. Configure the Construct URL brick with your Retool App URL and URL Query Parameters:

   • URL: the URL of your Retool App

   • URL Parameters: the URL Query/Search Parameters. Include the _embed URL parameter to hide non-app UI. See the Retool URL Query Parameter documentation for more built-in parameters

     
5. In the IFrame brick, provide the constructed URL:

   

Troubleshooting

My component doesn’t show up in the sidebar!

If the “Enable mobile layout” setting is toggled on for your Retool App, components will only display if “Show on mobile” is set for the component.

The component setting is available under Appearance > Advanced > Appearance.

Locating the Component > Appearance > Advanced > “Show on mobile” setting