Use an Iframe to Protect Embedded Service Chat on Your Website
What is an Iframe?
An iframe (inline frame) is an HTML document embedded inside another HTML document on a website. An iframe is typically used to insert content from another source, such as advertisements, into a web page.
Set Up the Iframe for Chat
Embedded Chat is a Salesforce widget placed on your website that customers can click to quickly get answers to their questions from an agent using the full Service Console. Adding this iframe solution means the parent pages communicate directly with the child pages using 0 messages.
In this example for the Capricorn Coffee Company, we’ll create an iframe for Chat on the website home page. You can try this out in your own test org. Here are the prerequisites and steps for Embedded Chat if you need to add it to your test org.
1. Go to the parent.html page of your website home page or where your Embedded Service is loaded.
2. Copy and paste the parent code snippet sample code, adding the iframe tag. This separates the Chat from the home page and creates the iframe.
3. The child snippet sample code goes in a separately created HTML page. Copy and paste the child snippet sample code where the Embedded Chat is currently loaded.
NOTE: Remember to replace the <yourCoreURL> variable in both the parent and child code with your working Salesforce org URL.
4. Test this solution. Open up the parent page, click the Chat button and start chatting to make sure Chat is working.
While this solution addresses security concerns, it may also create some usability issues, including disabling the browser back button. Also, old versions of mobile browsers might not support some of the iframe functionality. Make sure to thoroughly test before deployment.
About the Author
Susan Rimerman is a Staff Technical Writer for the Embedded Service Web team at Salesforce. The solution was created by Arvind Madhavan, Senior Software Engineer for Embedded Service Web.