How to render "Interactives"

[Phil Gyford]

Hi,

Some articles have "Interactives" in their body, which are delivered as a <figure> element containing links to an embeddable HTML file and some JavaScript. For example:

<figure class="element element-interactive interactive" data-interactive="https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js" data-canonical-url="https://interactive.guim.co.uk/charts/embed/nov/2022-11-29-06:01:12/embed.html" data-alt="Chart of religions in England and Wales"> <a href="https://interactive.guim.co.uk/charts/embed/nov/2022-11-29-06:01:12/embed.html">Interactive</a> </figure>

That's from this article in the API: https://content.guardianapis.com//uk-news/2022/nov/29/calls-grow-to-disestablish-church-of-england-as-christians-become-minority?show-fields=body&api-key=test

Rendered here on the website: https://www.theguardian.com/uk-news/2022/nov/29/calls-grow-to-disestablish-church-of-england-as-christians-become-minority 

By default this only displays the <a> tag, a link showing the word "Interactive".

Is there a recommended way to render these, perhaps using the linked-to JavaScript? Or maybe it's supposed to render automatically and there's something about what I'm doing on https://guardian.gyford.com that means it isn't working.

I could try parsing the HTML and displaying the html file in an <iframe>, but I don't think it's possible to know what height the iframe should be.

Many thanks,

Phil Gyford

[Rowanne Kabalan]

Hi Phil,

Thanks for reaching out. Unfortunately, we can't give any recommendations around rendering as we only provide the content through the API and it's up to users how they choose to render each element.

Kind regards,

Rowanne