Lightning Out Markup
To use Lightning Out with your external app or page, first add the Lightning Out Javascript library to the page. Then, load your Lightning Out app with the $Lightning.use() function. Finally, to insert a Lightning web component into the page, call $Lightning.createComponent() from the callback function defined in $Lightning.use().
For example, here's the markup for an external page that contains a custom Lightning web component. The page is available to guest users, so an authToken isn't included as an argument in $Lightning.use().
To enable an origin server for use with Lightning Out, include the Lightning Out JavaScript library in the app or page that hosts your Lightning Out app. Including the library requires a single line of markup.
If you plan to use Lightning Out with an Experience Cloud site, use your site endpoint URL instead.
The Salesforce instance from which you load the Lightning Out Javascript library must match the instance specified in the lightningEndPointURI parameter of the $Lightning.use() function.
Within another <script> tag, add the $Lightning.use() function. This function loads and initializes the Lightning Component framework for your Lightning Out app.
The $Lightning.use() function takes four arguments.
| Name | Type | Description |
|---|---|---|
appName | string | Required. The name of your Lightning Out app, including the namespace. For example, "c:expenseAppDependencies". |
callback | function | Required. A function to call after the Lightning Component framework and your app have fully loaded. The callback receives no arguments. Call $Lightning.createComponent() from this callback function. |
lightningEndPointURI | string | Required. The URL for the Lightning or Experience Cloud site domain on your Salesforce instance. For example, https://myDomainName.lightning.force.com. |
authToken | string | Required. This argument is optional if you share the Lightning Out app with unauthenticated users. The session ID or OAuth access token for a valid, active Salesforce session. You must obtain this token in your own code. Lightning Out doesn’t handle authentication for you. See Authentication from Lightning Out. |
You can’t use more than one Lightning Out app on a page. You can call $Lightning.use() more than one time, but you must reference the same Lightning Out app in every call.
Add your components to the page with the $Lightning.createComponent() function. Call $Lightning.createComponent() from the callback function declared in $Lightning.use().
The $Lightning.createComponent() function takes four arguments.
| Name | Type | Description |
|---|---|---|
componentName | string | Required. The name of the Lightning web component to add to the page, including the namespace. For example, "c:newExpenseForm". |
attributes | Object | Required. The attributes to set on the component when it’s created. For example, { name: theName, amount: theAmount }. If the component doesn’t require any attributes, pass in an empty object, { }. |
domLocator | Element or string | Required. The DOM element or element ID that indicates where on the page to insert the created component. |
callback | function | A function to call after the component is added to and active on the page. The callback receives the component created as its only argument. |
You can add more than one Lightning web component to a page. Within the callback function specified in $Lightning.use(), call $Lightning.createComponent() multiple times. To add the components to different parts of the page, use different DOM locators. You must specify each component in your Lightning Out app by using the <aura:dependency> tag.
Behind the scenes, $Lightning.createComponent() calls the standard Aura $A.createComponent() function. Except for the DOM locator, the arguments are the same. And except for wrapping the call in some Lightning Out semantics, the behavior is also the same.
See Also