How To Embed Lightning Web Component In Visualforce Page?

In Salesforce, to embed the Lightning Web Component in the Visualforce page, we first need to wrap the component with an Aura component. The Aura component serves as a bridge between the Lightning Web Component (LWC) and the Visualforce page.

In this Salesforce tutorial, we will learn how to embed a Lightning web component in a visualforce page.

Table of Contents

Why Use Lightning Web Components in Visualforce Pages?

In the Salesforce environment, by embedding an LWC in a Visualforce page, we can reuse the functionality of LWC in Visualforce pages. Usually, the need to embed an LWC in Visualforce comes when you have to use the LWC component in the Classic org.

Since the Lightning Web Component cannot be directly displayed in Classic, we embed LWC in a Visualforce page. Through a Visualforce page, we can make the LWC usable in Classic org also.

Embed Lightning Web Component In Visualforce Page

The entire process of embedding a Lightning web component in a Visualforce page works as follows:

Create a Lightning Web Component
Wrap the LWC with an Aura Component
Embed the Aura wrapped LWC in a Visualforce Page

Let’s take an example, where we will display a custom greeting message on a Visualforce page by using a Lightning Web Component.

Create a Lightning Web Component

First, create a Lightning Web Component that we will embed in the Visualforce page. This Lightning Web component will display a greeting message.

Follow the steps below:

Open the VS Code IDE integrated with your Salesforce org. To create an LWC, press “Ctrl +Shift+P” then in the command palette select SFDX: Create Lightning Web Component.
Enter the Lightning web component name in camel case, such as greetMessage, and press Enter.
Enter the code below in the JS file to define the logic of displaying a custom message.

 import { LightningElement, api } from 'lwc';

   export default class GreetMessage extends LightningElement {
       @api name;

       get greetingMessage() {
           return 'Hello! Welcome to Salesforce.';
       }
   }

To display the message on the UI, enter the code below in the HTML file.

<template>
    <lightning-card title="Call LWC in Visualforce" icon-name="custom:custom19">
        <div class="slds-m-around_medium">
    <h1>{greetingMessage}</h1>
          </div>
    </lightning-card>
</template>

Till this point, we have defined the logic to display the greeting and the UI of the LWC.

To make the component visible to the Lightning page, enter the following code in the meta.xml file.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>

After this, you can view the Lightning Web Component by deploying it to the Lightning page.

It will look as shown in the image below.

Get Lightning Web Component in Visualforce Page

Now, we will embed this LWC in the Aura component so that it can be called in a Visualforce page.

Wrap the LWC with an Aura Component

To embed the LWC in a Visualforce page, we wrap the LWC with an Aura component. Then, the Aura component (embedded with LWC) is called in Visualforce pages using the <apex:includeLightning/> tag.

With this, the content of LWC is visible on the Visualforce page. Let’s see how to wrap the LWC in an Aura component.

Navigate to the Salesforce developer console and select File > New > Lightning Application.

Create a Visualforce page with embeded LWC

Enter the name for the Aura application, such as ‘greetingAuraApp‘, and click ‘Submit‘.

Wrap LWC with Aura to embed in Visualforce Pages

3. Enter the code below in the greetingAuraApp to embed the LWC greetMessage in the Aura.

Here, the important point is that ltng:outApp needs to be extended in the app.

ltng:outApp adds SLDS resources to the page, allowing the Lightning components to be styled with the Salesforce Lightning Design System. If we don’t want SLDS resources added to the page, we need to extend from ltng:outAppUnstyled instead.

 <aura:application extends="ltng:outApp">
    <c:greetMessage/>
</aura:application>

With this, we have embedded the Lightning web component in the Aura app component.

Embed the Aura Wrapped LWC in a Visualforce Page

Now, we will create a Visualforce page and embed the Aura component within it. With this, the content of the Lightning web component will be visible on the Visualforce page.

To create the Visualforce page, follow the steps below.

Navigate to Setup> Quick Find > Visualforce pages. In the Visualforce setup, click on the New button.

Call Lightning Web Component in Visualforce page

Enter the Label for the Visualforce page, and optionally, we can make it visible to Lightning also by selecting the checkbox Available for Lightning Experience.

How to Call Lightning web component in Visualforce

Enter the code below in the Visualforce Markup tab.

<apex:page showHeader="false" sidebar="false">
    <apex:includeLightning />    
    <div id="LightningComponentid"/>    
    <script>
    $Lightning.use("c:greetingAuraApp", function() {
        $Lightning.createComponent("c:greetMessage",
          { 
          },
          "LightningComponentid",
          function(cmp) {
             console.log('Lightning Web Component is added in the Visualforce Page');
          });
    });
    </script>
</apex:page>

The Visualforce embeds the Aura component (c:greetMessage) using the ‘$Lightning’ JavaScript API. The <apex:includeLightning /> tag loads the Lightning framework in the Aura component.

Inside the <div> tag, id=”LightningComponentid” serves as the placeholder for the component.

The method $Lightning.use() loads the greetingAuraApp, and within its callback, it calls $Lightning.createComponent() to render the greetMessage Lightning Web Component.

After entering the code, save the Visualforce page.
To view the UI of the Visualforce page with an embedded Lightning Web Component, click the Preview button. If embedded correctly, the Visualforce page will look as shown in the image below.

Create Visualforce page with embeded LWC

This way, we can call and embed a Lightning Web Component in Visualforce pages with the help of an Aura Component.

I hope you understood how to embed a Lightning Web Component (LWC) in a Visualforce page. By wrapping the LWC in an Aura component and embedding it in a Visualforce page, you can use the functionality of LWC in a Visualforce page.