Lightning Out (Beta) Markup

We recommend using Lightning Out 2.0 instead of Lightning Out (beta). Lightning Out 2.0 is a new generally available feature that completely replaces–and isn’t an extension of–Lightning Out (beta), which is still subject to Beta Service Terms. See How Lightning Out 2.0 Compares to Lightning Out (Beta).

To use Lightning Out (beta) with your external app or page, first add the Lightning Out (beta) Javascript library to the page. Then, load your Lightning Out (beta) 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().

");else if(O._boomrl=function(){t()},O.addEventListener)O.addEventListener("load",O._boomrl,!1);else if(O.attachEvent)O.attachEvent("onload",O._boomrl);d.close()}function a(e){window.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(!window.BOOMR||!window.BOOMR.version&&!window.BOOMR.snippetExecuted){window.BOOMR=window.BOOMR||{},window.BOOMR.snippetStart=(new Date).getTime(),window.BOOMR.snippetExecuted=!0,window.BOOMR.snippetVersion=12,window.BOOMR.url=n+"96ZND-LJLSH-JXHC9-F8GQP-6WCGS";var o=document.currentScript||document.getElementsByTagName("script")[0],i=!1,r=document.createElement("link");if(r.relList&&"function"==typeof r.relList.supports&&r.relList.supports("preload")&&"as"in r)window.BOOMR.snippetMethod="p",r.href=window.BOOMR.url,r.rel="preload",r.as="script",r.addEventListener("load",e),r.addEventListener("error",function(){t(!0)}),setTimeout(function(){if(!i)t(!0)},3e3),BOOMR_lstart=(new Date).getTime(),o.parentNode.appendChild(r);else t(!1);if(window.addEventListener)window.addEventListener("load",a,!1);else if(window.attachEvent)window.attachEvent("onload",a)}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();!function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var n=""=="true"?1:0,t="",a="3be5ruaxgqvk42rjyrlq-f-2c560f21f-clientnsv4-s.akamaihd.net",o="false"=="true"?2:1,i={"ak.v":"41","ak.cp":"1836958","ak.ai":parseInt("1224868",10),"ak.ol":"0","ak.cr":8,"ak.ipv":4,"ak.proto":"h2","ak.rid":"2eb31dbd","ak.r":42313,"ak.a2":n,"ak.m":"dsca","ak.n":"essl","ak.cport":57388,"ak.gh":"23.52.41.206","ak.quicv":"","ak.tlsv":"tls1.3","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"","ak.t":"1781122135","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==65aF0vfihe0ZpK4K0h1JGHpl48hgZlCWmlmvMIGioOqSvyYDKteyoCCxXX3b1O5KJAxhS/4+/Or2gQEN0EDEUAS5JgU13XZ1bWMlmdBPtrdaU9L+WdoaDuD60eVTb2rQMSR9BYXqNkoku/6m2UVqQ31aq2dIbEWajcZsbROM9toItYeYp4oOXv5TETPXU3Llq76waQSG5Nxpimxgei9iBpKTwauL/w6Fn3k+JtKEhRqxWJtocEfRb9jlpyFIT+a2c2mIwj4Pttyhm+U3ReEDON8nksl3FrhEOhsBkVI1YBwF3npVrI/syNgS7JT+JM9TskZYTwuCJtvQTDD3PSIBECpC1ZMDRBsEEOvknKFmud9VN6GftGUycFPX5tjFTpJYJfyY+01spHXqxpm8vQ+roXnmW7nrIsN6OVPe9Akal+0=","ak.pv":"87","ak.dpoabenc":"","ak.tf":o};if(""!==t)i["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))i["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(i)},rv:function(){var e=["ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:i,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);

My External Page

">

To enable an origin server for use with Lightning Out (beta), include the Lightning Out (beta) JavaScript library in the app or page that hosts your Lightning Out (beta) app. Including the library requires a single line of markup.

If you plan to use Lightning Out (beta) with an Experience Cloud site, use your site endpoint URL instead.

The Salesforce instance from which you load the Lightning Out (beta) 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 (beta) app.

The $Lightning.use() function takes four arguments.

NameTypeDescription
appNamestringRequired. The name of your Lightning Out (beta) app, including the namespace. For example, "c:expenseAppDependencies".
callbackfunctionRequired. 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.
lightningEndPointURIstringRequired. The URL for the Lightning or Experience Cloud site domain on your Salesforce instance. For example, https://myDomainName.lightning.force.com.
authTokenstringRequired. This argument is optional if you share the Lightning Out (beta) 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 (beta) doesn’t handle authentication for you. See Authentication from Lightning Out (Beta).

You can’t use more than one Lightning Out (beta) app on a page. You can call $Lightning.use() more than one time, but you must reference the same Lightning Out (beta) 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.

NameTypeDescription
componentNamestringRequired. The name of the Lightning web component to add to the page, including the namespace. For example, "c:newExpenseForm".
attributesObjectRequired. 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, { }.
domLocatorElement or stringRequired. The DOM element or element ID that indicates where on the page to insert the created component.
callbackfunctionA 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 (beta) 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 (beta) semantics, the behavior is also the same.

See Also