How to Embed a LWC Component in a Visualforce Page and Make It Public Using Salesforce Sites

How to Embed a LWC Component in a Visualforce Page and Make It Public Using Salesforce Sites 

In many real-world use cases, you might want to expose a Lightning Web Component (LWC) to external users — without requiring them to log in. Whether you’re building a public event registration form, a feedback portal, or a contact us page, Salesforce gives you a way to do this using Visualforce Pages + Aura Wrapper + Salesforce Sites. 

In this blog, we’ll walk you through step-by-step on how to embed a Lightning Web Component (LWC) in a Visualforce Page, and then expose that page publicly using Salesforce Sites.  

📍 Use Case Scenario 

Let’s say you’re organizing an event and want external users to register for it via a form. You’ve already created an LWC (eventRegistrationForm) for the form, but LWCs can’t be exposed directly through a Salesforce Site. To achieve this, you’ll: 

1. Wrap your LWC in an Aura component. 

1. Embed that Aura component in a Visualforce Page. 

1. Make the Visualforce Page public via Salesforce Sites. 

Let’s build this from scratch. 

🔧 Step-by-Step Implementation Guide 

🔹 Step 1: Create a Lightning Web Component (LWC) 

Let’s create an LWC named eventRegistrationForm that contains your public-facing form or component. 

🧾 eventRegistrationForm.html 

<template> 

    <div class=”slds-box slds-theme_default”> 

        <h1 class=”slds-text-heading_medium”>Event Registration</h1> 

        <lightning-input label=”Full Name” value={fullName} onchange={handleChange}></lightning-input> 

        <lightning-input type=”email” label=”Email” value={email} onchange={handleChange}></lightning-input> 

        <lightning-button label=”Submit” onclick={handleSubmit} class=”slds-m-top_medium”></lightning-button> 

    </div> 

</template> 

🧾 eventRegistrationForm.js 

import { LightningElement } from ‘lwc’; 

export default class EventRegistrationForm extends LightningElement { 

    fullName = ”; 

    email = ”; 

    handleChange(event) { 

        const field = event.target.label; 

        if (field === ‘Full Name’) this.fullName = event.target.value; 

        if (field === ‘Email’) this.email = event.target.value; 

    } 

    handleSubmit() { 

        alert(`Thank you, ${this.fullName}! Your registration is received.`); 

    } 

} 

🔹 Step 2: Wrap LWC in an Aura Component 

You can’t embed LWC directly in Visualforce. So, we wrap it inside an Aura component. 

🧾 eventWrapperComponent.cmp 

<aura:component access=”global” implements=”flexipage:availableForAllPageTypes,force:appHostable,ltng:allowGuestAccess” extends=”ltng:outApp”> 

    <c:eventRegistrationForm /> 

</aura:component> 

🔹 Step 3: Create a Visualforce Page 

Visualforce pages support ltng:outApp which allows embedding of Aura components. Here’s how: 

🧾 EventVFPage.page 

<apex:page> 

    <apex:includeLightning /> 

    <div id=”eventFormContainer”></div> 

    <script> 

        $Lightning.use(“c:eventWrapperComponent”, function() { 

            $Lightning.createComponent(“c:eventWrapperComponent”, {}, “eventFormContainer”); 

        }); 

    </script> 

</apex:page> 

✔️ Tip: Make sure your component bundle is included in a Lightning Application (.app) if needed, or ltng:outApp will throw an error. 

🔹 Step 4: Create a Salesforce Site 

To expose your Visualforce Page publicly, we’ll configure a Site: 

🔧 Create a New Site 

1. Go to Setup → Sites. 

1. Click New. 

1. Fill in the required fields: 

• Site Label: PublicEvent 

• Site Name: publicevent 

• Default Web Address: publicevent 

• Active Site Home Page: EventVFPage 

• Activate the site. 

Once created, you’ll get a public URL like: 

https://your-domain.force.com/publicevent/EventVFPage 

🔹 Step 5: Grant Access to Guest User Profile 

To allow the public user to access your components and data: 

⚙️ Modify Guest User Profile 

1. Go to Setup → Sites → [Your Site Label] → Public Access Settings. 

1. Click View Users → Site Guest User. 

1. Click Profile → Edit: 

• Under Enabled Apex Class Access, add any Apex classes your component uses.(IMP: Apex class must be global and includes without sharing) 

• Under Object Settings, allow Read/Create access to any objects involved. 

• Under Field-Level Security, expose required fields. 

• Grant access to the eventWrapperComponent. 

⚠️ Security Tip: Avoid exposing sensitive objects or PII fields. 

🎯 Final Result 

Your final public URL will look like this: 

https://<yoursite>.force.com/publicevent/EventVFPage 

Opening this URL will show your custom LWC form, embedded within a Visualforce page and accessible to any user—without login. 

💡 Bonus Enhancements 

• ✅ Use URL Parameters to pass dynamic values into your component. 

• ✅ Add CSS styling or SLDS classes for a polished UI. 

• ✅ Add a CAPTCHA to protect from spam submissions. 

• ✅ Connect the form to Apex to store data in Salesforce objects. 

• ✅ Redirect users after submission to a “Thank You” page. 

🧠 Key Takeaways 

Feature	Value
Can LWC be directly used in VF Page?	❌ No
Can Aura wrap an LWC?	✅ Yes
Can Aura be embedded in VF?	✅ Yes, using $Lightning.use()
Can VF page be public via Site?	✅ Yes
Can Guest User access Apex?	✅ With correct permissions

 

📌 Summary 

To expose Lightning Web Components to the public: 

1. Wrap LWC in an Aura component. 

1. Embed the Aura component in a Visualforce page. 

1. Host the Visualforce page using a public Salesforce Site. 

1. Set correct permissions for Guest User access. 

This method enables powerful use cases like public registration forms, feedback pages, surveys, and more — all while leveraging Salesforce’s native features.