From Josh Dayment – Flow iFrame Lightning Web Component

The flow IFrame Lightning Web Component gives an admin the ability to display a website/web page inside of a Flow Screen Component. iFrames can be tricky and they have their pros and cons and in some cases are depreciated by some websites however if you have a use case they can be great. When would you want to use it in a flow? A few ideas I have run into have been things like displaying a Salesforce File via a flow screen or showing data that is in an external system that is not available via a direct integration via external services or some other type of API but a user needs to see the data. Possibilities are endless last year I embedded a virtual career fair inside of an Experience Site that did not have a direct integration with Salesforce allowing us to present data and actions from the Experience Site while also displaying conversations and navigation of the Career Fair.

Gotchas. There are always Gotchas! In order for this to work you will need to add the domain of the site to your trusted sites in your org. The site also needs to allow for iFraming as well. iFrames come with their own inherent security risk so be careful what information you are passing through the iFrame.

I know you are all saying thank you for my rambling of how I have used this and the Gotchas can you just show us how it works already! Let’s take a look

The component has three input variables.

Property Label	Data Type	Description
iFrame Height	Text String	The height in pixels of your iFrame
iFrame Width	Text String	The width in pixels of your iFrame
URL	Text String	URL of the site you wish to display in your flow

In my example below I am going to take a file I upload in my first screen create a public url for it and display it via Flow iFrame (to learn more about creating a Content Delivery aka public url for files check out this post from Narender Singh)

Screen 1 user is uploading a new file via fileUploadImproved