You can easily add your Navattic interactive demos into AssetMule templates and assets using the Embed Code component.
Follow these instructions from Navattic’s documentation to access the sharing options for your Navattic demo.
You can embed your Navattic demo into your AssetMule template or asset by choosing the Inline Embed option in Navattic and then copy/pasting the embed code Navattic provides you into the Embed Code component in your AssetMule template or asset.
In some cases, you may find the formatting of the Navattic demo may not be optimal in AssetMule. You can try the various Inline Options Navattic offers, but if none of them are suitable you can use the following custom embed code and replace ADD YOUR SHARE LINK with the share link Navattic provides you for your demo:
<script>
void 0===window.navatticQueue&&(window.navatticQueue=[],window.navattic=new Proxy({},{get:function n(t,u,e){return function(){for(var n=arguments.length,t=Array(n),e=0;e<n;e++)t[e]=arguments[e];return navatticQueue.push({function:u,arguments:t})}}}));
</script>
<script src="https://js.navattic.com/embed-events.js"></script>
<div style="position:relative;overflow:hidden;aspect-ratio:16 / 10;">
<div style="display:flex;width:125%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">
<iframe src=ADD YOUR SHARE LINK
style="border:none;width:125%;aspect-ratio:16 / 10;transform:scale(.8);" allow=fullscreen />
</div>
</div>
For example, if your Navattic share link was https://assetmule.navattic.com/ywcp0oyv the embed code you would use would be as follows:
<script>
void 0===window.navatticQueue&&(window.navatticQueue=[],window.navattic=new Proxy({},{get:function n(t,u,e){return function(){for(var n=arguments.length,t=Array(n),e=0;e<n;e++)t[e]=arguments[e];return navatticQueue.push({function:u,arguments:t})}}}));
</script>
<script src="https://js.navattic.com/embed-events.js"></script>
<div style="position:relative;overflow:hidden;aspect-ratio:16 / 10;">
<div style="display:flex;width:125%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">
<iframe src=https://assetmule.navattic.com/ywcp0oyv
style="border:none;width:125%;aspect-ratio:16 / 10;transform:scale(.8);" allow=fullscreen />
</div>
</div>
Your Navattic demo should now be embedded into your AssetMule template or asset.
Have any questions? Reach out via chat or email us at [email protected]. We’re here to help