Salesforce Classic to Lightning Intergration / Lightning Out Salesforce:

What is the use of Lightning Out Salesforce ?

Lightning Out is used to add lighting components into the Visualforce Page.it is a flexible and powerful feature provided by salesforce
to embeded Lighting components into the any Web page.

Once we embed lighting component in any visualforce page/ visualforce component we can see lightning component features in any webpage.this is
possible by using lighting Out.we can display lightning component errors/exceptions also in visualforce pages.

Is it possible to display ligtning component exceptions/errors in visualforce page ?
Yes

Is Lightning Out is a iframe ?
No

Where We can i Use Lighting Out ?
Classic / Salesforce1 / Lightning Experience


What are steps to create Lightning Out Functionality ?
1) Include <apex:includeLightning/> in the Visualforce to add Lightning components for visualforce javascript library.(Include it in begining of the page)
2) Create lightning application and include it in lighting Use.This is for declare your dependent components in the Application.
3) Write your Javascript functions in the $Lightning.createComponent()
4) Use access="GLOBAL" extends="ltng:outApp" in your Application to access to external and identify as Lightning out application.
5) Include Lightning Out Javascript in the visualforce page.(Check in Example: We can keep it in Static Resource As well).
<script src="https://***myDomain***.my.salesforce.com/lightning/lightning.out.js"></script>

Note :
1) Extends="ltng:outApp" add SLDS resources to the page.It allow Styles to the page from Salesforce Lightning Design System (SLDS)
2) Extends="ltng:outAppUnstyled" if you don't want salesforce styles we use "outAppUnstyled".then we can embedd custom styles.

Salesforce Lightning Out

Example :

Application :

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="SampleLightningComponent"/>
</aura:application>

Lightning Component :

<apex:component >
    <apex:attribute name="Parameter1"
description="Passed to Lightning Out"
type="String" />
<apex:attribute name="Parameter2"
description="Passed to Lightning Out"
type="Id" />
<apex:includeScript value="/support/console/36.0/integration.js"/>
<apex:includeScript value="/soap/ajax/36.0/connection.js"/>
<apex:includeLightning />
    <div id="lightning" />
   <script>
        var paramid1 = '{!Parameter1}';
var paramid2 = '{!Parameter2}';
   
if(sforce.console.isInConsole()){
                function refreshTab(){
                    sforce.console.getEnclosingTabId(function(tab){
                    sforce.console.refreshSubtabById(tab.id, true);             
                    });
                }
}
       
$Lightning.use("c:SampleApplication_APP", function() {
        $Lightning.createComponent("c:SampleLightningComponent",
          { AccountHistoryId : paramid1,
  AccountName : paramid2},
          "lightning",
          function(component) {
              component.set("v.showButtons" , 'false');
              component.set("v.Inconsole" , 'true');
            });
        });
    </script>
</apex:component>

Some more Features for you :

1) we can use {! $Api.Session_ID } to maintain current User Authentication.
2) We can use $Lightning.use() mutliple time in the page.
3) we can use $Lightning.createComponent() also for multiple times.

Thanks for reading this article.Happy learning...

visit other posts to gain more Knowledge....