Show Lightning component on public website without 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.

What do you need :

Option 1 [Used in this blog post] :

  • Public Site or Public Community Page
  • Visualforce wrapping Lightning App marked as Lightning out
  • This website – https://JitendraZaa.com added in Salesforce CORS setting, so that Salesforce can be added as iframe in this website
  • Embed public site as iframe

Option 2 :

  • Follow this documentation
  • Import Lightning Out Javascript Library in your website using Community URL
  • Use JavaScript SDK to create Lightning application dynamically

Live Demo using Public Site and Visualforce :

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.

Posted

in

by


Related Posts

Comments

6 responses to “Show Lightning component on public website without authentication”

  1. Anupam M Tripathi Avatar
    Anupam M Tripathi

    Hi
    Nice post!

    Can we use the same public page to take user inputs as well?

    1. sai Avatar
      sai

      Can anyone please answer to this question?
      Can we take user input from this page and store it in the custom objects ?

  2. Shea Avatar
    Shea

    Hi Jitendra,

    I can’t using lightning component in site, my code is same with yours, but it doesn’t work.

  3. Denis Ivančík Avatar
    Denis Ivančík

    Thanks for article, the implements=”ltng:allowGuestAccess” was exactly what I was looking, thanks a lot.

    1. ramyabavirisetty Avatar

      Currently I am working on displaying a lightning component on a visualforce page using lightning out. I have ltng:alllowGuestAccess implemented for my lightning app. But some how my page isn’t working for the guest users. Did you have success to a similar scenario. If yes,Please help giving your inputs.

      Thanks in advance.

  4. mohnish garg Avatar
    mohnish garg

    Getting “Lightning out App error while loading the App” error

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading