Setup > All Sites > Digital Experiences ? copy URL and replace the URL in the script.Step A: Add External URL to white list
...
1. A code snippet below is available as a baseline or reference to create the lightning outLightning Out.
<div id="AS_WITForLightningOutContainer"></div>
<script src="https://alphasys-a.my.salesforce.com/lightning/lightning.out.js"></script>
<script>
$Lightning.use("c:AS_WITForLightningOut",
...
2. Provide the exact name of the Lightning App to use.
a. As shown below and the in the sample code snippet, the lightning App is AS_WITForLightningOut which was created on Step B.
...
3. Also provide the exact name of the Lightning Component which holds the flow
a. As shown As shown below and the in the sample code snippet, the lightning component is ASFundraisingFlow
Make sure to have a unique id for <div> element which will serve as a container of the lightning Lightning App that is going to be rendered and must match the third parameter of the component creation method.
a. <div id="AS_WITForLightningOutContainer"></div>
b. Must match the third parameter of the method createComponent.
Make sure to provide the right domain of the org to call on the lightning.out.js resource. As shown below the domain is https://alphasys-a.my.salesforce.com.
a. <script src="https://alphasys-a.my.salesforce.com/lightning/lightning.out.js"></script>
...
<div id="AS_WITForLightningOut"></div>
<script src="https://alphasys-a.my.salesforce.com/lightning/lightning.out.js"></script>
...
<script>
$Lightning.use("c:ASFundraisingFlow", function() {
$Lightning.createComponent(
"WITFA:ASFundraisingFlow",
{
flowAPIName: "AS_Multiscreen_Flow",
urlFilterParams: "AS_Campaign_Id,AS_GAU,AS_Amount,AS_Payment_Type,AS_Frequency"
},
'AS_WITForLightningOutContainer',
function(cmp) {}
);
},
"https://alphasys-a.force.com ");
</script>
b. To get the domain go to Setup -> Company Settings->My Domain. 6. Also make sure to provide the right site endpoint of the Experience Cloud of the org. a. Just simply replace .my.salesforce.com of the domain with .force.com. > All Sites > Digital Experiences. Copy the URL and replace the URL in the script.
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
Summer '23 Enhanced Domain change If the client has Enhanced Domains enabled, you will need to update the URL to ensure the WIT Lightning Out continues to function. The URL wording “force.com” has been replaced with “my.site.com”. In our example the AlphaSys URL would change from https://alphasys-a.force.com to https://alphasys-a.my.site.com |
Step D: Applying the lightning out on external sites
...
a. Login to WordPress site.
...
<div id="AS_WITForLightningOut"></div>
<script src="https://alphasys-a.my.salesforce.com/lightning/lightning.out.js"></script>
<script>
$Lightning.use("c:ASFundraisingFlow", function() {
$Lightning.createComponent(
"WITFA:ASFundraisingFlow",
{
flowAPIName: "AS_Multiscreen_Flow",
urlFilterParams: "AS_Campaign_Id,AS_GAU,AS_Amount,AS_Payment_Type,AS_Frequency"
},
'AS_WITForLightningOutContainer',
function(cmp) {}
);
},
"https://alphasys-a.force.com");
</script>
b. After logging in to the site, go to Pages -> Add New.
...
needed. We now mush add the AS_Campaign_Id parameter on the URL with the campaign Id value. For this example, the URL is https://webforceconnect.alphasys.com/wit-lightning- out/?AS_Campaign_Id=7015g000000xNl6AAE
As shown below the flow is successfully rendered on the created WordPress page.
...
After logging in to the site, go to Content -> Articles -> Add New Article.
Provide a title of the article.
Apply the constructed code snippet for lightning out on the content editor and click Save button to save.
Test the flow if its rendering.
Our flow requires a campaign ID as reference to all the data and configurations needed. We now add the AS_Campaign_Id parameter on the URL with the campaign Id value. For this example, the URL is https://joomla-demo.alphasys.com/wit-lightning- out?AS_Campaign_Id=7015g000000xNl6AAE
...
needed. We now mush add the AS_Campaign_Id parameter on the URL with the campaign Id value. For this example, the URL is
https://drupal- demo.alphasys.com/node/1?AS_Campaign_Id=7015g000000xNl6AAE
...