Add Inbound New Guest Appointment Flow to Websites Using Lightning Out

Add a Lightning Out-dependency app to your company website (external website) to give your unauthenticated users access to the Inbound New Guest Appointment flow.

Required Editions

Available in: Lightning Experience.

Available in: Enterprise and Unlimited Editions

Ensure that you provide the required user and object permissions to your guest users. For more information, see Grant Guest Users Required User and Object Permissions and Create Sharing Rules for Guest Users Who Schedule Appointments.

Note When Scheduler flows are hosted on external websites, the flow uses the language set for the browser instead of the language set for the guest user profile.

Create a copy of the Inbound New Guest Appointment standard flow template.

To ensure the accurate alignment of UI elements, add this <style> tag to your webpage:

<style>
        .slds-visual-picker_vertical .slds-visual-picker__figure {
            height: inherit !important;
        }

        .runtime_appointmentbookingFlowLocation .slds-visual-picker_vertical {
            display: inline-flex !important;
        }
</style>

To add a reference to the JavaScript Lightning Out library, use the script tag:
1. Add the Lightning Out JavaScript file to your webpage:
```
<script src="https://YourSiteDomain/lightning/lightning.out.js"></script>
```
2. Replace https://YourSiteDomain/ with your Experience Cloud site URL.
  
  Warning If you add SiteURL in the script tag, the flow doesn't work.

To load and activate the lightningOutGuest app on your webpage:

Add the standard Lightning Out JavaScript code:

<script>
    $Lightning.use("runtime_appointmentbooking:lightningOutGuest",
        function() {                  // Callback once framework and app load
            $Lightning.createComponent(
                "lightning:flow",    // top-level component of your app
                { },    // attributes to set on the component when created
                "lexcontainer",    // the DOM location to insert the component
                function(component) {            // API name of the Flow
                    component.startFlow("Salesforce_Scheduler_Unauthenticated");
                }
            );
        },    'https://YourSiteDomain/SiteURL/'  // Site endpoint
    );
</script>

Replace lexcontainer with the page location where you want to insert the lightning component, and then invoke the lightning component from another tag.
Here's a sample code to invoke the lightning component:
```
<div id="lexcontainer">
<p>Invoke the Lightning Component specified in the Script.</p>
</div>
```
Replace https://YourSiteDomain/SiteURL with the Experience Cloud site URL that contains the Inbound New Guest Appointment flow with the required object permissions.

To add the external site origin URL to CORS:
1. From Setup, in the Quick Find box, enter CORS, and then select CORS.
2. Click New.
3. In the Origin URL Pattern field, enter the external site origin URL.
4. Save your changes.
Note When Scheduler flows are hosted on external websites, the resource cards show standard images instead of photographs of service resources.

Add Inbound New Guest Appointment Flow to Websites Using Lightning Out

Required Editions

See Also