Megaphone Embed - Common Issues

Problem: Some content is cut off

Symptom:

Some Megaphone content is out of view when the page loads. For example, some answers are partially or fully hidden, as shown below.

 

Cause:

Megaphone's iframe is too short to contain all answers.

Solution:

In Megaphone's embed code, increase the iframe height as shown in the following example.

Original code:

<iframe id="MegaControllerIframe-1484244750467"

 style="width: 337px; min-height: 480px;" src=""></iframe>

New code:

<iframe id="MegaControllerIframe-1484244750467"

 style="width: 337px; min-height: 720px;" src=""></iframe>

Problem: Megaphone shows mobile layout only

Symptom:

Megaphone fails to display to tablet/desktop layout, even when the browser window is wide enough to contain it.

Cause:

Megaphone embed "Size" is set to "Small" or "Medium," not "Responsive."

Solution:

In Megaphone's Embed tool, at Step 2 ("Choose a Size"), select "Responsive".

Problem: Megaphone doesn't resize, even when set to Responsive

Symptom:

Controller iframe width does not change when the browser window is resized.

Cause:

Even though Responsive was selected in Megaphone's Embed tool, it is possible that the code was subsequently changed, and the Megaphone iframe container's width has been set to a specific pixel value, such as 400px, instead of a percentage value, such as 100%.

Solution:

Re-create the Megaphone embed code, making sure to select "Responsive" at Step 2, as follows:

Alternatively, verify that the iframe container width is 100%, not a pixel value. For example,

Problem code (specific pixel width):

<div class="container" style="width: 400px;">

<iframe id="MegaControllerIframe-1484244750467"

           style="width: 100%; min-height: 480px;" src=""></iframe>

</div>

Correct responsive code (percentage width):

<div class="container" style="width: 100%;">

<iframe id="MegaControllerIframe-1484244750467"

           style="width: 100%; min-height: 480px;" src=""></iframe>

</div>

Problem: CMS/Website rejects Megaphone code

Symptom:

The content management system (CMS) for the website into which Megaphone is embedded rejects or fails to display Megaphone's code.

Cause:

When the Stretch Box embed type is selected, Megaphone's embed code includes JavaScript that is rejected by some content entry systems.

Solution:

In Megaphone's Embed tool, at Step 1, select Tile instead of Stretch Box, as follows:

When Tile is selected, Megaphone's embed does not include any JavaScript code, and is, therefore, permitted by the broadest range of website content entry systems.

Note that in some older versions of Megaphone's Embed tool, the JavaScript code must be removed manually by deleting everything after and including the <script> tag, as shown in the following example:

Original Code (highlighted portion must be deleted)

<style rel="stylesheet">.scroll-wrapper {-webkit-overflow-scrolling: touch;overflow-y: scroll;height: 480px;width: auto}.scroll-wrapper iframe {border: none;}</style><div class="scroll-wrapper"><iframe id="MegaControllerIframe-1502855410619" style="width: 100%; min-height: 480px;" src="URL_GOES_HERE"></iframe></div><script type="text/javascript">(function () { if (window && window.addEventListener) { var MegaphoneController = document.getElementById("MegaControllerIframe-1502855410619"); MegaphoneController.receiveMessage = function (message) { if (message.data.origin === "Megaphone") { MegaphoneController.style.height = (parseInt(message.data.height) + 1).toString() + "px"; } }; window.addEventListener("message", MegaphoneController.receiveMessage, false); }}());</script>

Corrected Code, with JavaScript Removed

<style rel="stylesheet">.scroll-wrapper {-webkit-overflow-scrolling: touch;overflow-y: scroll;height: 480px;width: auto}.scroll-wrapper iframe {border: none;}</style><div class="scroll-wrapper"><iframe id="MegaControllerIframe-1502855410619" style="width: 100%; min-height: 480px;" src="URL_GOES_HERE"></iframe></div>