X-Frame Options Issue when using Chat Preview Form on external website

Question

I'm trying to build a custom prechat page for live-agent (specifically on an external webpage, not on a community or on a Force.com Site) so that I can manually define the behaviour when a user connects to an agent. I want to dedupe against existing contacts and if none exist, create a new lead.

I can't find any documentation for LWC or Lightning Components, just for a Visualforce page which achieves this. I've tried adding the VF Page to the chat button but this hasn't displayed the prechat page on the external site, and I've tried wrapping the VF page in a Lightning Component using an iframe, but am runnning into issues with the X-Frame Options policy being set to "deny" which blocks the prechat page from loading at all.

Any advice on how to implement a custom prechat page on an external website would be greatly appreciated.

Answer 1

I've found a solution which may help others in the future.

If you want to expose visualforce pages using an iframe in a lightning component, you have to reference them using a Site.

But, this is the wrong way to implement a pre-chat form for an embedded service deployment. You can use the Embedded Service for Web Developer Guide in order to change the behaviour of the default pre-chat page, and to pass in non-standard information using the extraPrechatFormDetails and the extraPrechatInfo fields in the embedded service deployment.

Hope this helps anyone running into a similar issue!