{"id":6142,"date":"2017-06-05T01:21:50","date_gmt":"2017-06-05T01:21:50","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=6142"},"modified":"2020-08-26T11:06:02","modified_gmt":"2020-08-26T15:06:02","slug":"show-lightning-component-on-public-website-without-authentication","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/show-lightning-component-on-public-website-without-authentication\/","title":{"rendered":"Show Lightning component on public website without authentication"},"content":{"rendered":"\n<p>I have posted few articles on&nbsp;<strong><a href=\"https:\/\/www.jitendrazaa.com\/blog\/tag\/lightning-out\/\">Lightning Out<\/a>.&nbsp;<\/strong>In this post, we will see how Lightning components can be displayed on public website. To access these Lightning components, users don&#8217;t need to login to Salesforce.<\/p>\n\n\n\n<p>For this post, I will consider <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/text-slider-lightning-component-for-salesforce-with-live-demo\/\"><strong>Text slider component<\/strong><\/a> created in this post. Using this same method, I have displayed <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/text-slider-lightning-component-for-salesforce-with-live-demo\/\">Live demo of Lightning component on wordpress blog<\/a>.<\/p>\n\n\n\n<p>What do you need :<\/p>\n\n\n\n<p><strong>Option 1 [Used in this blog post] :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Public Site or Public Community Page <\/li><li>Visualforce wrapping Lightning App marked as Lightning out<\/li><li>This website &#8211; https:\/\/JitendraZaa.com added in Salesforce CORS setting, so that Salesforce can be added as iframe in this website<\/li><li>Embed public site as iframe<\/li><\/ul>\n\n\n\n<p><strong>Option 2 :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Follow this <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/lightning_out_public_apps.htm\">documentation<\/a><\/li><li>Import Lightning Out Javascript Library in your website using Community URL<\/li><li>Use JavaScript SDK to create Lightning application dynamically <\/li><\/ul>\n\n\n\n<p><strong>Live Demo using Public Site and Visualforce :<\/strong><\/p>\n\n\n\n<iframe loading=\"lazy\" style=\"width: 100%; height: 230px;\" src=\"https:\/\/shivasoft-developer-edition.ap7.force.com\/BlogDemo\/SliderDemo\" width=\"300\" height=\"150\" frameborder=\"0\"><\/iframe>\n\n\n\n<!--more-->\n\n\n\n<p><span style=\"text-decoration: underline;\"><strong>SliderDemo.app<\/strong><\/span><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;aura:application access=&quot;Global&quot; extends=&quot;ltng:outApp&quot; implements=&quot;ltng:allowGuestAccess&quot;&gt;\n &lt;aura:dependency resource=&quot;c:SliderDemo&quot;\/&gt;\n &lt;aura:dependency resource=&quot;c:AnimatedSlider&quot;\/&gt;\n &lt;aura:dependency resource=&quot;c:Slide&quot;\/&gt;\n&lt;\/aura:application&gt;\n<\/pre><\/div>\n\n\n<p>See how we used <strong>ltng:allowGuestAccess<\/strong> in above Lightning application. It indicates that component can be used without authentication.<\/p>\n\n\n\n<p>Below Visualforce page is used to surface Lightning component on public sites<\/p>\n\n\n\n<p><span style=\"text-decoration: underline;\"><strong>SliderDemo.page<\/strong><\/span><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;apex:page showHeader=&quot;false&quot; standardStylesheets=&quot;false&quot;&gt;\n &lt;apex:stylesheet value=&quot;{!URLFOR($Resource.SLDS2_3_1, &#039;assets\/styles\/salesforce-lightning-design-system.min.css&#039;)}&quot; \/&gt;\n &lt;apex:includeLightning \/&gt;\n &lt;div style=&quot;width:100%;height:100px;&quot; id=&quot;lexContainer&quot;&gt;\n &lt;div style=&quot;height:6rem;&quot; id=&quot;sliderDemo&quot;&gt;\n &lt;div role=&quot;status&quot; class=&quot;slds-spinner slds-spinner_medium&quot; &gt;\n &lt;span class=&quot;slds-assistive-text&quot;&gt;Loading&lt;\/span&gt;\n &lt;div class=&quot;slds-spinner__dot-a&quot;&gt;&lt;\/div&gt;\n &lt;div class=&quot;slds-spinner__dot-b&quot;&gt;&lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;\/div&gt;\n\n &lt;script&gt;\n $Lightning.use(&quot;c:SliderDemoApp&quot;, function() {\n $Lightning.createComponent(&quot;c:SliderDemo&quot;,\n {},\n &quot;lexContainer&quot;,\n function(cmp) {\n document.getElementById(&quot;sliderDemo&quot;).style.display = &#039;none&#039;;\n });\n });\n &lt;\/script&gt;\n&lt;\/apex:page&gt;\n<\/pre><\/div>\n\n\n<p><em>Note :<\/em> At time of writing this blog post, <strong>apex:slds<\/strong> tag does not work properly if images are used.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to show Lightning component on public sites without need of user authentication<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[311,391],"class_list":["post-6142","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-lightning-component","tag-lightning-out"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4461,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-basics-of-lightning-component\/","url_meta":{"origin":6142,"position":0},"title":"Getting started with basics of Lightning Component","author":"Jitendra","date":"May 19, 2015","format":false,"excerpt":"As you might already know\u00a0that next big change in Salesforce is introduction to lightning components. As technology is changing rapidly and to take advantage of cutting edge innovations in web technology, Salesforce doesn't want to stay behind. If we see trend, all major platform has introduced component based design like\u2026","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Getting started with Lightning component Output","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Getting-started-with-Lightning-component-Output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5987,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-lightning-components-on-external-websites-lightning-out\/","url_meta":{"origin":6142,"position":1},"title":"Use Lightning Components on external websites &#8211; Lightning Out","author":"Jitendra","date":"April 5, 2017","format":false,"excerpt":"How to use Lightning component in node.js (External websites) by using Lightning Out. It shows how to enable CORS and SSL in Node.js with Video and complete source code.","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Show Lightning Component in Node.js using Lightning Out","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":6142,"position":2},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6176,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","url_meta":{"origin":6142,"position":3},"title":"Lookup component in Salesforce Lightning","author":"Jitendra","date":"July 6, 2017","format":false,"excerpt":"Salesforce Lightning component in plain JavaScript and SLDS with complete source code","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Lookup Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4102,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-faq-part-20-lightning-questions\/","url_meta":{"origin":6142,"position":4},"title":"Salesforce interview question related to Lightning framework &#8211; Part 20","author":"Jitendra","date":"February 4, 2015","format":false,"excerpt":"Salesforce interview questions for Salesforce developers and admin , mostly related to newly released Salesforce Lightning components and applications","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4788,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-radar-chart-lightning-component\/","url_meta":{"origin":6142,"position":5},"title":"Salesforce Lightning Component &#8211; Radar Chart","author":"Jitendra","date":"August 29, 2015","format":false,"excerpt":"How to create Radar chart using Lightning Component in Salesforce with the help of Chart.js library","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Lightning Component for Radar Chart","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/08\/GIF-Radar-Chart.gif?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=6142"}],"version-history":[{"count":5,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6142\/revisions"}],"predecessor-version":[{"id":7174,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6142\/revisions\/7174"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=6142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=6142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=6142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}