Embed custom Lightning web components (LWC) into external, non-Salesforce apps by using
Lightning Out 2.0, a special Salesforce app that you create and configure in Setup. Developers
can embed the generated Lightning Out 2.0 app script into a page of your company’s external app.
Lightning Out 2.0 uses session-based authentication that logs users into Salesforce without
leaving the external app, so authenticated users can seamlessly interact with the embedded
components as if they were in Salesforce.
Required Editions
| Available in: Lightning Experience |
|
Available in: Professional, Enterprise, Performance,
Unlimited, all Agentforce 1 Editions, and Developer
Editions
|
After you configure some administrative and security settings for the org, use the Lightning
Out 2.0 App Manager to create a Lightning Out 2.0 app. Add the domain of the external app that
will host your Lightning Out 2.0 app, and then add custom Lightning web components. Next,
apply custom styling to the Lightning Out 2.0 app so that the embedded components match the
branding of the external app. Paste the generated Lightning Out 2.0 code block into the HTML
of the external app, and now your users can engage with Salesforce wherever they are.
- Prepare to Build a Lightning Out 2.0 App
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.
- Set Up Authentication for Lightning Out 2.0
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.
- 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.
