Show Lightning component on public website without authentication

How to show Lightning component on public sites without need of user authentication

I have posted few articles on Lightning OutIn this post, we will see how Lightning components can be displayed on public website. To access these Lightning components, users don’t need to login to Salesforce.

For this post, I will consider Text slider component created in this post. Using this same method, I have displayed Live demo of Lightning component on wordpress blog.

SliderDemo.app

<aura:application access="Global" extends="ltng:outApp" implements="ltng:allowGuestAccess"> 
 <aura:dependency resource="c:SliderDemo"/> 
 <aura:dependency resource="c:AnimatedSlider"/> 
 <aura:dependency resource="c:Slide"/> 
</aura:application>

See how we used ltng:allowGuestAccess in above Lightning application. It indicates that component can be used without authentication.

Below Visualforce page is used to surface Lightning component on public sites

SliderDemo.page

 
<apex:page showHeader="false" standardStylesheets="false"> 
 <apex:stylesheet value="{!URLFOR($Resource.SLDS2_3_1, 'assets/styles/salesforce-lightning-design-system.min.css')}" />
 <apex:includeLightning />
 <div style="width:100%;height:100px;" id="lexContainer"> 
 <div style="height:6rem;" id="sliderDemo">
 <div role="status" class="slds-spinner slds-spinner_medium" >
 <span class="slds-assistive-text">Loading</span>
 <div class="slds-spinner__dot-a"></div>
 <div class="slds-spinner__dot-b"></div> 
 </div>
 </div> 
 </div>

 <script>
 $Lightning.use("c:SliderDemoApp", function() {
 $Lightning.createComponent("c:SliderDemo",
 {},
 "lexContainer",
 function(cmp) {
 document.getElementById("sliderDemo").style.display = 'none'; 
 });
 });
 </script> 
</apex:page>

Note : At time of writing this blog post, apex:slds tag does not work properly if images are used.

Related posts