Troubleshooting the iframe implementation of a support page

Troubleshooting the iframe implementation of a support page

After implementing the iframe code, there are a few indicators that you can check to see if all is working as expected.

<script type="text/javascript">
  var e = document.createElement("script");
  e.src = '//';

<iframe src="//your CNAME for support center with http://www or https://" 
  • The iframe size should be changed according to the content of the iframe. When you navigate to the end of a long question, the iframe will expand and no scroll bar should appear. If you do see a scroll bar in the iframe that means your code is not implemented correctly and you should review the implementation process.
  • When navigating inside the iframe, the parent URL is changed according to your navigation. If navigating into internal pages in the iframe doesn't change the parent URL - that means your code is not implemented correctly.

Iframe ID was removed from the code.

Solution: Set back the iframe ID to the following: id="supportFrame"

I see a gray screen instead of the support center

Solution: CNAME definition is not correct. If you have HTTPS enabled make sure you don't have mixed content such as http and https together in the webpage and make sure both the iframe and the parent homepage are SSL secured.

Parent page is encoding the URL

Solution: Please add the following function to your parent page:

return encodeURIComponent(path);

Implementation notes:

First, you must insert the code snippet into the relevant DOM element, which includes the iframe. The iframe should have the URL of the CNAME defined by you. In some cases, the CNAME definition is not setup correctly, which results in displaying a gray screen instead of showing the iframe.

Second, you must add code that loads the JavaScript file. This specific code snippet injects the JS iframe library in the head area of the script. Make sure that the file is loaded once you embed it into the webpage, by troubleshooting with the developers tools in the browser. You can also check the Network tab in the developer tool to make sure that the file is loaded (Press Ctrl + F to look for the the JS file name to make sure it is loaded). If you don't see this file, it suggests that the function was not called.