---
schema_version: "1"
id: 13bf3825b950e6aa2a5a38f5f09556e0930a901de069e8fe499a070ef1e8bfc9
title: Build a Lightning Out 2.0 App
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/lightning_out_build.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.lightning_out_build.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 342e42184fbe5d72181f1f56789263a52dbc51da5187b3c8b5867de64e64b734
description: Create and configure Lightning Out 2.0 apps with the low-code Lightning Out 2.0 App Manager. Add custom Lightning web components (LWCs) to each Lightning Out 2.0 app, and optionally define custom property values that your external apps can pass to these components. Generate a Lightning Out 2.0 code block that you can directly embed into an external app’s HTML markup.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Build a Lightning Out 2.0 App

Create and configure Lightning Out 2.0 apps with the low-code Lightning Out 2.0 App Manager. Add custom Lightning web components (LWCs) to each Lightning Out 2.0 app, and optionally define custom property values that your external apps can pass to these components. Generate a Lightning Out 2.0 code block that you can directly embed into an external app’s HTML markup.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
        <colgroup>
          <col>
        </colgroup>
        <tbody>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">Available in: Lightning Experience</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">
              <p style="margin-bottom:0;">Available in: <strong>Professional</strong>, <strong>Enterprise</strong>, <strong>Performance</strong>,
                <strong>Unlimited</strong>, all <strong>Agentforce 1 Editions</strong>, and <strong>Developer</strong>
                Editions
              </p>
            </td>

          </tr>
        </tbody>
      </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d85491e82">User Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d85491e82 ">To create an modify a Lightning Out 2.0 app:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d85491e82 ">Customize Application</td>

          </tr>
        </tbody>
      </table>

Before you begin, complete the steps in [Prepare to Build a Lightning Out 2.0 App](https://help.salesforce.com/s/articleView?id=platform.lightning_out_prepare.htm&release=264.0.0&type=5 "Before you embed a Lightning Out 2.0 app into an external app, configure some security-related and administrative settings in Salesforce and in your external app. These settings allow Lightning Out 2.0 inline frames (iframes) to load in the external app.") and [Set Up Authentication for Lightning Out 2.0](https://help.salesforce.com/s/articleView?id=platform.lightning_out_auth.htm&release=264.0.0&type=5 "For an external app to access components in a Lightning Out 2.0 app, the end user must be authenticated in Salesforce. The external app must also be authorized to access Salesforce resources. To set up authentication and authorization, implement an OAuth 2.0 flow and configure an External Client App (ECA) in your org. Then configure your external app to either call the Lightning Out 2.0 UI Bridge endpoint or the standard Salesforce UI Bridge endpoint. The call generates a frontdoor URL at run time, which is used to establish a Salesforce session for the Lightning Out 2.0 app.").

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_important.png)

Important Lightning Out 2.0 currently supports only custom Lightning web components. Lightning base components and Aura components aren’t supported.

See [Lightning Out 2.0 Limitations](https://developer.salesforce.com/docs/platform/lwc/guide/lightning-out-limitations.html) in the Lightning Web Components Developer Guide.

## Create a Lightning Out 2.0 App

1. From Setup, in the Quick Find box, enter Lightning Out, and then select **Lightning Out 2.0 App Manager**.
2. Click **New Lightning Out 2.0 App**.
3. Enter a unique name for your Lightning Out 2.0 app.
    
    The name can contain up to 64 letters, digits, and special characters. It must contain at least one letter. Names consisting of only digits or special characters aren’t allowed. You can change your app name at a later time in the App Settings tab.
4. Click **Save and Continue**.
    
    The Edit Lightning Out 2.0 page opens.
5. In the App Settings tab, to activate the app, set the App Status to **Enabled**.
    
    If the App Status is Disabled, then user authentication fails, and the embedded components don’t load in the external app.
6. Open the Host Page Domain Names tab, and then enter the domain names of any external app that will host your Lightning Out 2.0 app.
    
    Include the https:// protocol, and remove the trailing slash (/) at the end of the domain name.
    
    To add multiple domains, click **Add Domain Name** after entering each domain name.
7. To add components to your app, open the App Components tab. Then follow steps 3-5 in the [Configure Components for a Lightning Out 2.0 App](https://help.salesforce.com/s/articleView?id=platform.lightning_out_build.htm&release=264.0.0&type=5) section.
8. Save your changes.

## Configure Components for a Lightning Out 2.0 App

1. From the Lightning Out 2.0 App Manager, select **Edit App** from the actions dropdown next to the Lightning Out 2.0 app name.
    
    The Edit Lightning Out 2.0 App page opens the App Settings tab.
2. From the Edit Lightning Out 2.0 App page, open the App Components tab.
3. In the Component Name field, enter the name of the custom component. Then click **Add Component**.
    
    The component must already exist in your org. Use a forward slash (/) or a hyphen (-) to separate the namespace from the component name. If the component doesn’t have a custom namespace, include the default `c` namespace.
    
    For example, `complexNs/lwcComponent` and `complex_ns-lwc-component` are equivalent, valid formats.
4. Optionally, to pass styles and properties from your app to an embedded component, click ![Edit icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/extend_click/images/edit_60.png) in the Custom Properties cell for that component. Enter the properties and their values in JSON format.
    
    For example, to pass CSS custom properties, enter `{"style": "--custom-color: #000000;"}`.
    
    Lightning Out 2.0 currently supports overrides for the `style` property and other properties available to the component. See [Set Component Styles and Properties in a Lightning Out 2.0 App](https://developer.salesforce.com/docs/platform/lwc/guide/lightning-out-component-properties.html).
5. Repeat steps 3 and 4 for any other components that you want to add to your Lightning Out 2.0 app.
6. Save your changes.

## Embed a Lightning Out 2.0 App into an External App

1. From the Lightning Out 2.0 App Manager, click the ID of the Lighting Out 2.0 app.
2. To copy the generated Lightning Out 2.0 code block into your external app, click **Copy to Clipboard**.
    
    The generated Lightning Out 2.0 code block doesn’t contain the `frontdoor_url` attribute on the `lightning-out-application` component. Instead, you set this attribute at run time by calling a UI Bridge API endpoint. See [Set Up Authentication for Lightning Out 2.0](https://help.salesforce.com/s/articleView?id=platform.lightning_out_auth.htm&release=264.0.0&type=5 "For an external app to access components in a Lightning Out 2.0 app, the end user must be authenticated in Salesforce. The external app must also be authorized to access Salesforce resources. To set up authentication and authorization, implement an OAuth 2.0 flow and configure an External Client App (ECA) in your org. Then configure your external app to either call the Lightning Out 2.0 UI Bridge endpoint or the standard Salesforce UI Bridge endpoint. The call generates a frontdoor URL at run time, which is used to establish a Salesforce session for the Lightning Out 2.0 app.").
3. Paste the Lightning Out 2.0 app code block into the HTML markup of a page in your external app.
    
    At run time, the components in your Lightning Out 2.0 app render at the location where you embedded the code block. To change where a component renders on the page, move it to the desired location.
    
    For example, to render `c-other-lwc` above `c-my-lwc` on the external app page, adjust the markup so that the `c-other-lwc` element is above the `c-my-lwc` element. You can mix the Lightning Out 2.0 app component markup with external page elements.
    
    ```html
    <--- External App Page ---> 
    <html>
        <body>
            <external-page-element-1></external-page-element-1>
            <script
                type="text/javascript" 
                async="" 
                src="https://MyDomain.my.salesforce.com/lightning/lightning.out.latest/index.iife.prod.js">
            </script>
            <lightning-out-application
                frontdoor-url="Set at run time" 
                app-id="18-digit Salesforce ID"
                components="c-my-lwc, complex_ns-lwc-component"> 
            </lightning-out-application>
            <c-other-lwc></c-my-lwc>
            <external-page-element-2></external-page-element-2>
            <c-my-lwc style="--custom-color: brown;"></c-my-lwc>
            <external-page-element-3></external-page-element-3>
        </body>
    </html>
    ```
4. Alternatively, embed your Lightning Out 2.0 app programmatically by using [Document Object Model (DOM) interface JavaScript methods](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model). Copy the element names and attribute values from the generated Lightning Out 2.0 code block.
    
    For a JavaScript implementation, see the example in [Set Component Styles and Properties in a Lightning Out 2.0 App](https://developer.salesforce.com/docs/platform/lwc/guide/lightning-out-component-properties.html).

#### See Also

- [Set Up Authentication for Lightning Out 2.0](https://help.salesforce.com/s/articleView?id=platform.lightning_out_auth.htm&release=264.0.0&type=5 "For an external app to access components in a Lightning Out 2.0 app, the end user must be authenticated in Salesforce. The external app must also be authorized to access Salesforce resources. To set up authentication and authorization, implement an OAuth 2.0 flow and configure an External Client App (ECA) in your org. Then configure your external app to either call the Lightning Out 2.0 UI Bridge endpoint or the standard Salesforce UI Bridge endpoint. The call generates a frontdoor URL at run time, which is used to establish a Salesforce session for the Lightning Out 2.0 app.")
- [_Lightning Web Components Developer Guide_: Understand Lightning Out 2.0 Architecture](https://developer.salesforce.com/docs/platform/lwc/guide/lightning-out-architecture.html)
- [_Lightning Web Components Developer Guide_: Set Component Styles and Properties in a Lightning Out 2.0 App](https://developer.salesforce.com/docs/platform/lwc/guide/lightning-out-component-properties.html)