Step 1: Install these packages:
Step 2: Create a Screen Flow
- Create a screen element in the screen flow.
- Create a record element in the screen flow.
- Create Apex Actions in the Screen Flow.
- Click Save.
- Click Activate.
Step 3: Create a community site or experience site.
Quick Find Box -> Sites -> Click New.
Step 4: Give the object access and field level access in the case object with read and create. Use the following snapshot to give field-level access.
Click the site -> Public Access Setting -> Search Case Object
Step 5: Click the Assigned User Button in the Profile.
Step 6: Click the Add Permission Set button at the bottom.
Step 7: Assign the File Upload Improved Permission set to this user.
Step 8: Create the Aura Component and Lightning Application. Use the below code:
Aura Component Bundle:
- embedFlowInExternalWebsite.cmp
<aura:component implements="flexipage:availableForAllPageTypes,lightning:availableForFlowActions" access="GLOBAL">
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<lightning:flow aura:id="flowData"/>
</aura:component>
- embedFlowInExternalWebsiteController.js
({
init : function (component) {
var flow = component.find("flowData");
flow.startFlow("YOUR_FLOW_API_NAME");
}
})
** Replace the ‘YOUR_FLOW_API_NAME’ string with the name of the flow you want to run.
Lightning Application:
- embedFlowInExternalWebsiteApp.app
<aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
<aura:dependency resource="c:embedFlowInExternalWebsite"/>
</aura:application>
Step 9: Add your website’s domain to the CORS Allowed Origins List.
Quick Find Box -> CORS -> click the New Button.
Step 10: Run this code:
<!DOCTYPE html>
<html>
<body>
<script src="https://curious-bear-q4ztlr-dev-ed.trailblaze.my.salesforce-sites.com/lightning/lightning.out.js"></script><div id="lightningLocator"></div><script>
$Lightning.use("c:embedFlowInExternalWebsiteApp",
function() {
$Lightning.createComponent(
"c:embedFlowInExternalWebsite",
{ },
"lightningLocator",
function(cmp) {}
);
},
'https://curious-bear-q4ztlr-dev-ed.trailblaze.my.salesforce-sites.com'
);
</script></body>
</html>
** Importantly here, you need to insert the URL to your Salesforce org in 2 places just before the /lightning/lightning.out.js.