Iframe

An app that makes it possible to render external iframes on a store.

{"base64":" ","img":{"width":354,"height":636,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":184249,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-iframe-0.png"}}

Configuration - standard Iframe

Add the vtex.iframe to the theme's dependencies on the manifest.json


_10"dependencies": {
_10 "vtex.iframe": "0.x"
_10}

Add the interface iframe to any custom page (Iframes are not allowed outside custom pages).


_14{
_14  "store.custom#about-us": {
_14    "blocks": [
_14      "flex-layout.row#about-us",
_14      "iframe"
_14    ]
_14  },
_14
_14  "iframe": {
_14    "props": {
_14      "src": ""
_14    }
_14  }
_14}

Prop name	Type	Description	Default value
`src`	String	Source address the iframe should render	`null`
`width`	Number	Width attribute of the iframe	`null`
`height`	Number	Height attribute of the iframe	`null`
`allow`	String	allow attribute of the iframe	`null`

Configuration - dynamic Iframe

Add the vtex.iframe to the theme's dependencies on the manifest.json


_10"dependencies": {
_10  "vtex.iframe": "0.x"
_10}

Add the dynamicIframe block and its properties to the blocks.json file


_16{
_16  "store.custom#locationPage":{
_16    "children":[
_16      "iframe.dynamic-src"
_16    ]
_16  },
_16  "iframe.dynamic-src":{
_16    "props": {
_16      "dynamicSrc": "https://www.test.com/exampleStaticPathName/{dynamicParam1}/{dynamicParam2}/exampleStaticPageName",
_16      "width": "1920",
_16      "height": "1000",
_16      "title": "exampleStaticPageName iframe wrapper for {account}",
_16      "allow": "geolocation"
_16    }
_16  }
_16}


_10{
_10  "store.custom#locationPage":{
_10    "path": "/:param1/:param2/pagename"
_10  }
_10}

Prop name	Type	Description	Default value
`dynamicSrc`	String	iframe src with dynamic parameters from page URL enclosed in '{}'	`null`
`width`	Number	Width attribute of the iframe	`null`
`height`	Number	Height attribute of the iframe	`null`
`title`	String	title attribute of the iframe	`null`
`allow`	String	allow attribute of the iframe	`null`

Customization

There is a .container handle that wraps the iframe, it's also possible to use blockClass.