Salesforce LWC Integration: The Easiest Way to Embed Components Outside Salesforce

If you've ever tried embedding a Lightning Web Component (LWC) into a non-Salesforce website, you probably started with some confidence — then quickly found yourself spiralling into a rabbit hole of half-baked documentation and inconsistent behaviour.

It's a common ask: “Can we show this Salesforce component on our company website?” And the default go-to answer often involves something like lightning:out. But in practice, that route gets bumpy real quick.

Why lightning:out isn't always the best choice

Technically speaking, lightning:out allows you to render LWC components on third-party platforms by including Salesforce JavaScript libraries externally. And yes, it can work — but implementation tends to be finicky and fragile. Common issues:

• Setup is overly complex
• Limited support for newer LWC patterns
• Hard-to-debug issues when things go wrong

Rather than beating your head against the wall trying to make lightning:out behave, there's a more practical workaround that's far easier to implement and works consistently.

The simpler approach: Community Page + iframe

Here's the idea: instead of exposing the raw component itself, you expose a Salesforce Community Page that contains the LWC, and then embed that page into your external website using a good old-fashioned <iframe>. You get full control of your component, and your website gets a seamless user experience — all without duct-taping together fragile workarounds.

Step-by-step setup

1. Create a Community Page

Start by creating a page in Experience Builder (formerly Salesforce Community Builder). This page will serve as the container for your LWC. Name it something meaningful, like /webinar or /events-slider, especially since it'll be publicly exposed.

2. Add your LWC via an Aura wrapper

Currently, LWC can't be directly added everywhere in Experience Builder, so wrap your LWC in a simple Aura component:

<aura:component implements="forceCommunity:availableForAllPageTypes">
    <c:yourLwcComponent />
</aura:component>

Then drop this Aura component onto the community page you just created.

3. Make the page public

To allow access without requiring login, go to Builder → Settings → General and enable “Guest users can see and interact with the site without logging in.” Without this, your iframe will either throw an error or show a blank page for non-logged-in users.

4. Tweak security settings for embedding

Go to Builder → Settings → Security & Privacy and make these changes:

• Clickjack Protection: set to Allow framing by any page. This allows your community page to be embedded inside an iframe on another domain.
• Content Security Policy (CSP): set to Relaxed, so scripts and styles from your external site can interact without being blocked.
• Trusted Sites for Scripts: add your website's domain.

5. Add Trusted URLs in Setup

Head to Setup → Security → Trusted URLs and add the same external domain. This tells Salesforce that the domain is allowed to interact with your org in specific ways.

6. Configure CORS

Go to Setup → CORS and add the same domain again. This allows the browser to permit cross-origin requests between your external site and Salesforce. Without it, you may hit CORS errors when the site tries to load the page or call server-side logic.

Sample HTML to embed the page

Once everything is configured, share this snippet with your web team (with src set to the correct path of your published community page):

<iframe
  src="https://yourorg.my.site.com/webinar/s"
  width="100%" height="800px"
  frameborder="0" scrolling="auto">
</iframe>

A quick note on access & permissions

Even after setting everything up, your component might misbehave if the Guest User Profile doesn't have the right access. Be sure to:

• Assign the necessary Apex classes
• Grant CRUD/FLS permissions on any objects and fields your component uses
• Give access to any custom metadata, labels, or referenced components

It's a common pitfall: everything is technically wired up, but the component silently fails because the guest profile can't “see” the data it needs.

Real-world example: webinar events slider

We used this approach to display a dynamic webinar events slider on an external site. The LWC pulled data from Salesforce, formatted it into a slick carousel, and rendered inside a community page — which the external site embedded via iframe. No auth flow. No complicated JS loading. Just clean, functional embedding.

Final thoughts

While lightning:out might seem like the default solution for rendering Salesforce components on external websites, it often creates more problems than it solves — especially with newer LWC patterns. Embedding a Community Page via iframe may feel like a workaround, but in reality it's easier to implement, more reliable in production, and easier to maintain long term.

So next time someone says, “Can we show that Salesforce thing on our homepage?” — you'll know exactly how to do it, and you won't even need to light a candle for lightning:out.