JavaScript conflicts and security concerns are inevitable when adding third-party software to a website. We came up with a solution to protect your website’s JavaScript libraries with an iframe. In this example, we’ll share how to set one up with our Embedded Service Chat component for Service Cloud. The solution is easy, secure, and allows for added customization later. Find the code on GitHub.
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.
In our example, by using an iframe we’re creating a separation between the site code and a Chat component with parent and child pages. The iframe isolates the Salesforce component’s DOM, CSS, and JavaScript from the parent page. This prevents multiple JavaScript libraries from interacting and potentially crashing features.
Creating your own iframe can provide a more secure and smoother implementation. Plus, you have the option to customize with other JavaScript libraries in the future without interference.
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.
Considerations
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.