Custom Widgets Through Iframes

To provide customers with full control over their widgets and seamlessly include them in multiple channels, Marfeel offers a solution where custom-built widgets are embedded in iframes. This is the optimal way for a publisher's custom widgets to coordinate and interact with Marfeel. 

By embedding them in iframes, customers can insert any kind of widget in their Marfeel Progressive WebApp (PWA) and maintain full control over its behavior. 

Using iframes also ensures that the publisher's customized widgets appear in their Marfeel-produced Google AMP pages without any extra or special support. AMP is generating more and more traffic for publishers by the month. Not integrating widgets with iframes means that a customer's readers cannot access the widgets that add value to their content.  

Development integration

To insert a custom widget using an iframe, the customer needs to create and host a page that Marfeel uses to generate an iframe. This page must only contain the widget's content without any other HTML (no headers, no logos, etc.).

It is recommended that the publisher uses iframes for their customized widgets on their desktop site. This way Marfeel simply detects the iframe, and inserts it in the same position in the customer's Marfeelized mobile site and Marfeel-produced Google AMP pages.

Serving iframes for custom widgets will always work in a publisher's Marfeel PWA, however, to guarantee that they're displayed in their AMP pages, they should be placed under an HTTPS URL.

 

Testing

When integrating this iframe for the first time, Marfeel requires a test HTML page for both the section mosaic and article details to set up an adapted crawler for the customer's page. 

As long as the customer maintains the same format as in these examples, any custom widget can be displayed in their Marfeel solution.

Code

At the bottom of every iframe page, the following JavaScript snippet needs to be inserted to properly resize the widget dimensions according to the device accessing it:

window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-size',
  height: document.body.scrollHeight
}, '*');

The above code works both in a customer's Marfeel version and their AMP pages. For more information regarding this code snippet, see the amp-iframe article in the AMP documentation. 

 

For publishers interested in this solution, Marfeel can provide a test sample that customers can use to create their own custom-built widget to be served through an iframe.