Troubleshooting 3 min read 4 steps Updated 24 April 2026

The embed looks broken or unstyled

If your Emberhop embed appears too small, shows no content, or looks visually broken, the cause is almost always a container height issue or a document that is still processing. Here is how to fix it.

The embed looks broken or unstyled

When an Emberhop embed appears on the page but looks wrong, it is usually one of a few specific causes. The viewer might be too small, showing only a sliver of the document. It might appear completely blank even though the script has loaded. Or it might show a loading spinner indefinitely. Each of these has a different fix.

Fixing a too-small or invisible viewer

The most common visual issue is an embed that renders at the wrong height. The Emberhop viewer takes its height from the container it is placed in. If the container does not have a defined height, the viewer may collapse to zero pixels or to a very small sliver.

Important

The embed div or containing element must have a defined height. If you paste the script tag into an element with no height set, the viewer will not be visible even though it is technically loaded.

To fix this, wrap the embed script tag in a div with an explicit height:

<div style="height: 600px; width: 100%;">
  <script src="https://emberhop.com/embed/YOUR_DOCUMENT_ID.js" async></script>
</div>

You can adjust 600px to whatever height suits your layout. The viewer will fill the container's width automatically.

Diagnostic steps

1
Check the document status in your dashboard. If the document is still processing, the viewer will show a loading state. Give it a moment and then reload the page. Processing usually completes within two minutes.
2
Inspect the embed container height using your browser's developer tools. Open the inspector (right-click, "Inspect element") and click on the element that contains the embed. Check that it has a computed height greater than zero.
3
Check your browser zoom level. At very high zoom levels (like 200% or 300%), some embedded iframes can look misaligned or clipped. Try resetting your browser zoom to 100% and check again.
4
Check the browser console for JavaScript errors. If there is a script error on the page, it might be interfering with the viewer initialization. Open developer tools (F12), go to Console, and reload the page to see any errors.

If the viewer still looks wrong

If the viewer appears to load but the content inside looks garbled or misrendered, try downloading the original PDF from your Emberhop dashboard and opening it directly in a PDF viewer. If the PDF itself looks correct, the issue is with the embed rendering. If the PDF looks wrong, the file may have been corrupted during upload. Try deleting the document and re-uploading.

If you are on a page builder platform (like Squarespace or Wix), some platforms apply global CSS that can affect embedded content. Check if the platform has any restrictions on embedding third-party scripts, and check whether any global CSS is setting max-height or overflow:hidden on the container.

← All articles