# Embed a Retool App

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

{% embed url="<https://www.loom.com/share/8234cf11a5054a23a4951b6c9cec6dce?sid=717e5f4c-08ba-48f8-b7f2-0759fb3cde1b>" %}

### 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](https://docs.retool.com/apps/web/concepts/editor#advanced).\ <br>

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FVMY2cdxJPFkaTRTYPGwo%2Fimage.png?alt=media&#x26;token=eadf2024-6515-4d7c-8108-482b2ad2f41c" alt=""><figcaption></figcaption></figure>

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](https://docs.retool.com/apps/web/guides/url-query-parameters#configure-custom-url-query-parameters)

For example, to reference a URL query parameter, use the `urlparams` variable:<br>

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FDOrdB6FQfC45deW8l24K%2Fimage.png?alt=media&#x26;token=75bd4130-3c6f-4e21-bfbf-50899f24ad45" alt=""><figcaption></figcaption></figure>

Showing all `urlparams` in a table

### Embedding a Retool App via the Sidebar

{% hint style="info" %}
New to PixieBrix? See the [page-editor](https://docs.pixiebrix.com/platform-overview/page-editor "mention")guide.
{% endhint %}

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

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2F6IgzASb8VxaeDcFztNJ9%2Fimage.png?alt=media&#x26;token=8d2baa1f-e8ee-4786-8650-73551ae51a85" alt=""><figcaption></figcaption></figure>
2. Remove the default Render Document brick<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Fvpo4tb7r1MeNta7equ44%2Fimage.png?alt=media&#x26;token=aa1d2771-52ab-47cc-b997-f0e45229c628" alt=""><figcaption></figcaption></figure>
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](https://docs.retool.com/apps/web/guides/url-query-parameters#control-characteristics-with-built-in-url-query-parameters)<br>

     <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FdmnJ8U02rALzh7PwWm28%2Fimage.png?alt=media&#x26;token=75f57097-330b-4990-81c1-1bdde23736f1" alt=""><figcaption></figcaption></figure>
5. In the IFrame brick, provide the constructed URL:<br>

   <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FuWMe1kq6WytG3ILZ3ED2%2Fimage.png?alt=media&#x26;token=c327b88b-1524-4676-b71a-86032c30d723" alt=""><figcaption></figcaption></figure>

### 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.<br>

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FtaULqmidjJZ6NaQQV7MM%2Fimage.png?alt=media&#x26;token=99dcc007-7776-4f54-b461-a78f59efe9af" alt=""><figcaption></figcaption></figure>

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