Loading
Feature Degradation | Agentforce Voice Read More
Extend Salesforce with Clicks, Not Code
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Build a Lightning Out 2.0 App

            You are here:

            1. Salesforce Help
            2. Docs
            3. Extend Salesforce with Clicks, Not Code

            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

            Available in: Lightning Experience

            Available in: Professional, Enterprise, Performance, Unlimited, all Agentforce 1 Editions, and Developer Editions
            User Permissions Needed
            To create an modify a Lightning Out 2.0 app: Customize Application

            Before you begin, complete the steps in Prepare to Build a Lightning Out 2.0 App and Set Up Authentication for Lightning Out 2.0.

            Important
            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 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 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 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.
            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.
            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.

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

            See Also

             
            Loading
            Salesforce Help | Article