Embed Readymag projects using iframe

Announcements
1

With our new feature — iframe embed — you can easily customize the structure of any existing website by seamlessly inserting Readymag projects. Whether it was made using Readymag, a different website builder or coded entirely from scratch.

Consider using the new feature when you need to:

  • Customize a specific section of an existing website with little-to-no help from developers. For example, embed a сommercial editorial in the infrastructure of a digital media, publish a business report in a corporate portal, add a use case or an online merch shop to the website of a design studio, etc.). The embedded project will easily match the overall structure of your project.
  • Paste one Readymag page into another.

The iframe embed feature will be especially beneficial for bigger businesses, corporate clients and design studios. We introduced it following requests from similar users.

To embed a project using iframe, first make sure that it is published, then open the Export tab in its settings and select ‘iframe’. Enable the ‘Allow third-party embeds’ toggle to make the iframe embed possible, since this feature is disabled by default. Check our Help section for more details.

The new feature is available for users on Business and Extra plans, as well as the legacy Professional plan. If the origin account is downgraded from one of these plan types, all iframe embeds will stop working and convert into blank areas.

1 Like
2

Hi Mary,

We we’ve been a using the ReadyMag iframe embed for a long time using custom code. Great to see this come a feature for the platform!

We use this iframe feature to embed case studies on our main homepage. We have been tinkering around and have found a way to create transparent iframe embeds so you can have seamless experience with embedded pages. Cool uses are to have project content including PNG elements floating seamlessly over video backgrounds or gradients.

Examples of this in action below from our studio website. The HTML + CSS is included below to achieve this affect with some explanation — I’m sure others can think of some creative ideas using this! :slight_smile:

1794×1101 77.1 KB

The allowtransparency="true" is the piece that allows the iframe element to support embedded content with transparent backgrounds. It is added to the iframe’s attributes.

.
<iframe src="YOUR READYMAG PAGE URL HERE" allowtransparency="true" frameborder="0"></iframe>

.
Unmodified projects will not support this feature unless the following CSS is used to hide the fixed background container (this is ReadyMag’s version of the background colour / video element). Then the other CSS makes the another background stying transparent including the page’s body.

<style>
  body {
    background-color: transparent !important;
  }

  .mag,
  .mag-pages-container,
  .container,
  .page {
    background-color: transparent !important;
  }

  .page-fixed-bg-container {
    display: none !important;
  }
</style>

If anyone wants some help getting this to work? Send us a Tweet!

3 Likes
3

thanks for that insight @HEADLESS.HORSE
I am also using iframe embed for some time and used this in several project.

I also want to add some examples using the embed iframe possibility:
For example to implement a Blog, that is animating from right to left above the mainpage like here: https://rbo.hamburg/

or to show two different contents on a animated Flip-Card: https://solafide.online/

I think there are quite a few cool other possibilities to play with it.
The only problem I stumbled upon using this is the increase of the loadingtime of the main webpage, as the RMiframepage is loading and executing all resources RM needs again.
So one might want to implement the loading of the iframe dynamically to deal with it.

4

Hi @neueMeta.
We overcame that issue with loading was summoning the iframe contents using a javascript function and leaving the ‘src’ of the iframe attribute empty. The iframe link could be called up upon clicking a button.

5

Hi - I have a project that seems to need a different kind of embed than Readymag’s iframe. As far as I can tell, R/m’s iframe has defined dimensions and you navigate through multiple pages as you would a book reader. We would like to export a single-long-page project to embed on a page of my client’s Wordpress site, as a whole page takeover. Not an iframe with defined dimensions…

We did exactly this with a Vev project a couple months ago, at “Interactive Report: The Sustainability Advantage - Workflow™”. The Wordpress page simply draws a blank div, and we load the Vev project script, hosted in our wp-content/uploads folder to avoid XSS problems, on the page. That fills the div with the page contents designed on Vev. Since it’s a one page experience, it doesn’t need to have any nav links to other pages. Vev’s script does call some other resources from their servers, such as fonts, but this works.

It’s not clear if we can do this with Readymag — when I examine the page contents and scripts of a Readymag project, it’s not clear what i can download and host locally, and whether they have to be in an iframe element, or can be in a div. As the link above makes clear, we’re looking to export not a page element to be embedded on another page, but basically everything within the page body.

6

Hi, can I export a single page (rather than project) to embed?