Create a Widget through an iframe

To insert a custom widget using an iframe, the Tenant 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, the following JavaScript snippet needs to be inserted by the Tenant 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 (opens new window) in the AMP documentation.

TIP

Marfeel can provide a test sample that customers can use to create their own custom-built widget to be served through an iframe.