# Embed a UiPath App

UiPath Apps "[is a cloud-based low-code application development platform](https://docs.uipath.com/apps/docs/introduction) that enables you to build and share enterprise-grade custom applications that deliver engaging user experiences".

With PixieBrix, you can embed UiPath Apps into any webpage, including 3rd-party pages, and automatically pass information from the page to the app

For example, you could embed a UiPath app in the Salesforce Service Console, passing in the case number and any other case information:

&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FcK33UIoHxsyQ0FlVTj9X%2Fimage.png?alt=media&#x26;token=ef6bd8b2-10c3-4b7d-81f0-e3f92a6f93d3" alt=""><figcaption><p>Available data is read from the page and passed to the UiPath App (ID, Name, and Priority were found and passed)</p></figcaption></figure>

### Prepare your UiPath App for Embedding

Go to the UiPath App and publish the app if it has not been published already.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FIS1ji5RXeVUuieqn7FMb%2Fimage.png?alt=media&#x26;token=b855f402-531f-498f-a1d3-d0a299773e60" alt=""><figcaption></figcaption></figure>

Copy the production link from the settings section of the UiPath app

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FkUhwbXaO9HwRmfhcbjxi%2Fimage.png?alt=media&#x26;token=7168cabf-bac8-4982-97ca-9652c646dc46" alt=""><figcaption></figcaption></figure>

### Embedding the UiPath App via Sidebar

**Create the Sidebar Panel**

* Create a Sidebar Panel starter brick
* Delete the Render Document brick
* Add an iFrame brick (paste the UiPath production URL in the url field of the brick)

  <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2F3mkDh7vZvztoA1X8oyDy%2Fimage.png?alt=media&#x26;token=39e718cd-2c0f-47d7-a7ec-26b8fa66bb5f" alt=""><figcaption></figcaption></figure>

### Passing Data to your UiPath App

**Add App Variables to UiPath Apps**

Add an App Variable to the UiPath App for each data variable you want to pass from PixieBrix to UiPath. For further walkthrough of adding App Variables, watch this [explanation video](https://www.youtube.com/watch?v=ew5Ks4jVhaA) or read [UiPath's documentation](https://docs.uipath.com/apps/automation-cloud/latest/user-guide/set-external-context).

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FpyLXC0VUlBcsriuwM3N9%2Fimage.png?alt=media&#x26;token=0c67e6ef-c7a0-4627-a60b-e59ebc2454e1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To use the provided property in your application, add a Value Binding to the field. Alternatively/additionally, you can configure a "Value Changed" rule for the Textbox. See the [UiPath Apps documentation](https://docs.uipath.com/apps/docs/textbox) for more details
{% endhint %}

**Add URL Parameters to the iFrame in PixieBrix**

* Create a Sidebar Panel
* Delete the Render Document Brick
* Add a Construct URL brick
  * Paste the UiPath App production URL into the URL field
  * Switch the URL parameters field to type "Object Properties" by clicking on the X
  * Enter App Variables names in the property field and text or variables in the value field

    <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FZ4VSBJ6yPmrccQKvdKVi%2Fimage.png?alt=media&#x26;token=04197aee-fa19-41ee-983f-01e522383c58" alt=""><figcaption></figcaption></figure>
* Add IFrame brick
  * Use the output variable from the Construct URL brick (`@url.url` ) in the url field of the IFrame brick&#x20;

    <figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FZnnaygne1AKuyxgYpCJ2%2Fimage.png?alt=media&#x26;token=53da4bb3-bce4-4cc4-b620-a092bd4071c0" alt=""><figcaption></figcaption></figure>

####
