With the new Winter '23 release, Salesforce is finally allowing customers to embed Experience Cloud sites into other sites securely by enabling relaxed Clickjack Protection for trusted domains. When this capability is combined with Experience Cloud sites built on the Lightning Web Runtime, customers now have a valid and substantially more performant way to embed Salesforce components and Flows into external sites than Lightning Out.

Importantly, because of LWR sites' ability to drop the SLDS framework entirely, this approach also offers designers and web developers far more control of the visual fidelity of the embedding experience than Lightning expeirences traditionally allowed, as well; this makes it easier to achieve pixel perfection. The ability to use pure JavaScript in LWC also allows you to send messages up and down the DOM between the LWC context and the parent iFrame context.

In the repo, you'll find two assets:

• A simple Lightning Web Component
• A sample HTML page representing the website or web app into which the LWR-based site is embedded.

In this simple scenario, a seperate web application is embedding an LWR-based site with an LWC that is communicating from the site up through the DOM to the encapsulating web app.

1. Salesforce scratch org or dev sandbox
2. Comfort with SFDX
3. Some static asset hosting platform for the sample embedding page (e.g., Amazon S3)

1. In the Salesforce scratch org or sandbox, set up Digital Experiences
2. Create a new digital experience site based on the Build Your Own LWR template
3. Create a new SFDX project on your local
4. Move the source for the embeddedLWC into your project
5. Push your project to your org
6. Create a Screen Flow with a single step
7. Drop the LWC into the Flow screen
8. Activate the Flow
9. In Experience Builder, drop the Flow component into the page and select the flow
10. Publish the site
11. Change the iFrameTester.html to update the iframe with your site link
12. Upload the html to S3
13. Visit the S3 url

In this example, an LWR-based site has been set up with a Screen Flow that has the above LWC embedded into it. The top-level iFrame page recieves an event and handles it when the LWC within the Flow is loaded. Once the event is received, the screen is updated via JavaScript with the beautiful colored bar at the top. And critically, SLDS has been entirely stripped, allowing us to apply styling without constraints at the container level.

Have a bug or an issue with this template? Open an issue against the repo and I'll fix it.

No warranties, only for example, created with love, etc.