Multiple ways to embed a story

Overlay embed

Open a story or publication fullscreen on top of your website

Example blog text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.


		
    	
				The overlay embed works with an iFrame and can be used for a single page of complete publication. The text and colors of the above 'banner' are configurable. The overlay animation is triggered by the embed itself. No additional code is required.
			
			Try this embed
			 	
       		<div data-maglrEmbed="7wigeuesdv" data-type="banner" style="position:relative; width:auto; padding: 0 0 56.25%; ;"><iframe src="https://embed.maglr.com/7wigeuesdv?nav=3301&banner=1" frameborder="0" style="position:absolute;width:100%;height:100%;" allowfullscreen></iframe></div><script type="text/javascript" src="https://embed.maglr.com/assets/embed/js/embed.min.js" ></script>

iFrame embed

Include a publication with a minimal navigation in your blog


		
    	
				The navigation types and sizes of the iframe are configurable.
			
			Try this embed
			 	
       	 <iframe src="https://embed.maglr.com/7wigeuesdv?nav=minimal" width="100%" height="500" seamless="seamless" scrolling="yes" frameborder="0" allowtransparency="true" allowfullscreen ></iframe>

Embed single page (iframe)

Embed single page from publication (responsive on mobile)


		
    	
				A single page, without navigation, embedded with an iframe. Scales proportionally within the available space of the parent container.
			
			Try this embed
			 	
       	<div data-maglrEmbed="tcix7fm7im" data-type="fullHeight"   style="position:relative; width:auto; padding: 0 0 56.25%;;"><iframe src="https://embed.maglr.com/tcix7fm7im" frameborder="0" style="position:absolute;width:100%;height:100%;" allowfullscreen></iframe></div><script type="text/javascript" src="https://embed.maglr.com/assets/embed/js/embed.min.js" ></script>

Embed longread infographic (DOM inject)

Longread page using the DOM inject method


		
    	
				This embed places itself in the available horizontal space of the parent container and scales the vertical length proportionally. When the screen gets smaller the mobile version of the embed is activated. This version is not using an iFrame. The story is becoming a part of the parent page structure, improving SEO.
			
			Try this embed
			 	
       	<div id="maglr-orpeyxavrj" ></div><script type="text/javascript" src="https://embed.maglr.com/orpeyxavrj?target=maglr-orpeyxavrj" ></script>