> ## Documentation Index
> Fetch the complete documentation index at: https://wisty.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Add an app to Salesforce
> Place a published app on a Lightning page or in the utility bar.
export const ExamplePrompt = ({text}) => {text};
Copy **Embed ID** from your published app, then add the **Wisty App** component in Salesforce. You can place it on a Lightning record, home, or app page, or in the utility bar.
## Before you start
You need Salesforce admin access to configure the page. The org needs [Wisty installed](/docs/salesforce-setup/install) and a [connected host org](/docs/salesforce-setup/connect-host-org).
Publish the app and [share it with that host org](/docs/publishing/share-apps#change-who-can-open-an-app). Test with a viewer as well as the builder: a Salesforce builder can open their own app before it's shared with anyone else.
## Copy the Embed ID
1. Open the project in Wisty.
2. Click the arrow next to **View app**.
3. Click **Copy embed ID**.
For projects created from a Wisty account, **Copy embed ID** appears only after you publish the app and share it with a host org.
Apps from projects created inside Salesforce can be embedded only in their original org. Publish and share the app with that org before other people can open it.
The [Embed ID](/docs/getting-started/key-concepts#embed-id) identifies the app, so it stays the same when you publish updates. You won't need to edit the Salesforce page for each new version.
## Add it to a Lightning page
Open the record, home, or app page in Lightning App Builder.
In the **Components** tab, search for `Wisty`. Drag **Wisty App** into the page region where you want it.
Select the **Wisty App** component on the page. Paste the ID into **Embed ID** and set **Height (px)** using the guidance below.
Click **Save**, then activate or assign the page to the intended users, as needed. Open the page in Salesforce to check the result.
Someone opening Wisty for the first time may see **Connect Wisty** before the app loads. They must approve Wisty unless their admin has pre-authorized access.
### Choose the height
| Placement | Recommended starting point |
| ------------------------------------------ | -------------------------------------------------------------------------------- |
| Record or home page with other components | Set **Height (px)** to a number, such as `600`. The app scrolls inside that box. |
| App page where Wisty is the only component | Leave **Height (px)** empty to fill the available height. |
| Utility bar panel | Leave **Height (px)** empty to fill the panel. |
An empty height fills from the component's top edge toward the bottom of its container or window. It has a minimum height of 400 pixels. On a record page with other components below it, use a fixed height so it doesn't push them out of view.
By default the app sits in a standard Salesforce card that matches the rest of the page. Turn on **Frameless** when the surrounding container already has its own frame, such as a utility panel.
## Add it to the utility bar
1. In Salesforce **Setup**, open **App Manager** and edit the Lightning app your team uses.
2. Open **Utility Items** and add **Wisty App**.
3. Paste its **Embed ID**.
4. Leave **Height (px)** empty and turn on **Frameless**.
5. Set the utility's label and panel size, then save the Lightning app.
6. Open that Lightning app and select the new utility to check the result.
Use a standalone app for this placement. A utility panel doesn't supply the current [record ID](/docs/getting-started/key-concepts#record-id) in the way a record-page placement does.
## Build for a specific record
On a record page, the embedded app can receive the current record's ID. Describe that requirement when you build, including the object:
Wisty enables record context as part of the build. A **No preview record** control appears above the preview. To preview a specific record in the builder, you need to copy and paste its Salesforce record ID.
### Set a preview record
1. In Salesforce, open a record from the org selected in Wisty. Use the object the app was built for, such as an Account for an Account summary.
2. Copy the record's ID from the page URL. In `/lightning/r/Account/RECORD_ID/view`, copy the part shown as `RECORD_ID`.
3. Back in Wisty, click **No preview record** and paste the ID into **Preview Record**. Paste only the 15- or 18-character ID, not the full URL.
4. Click **Apply**. The control changes to **Preview record set**, and the preview reloads with that record's context.
Use a record you can open in Salesforce. If the preview shows no data, check that the ID belongs to the right org and object. **Apply** checks the ID's format, so an accepted ID doesn't guarantee the record exists or is accessible.
To test another record, click **Preview record set**, replace the ID, and click **Apply**. **Clear** removes the test record.
### Use the current record after publishing
The [preview record](/docs/getting-started/key-concepts#preview-record) is for testing in the builder. When someone opens the published app on a Salesforce record page, Salesforce supplies that page's record ID. You don't paste a record ID into the **Wisty App** component; its **Embed ID** identifies the app.
A list or dashboard built without record context won't automatically become record-specific just because you place it on a record page. Ask Wisty to adapt it for the current record. See [Describe what you need](/docs/building/describe-what-you-need).
Home pages and app pages don't supply a current record. Use a standalone app there, or ask Wisty to handle the missing record explicitly.
## Update or remove it
[Publish changes](/docs/publishing/publish#publish-changes) to update the app. The same Embed ID loads the live version the next time it's opened or reloaded.
To remove one placement, remove **Wisty App** from that Salesforce page or utility. To take the app offline everywhere, [unpublish it](/docs/publishing/publish#take-an-app-offline).