Blog

4 Ways to use interactive embeds within your website

March 20, 2024
4 Ways to use interactive embeds within your website

Embeds are an easy and accessible method to incorporate your infographics, data visualisations, animated illustrations, or any other visual elements you have designed into an HTML document (most commonly a webpage). Instead of exporting your creations, it is as simple as copy/pasting several lines of code without having to write any of these yourself.

In short, embeds allow you to…

  • …bypass the restrictions of your CMS
  • …distribute your online publication in various, creative ways fitting to your brand
  • …grab the reader’s attention without them having to leave your website
  • …fully control content presentation without losing any interactivity and styling
  • …keep your publications easily up to date in all places, at all times

Take creative matters into your own hands

Embedded content allows you to create seamless content experiences without being restricted by your CMS or needing help from your dev team. Interactive elements and animations will work as expected, truly integrating the content into your website. Your designs become a living document within the web, meaning your publication stays responsive on any device exactly as you designed it. Whether you’re serving a full, multi-page magazine or snippets of snackable content, we're here to introduce you to four methods to incorporate your online publications as embeds to elevate your communication strategy.

Embed it your way

Your weapon of choice is fully dependent on your type of publication and how you would like your reader to navigate through your online publication. We understand that as a designer or marketer, you want to control how your publications are presented in order to integrate them into your brand. Hence, we offer various (templated) formats, customisable navigation and plenty of elements to ensure the reader’s experience is fully seamless.

Let’s explore some examples.

1. Embedding micro-content to go beyond your basic CMS theme

Micro-content refers to content that communicates information within a single element, meaning there are no additional layers within the embed. Typically, it is an interactive, animated visual that highlights specific content or links to another subject, therefore making it an effective tool for encouraging user engagement.

Looking at the examples below, we see a wide variety of use cases for this type of embed, consisting of (but not limited to) teasers, data visualisation and educative clickables. Try interacting with the embedded content on this page or check them out within the context of our clients’ website.

2. Read multi-page publications through an overlay embed or iframe

Publications such as online magazines or reports often feature multiple pages and navigation options for browsing the contents. When integrating such publications into websites, two embed options are available: overlays and iframes.

An overlay offers an experience that stands separate from your website without redirecting the visitor to a separate page. Through a customisable preview, users can trigger an overlay to view the full publication, which they can then close to return to the original page they were on. Try clicking the preview below.

When you have contents that do not require full-screen viewing, an alternative option is to embed via an iframe. This option displays the publication between other page elements on your site.

3. Stop serving PDFs, instead directly embed a single (long)page

Imagine you have a single-page report or brochure that you want to integrate seamlessly into your website without requiring users to download yet another PDF. Similar to our first example, we offer the option to embed a single page directly within your site, eliminating the need for users to navigate away or open a separate tab.

This implementation allows for the inclusion of a longpage without internal scroll bars, ensuring the document becomes an integral part of your website. While the page could exist as a standalone document on a separate URL, embedding it directly enhances the user experience by preventing unnecessary navigation to a new window.

To showcase this best, we have embedded a facts & figures page from an annual report in this blog:

4. Full page embed to serve as your website’s body

If your website primarily consists of static content, it would be feasible to create such pages within Maglr and serve them as part of your website. This option proves especially valuable when you encounter limitations within your CMS.

The “layer” to which an embed can be integrated virtually limitless. Technically, we can integrate publications within your website’s body, ensuring they are enveloped by a header and footer. In this scenario, you have the option of using an iframe or injecting the HTML directly into the Document Object Model (DOM). Opting for the latter means the design becomes an integral part of your website’s code, resulting in your content being indexed and improving SEO.

Plenty of examples of such an implementation are found within our own Maglr website. The ‘create - share - analyse - manage’ pages were all created within our own system and embedded through a DOM inject.

Everything in one place

As mentioned earlier, an embed is a dynamic document within your website, unlike a static PDF or image. What if you need to make adjustments? Typically, you'd have to re-upload such assets, which isn't always quick or easy. However, Maglr provides a centralised space for managing content. With your preferred editor, you can easily implement design changes, which are then applied in seconds after publishing. No matter where your embedded content lives - it will always remain up-to-date and easily manageable through the dashboard.

Reconsider your content-strategy

Embeds may transform how you communicate your content. Explore the vast possibilities of sharing your narratives in an assortment of styles, sizes, and through various channels. You can use them to populate your website with engaging content, adding depth and richness to the user experience. Alternatively, you might choose to break down your content into smaller, enticing snippets to capture attention. Embeds provide the flexibility you need for any of your design ideas. Open up new methods for creativity and most importantly, enjoy the creative process!

Try it yourself

Curious how an interactive embed would function in your corporate website? Try our interactive example embeds that you can copy, paste and test in your own page.

Design interactive stories
View examples
The platform
8
minute read
Blog

More articles