Use WIT via Lightning Out

Follow these instructions if you want to use a WIT donation page on an external website, for example Wordpress or Joomla.

Step A: Add External URL to white list

Copy website URL of external website
Go to Setup > CORS then add the WordPress URL

Step B: Create Lightning App for Lightning Out

An app must be created to call/hold the lightning component which holds the Flow
Below is a sample code snippet.

<aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess"> <aura:dependency resource="c:ASFundraisingFlow"/>

</aura:application>

ASFundraisingFlow is the name of the lightning component which holds the flow.

Step C: Constructing the Lightning Out for external use

1. A code snippet below is available as a baseline or reference to create the Lightning Out.

// name of the Lightning app function() {

// Callback once framework and app loaded $Lightning.createComponent(

"c:ASFundraisingFlow", // top-level component of your app
{ flowAPIName : "AS_Multiscreen_Flow" }, // attributes to set on the component when created "AS_WITForLightningOutContainer", // the DOM location to insert the component function(cmp) {

// callback when component is created and active on the page

} );

},
'https://alphasys-a.force.com' // Experience Cloud site endpoint

); </script>

2. Provide the exact name of the Lightning App to use.

a. As shown below and 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 below and 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 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 > All Sites > Digital Experiences. Copy the URL and replace the URL in the script.

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

1. Applying the lightning out on a WordPress site

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.

c. Provide a name of the page.

d. Make sure to toggle the content editor to Text.

e. Apply the constructed code snippet for lightning out on the content editor and click Update/Publish button to save.

f. Test the flow to see if its rendering.

Our flow requires a campaign ID as reference to all the data and configurations

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.

2. Applying the lightning out on a Joomla site

a. Login to Joomla site.

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

As shown below the flow is successfully rendered on the created Joomla page.

3. Applying the lightning out on a Drupal site

Login to Drupal site.
After logging in to the site, go to Content and click Add Content.

c. Provide Title.

Click Source button and select Render HTML Tags on Text format field.
Apply code snippet on body, check Published and click Save.
Test the flow if its rendering.

i. Our flow requires a campaign ID as refrence to all the data and configurations

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

ii. As shown below the flow is successfully rendered on the created Drupal page.