Use Lightning Web Components in External Website – Lightning Out

Today we will check how we can use Lightning Web Components in any External Website using Lightning out. Previously it was not supported but after summer 19 Salesforce allow us to use Lightning Web Components (LWC) in External Websites using Lightning out.

In our last post we study how we can use Lightning Web Components in Visualforce. In this post we will check how we can use Lightning Web Components (LWC) in public website. I will explain step by step so that you can easily use it without any issue.

For this purpose I will use the same LWC component which I have created earlier, you can use any other component too. Just make sure it is using latest version. Now if your public website can do authentication to Salesforce then you can generate the access token. In our sample we will use it for public users so we don’t need the authentication..

Make Component Public:

To make it accessible to public users we need to implement ltng:allowGuestAccess interface. We need to create one community so that our lightning component can be made public. So create a public community and publish it. You don’t need to add any code or make any changes in configuration.

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

WhiteList CORS

Now we need to whitelist our site in Salesforce CORS setting. Search for CORS and add your website base URL there.

Add Code in Public Site

After that we need to add a sample code in your website’s HTML where you want to display the Lightning Web Components.

<div id="lightning"></div>
<script src="https://lwcsummer19nts-developer-edition.gus.force.com/lightning/lightning.out.js"></script>
<script>
     $Lightning.use("c:lwcVfDemoApp", function() {
        $Lightning.createComponent("c:lwcVFDemo", {
            	objectName: "Contact"
            },
              "lightning",
              function(cmp) {
                console.log("LWC component was created");
                // do some stuff
              }
          );
        },
       'https://lwcsummer19nts-developer-edition.gus.force.com/'
      );
</script>

Here https://lwcsummer19nts-developer-edition.gus.force.com/ is the community base URL. In $Lightning.use function we need to pass parameters.

The first parameter is required other three parameters are optional. In normal use you provide all four parameters. As we are hosting it public so we are not providing the authToken.

After this you can preview your website and you will find your Lightning Web Component running on your website smoothly. I have follow same steps in this post and you can see the LWC from my org running on my blog.

So it is very easy and you need to follow some simple steps to use Lightning Web Components using Lightning out. Now you can create some form and store the data inside Salesforce using it and can achieve many more use cases.

Did you like the post or wants to add anything let me know in comments. Happy Programming 

Sources:
https://newstechnologystuff.com/2019/05/28/use-lightning-web-components-in-lightning-out/
https://www.salesforcelwc.in/2019/09/embed-components-external-sites.html