---
schema_version: "1"
id: a610a7a482d8ff5399940615292e343459e62c787cfa7fb508d7a3a85407ff68
title: Add Inbound New Guest Appointment Flow to Websites Using Lightning Out
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/ls_expose_flow_on_website.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.ls_expose_flow_on_website.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 78bd5b4b61ad0584e47f6f37d32f0a419fce39821535fc1c3fba6e2f8e1202cf
description: 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.
products:
  - Scheduler
  - Salesforce Platform
release: "264"
---
# 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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: Lightning Experience.</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Enterprise</strong> and <strong>Unlimited</strong> Editions</td></tr></tbody></table>

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](https://help.salesforce.com/s/articleView?id=platform.ls_guest_user_permissions.htm&release=264.0.0&type=5 "To schedule appointments, guest users need certain user and object permissions. You can grant these permissions to guest users through the guest user profile for your Experience Cloud site.") and [Create Sharing Rules for Guest Users Who Schedule Appointments](https://help.salesforce.com/s/articleView?id=platform.ls_guest_sharing_criteria.htm&release=264.0.0&type=5 "Create criteria-based record-sharing rules to control which records are exposed to your guest users.").

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-scheduler-264-0-0-production-enus/0530be2f-891f-4263-a0d7-96ddca56a717/images/icon_note.png)

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.

1. Create a copy of the Inbound New Guest Appointment standard flow template.
2. 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>
    ```
3. 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-scheduler-264-0-0-production-enus/0530be2f-891f-4263-a0d7-96ddca56a717/images/icon_warning.png)
        
        Warning If you add SiteURL in the `script` tag, the flow doesn't work.
4. To load and activate the lightningOutGuest app on your webpage:
    1. Add the standard Lightning Out JavaScript code:
        
        ```javascript
        <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>
        ```
    2. 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>
        ```
    3. Replace `https://YourSiteDomain/SiteURL` with the Experience Cloud site URL that contains the Inbound New Guest Appointment flow with the required object permissions.
5. 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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-scheduler-264-0-0-production-enus/0530be2f-891f-4263-a0d7-96ddca56a717/images/icon_note.png)
    
    Note When Scheduler flows are hosted on external websites, the resource cards show standard images instead of photographs of service resources.

#### See Also

- [Customize Standard Flow Templates](https://help.salesforce.com/s/articleView?id=platform.ls_customize_flows.htm&release=264.0.0&type=5 "The flows in Salesforce Scheduler are installed as standard flow templates. You can customize any of the flows to suit your business needs.")
- [_Lightning Web Components Developer Guide_: Use Components Outside Salesforce with Lightning Out (Beta)](https://developer.salesforce.com/docs/platform/lwc/guide/lightning-out.html)
- [_Enhance Salesforce with Code_: Open the Developer Console](https://help.salesforce.com/articleView?id=code_dev_console_opening.htm&language=en_US)