Menu
Guides
API Reference
App Development
Storefront Development
VTEX IO Apps
Troubleshooting
Release Notes

Iframe

1 min read

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

{"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

  1. Add vtex.iframe to the theme's dependencies in the manifest.json file.

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

  1. Add the iframe interface 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 nameTypeDescriptionDefault value
srcStringSource address the iframe should rendernull
widthNumberWidth attribute of the iframenull
heightNumberHeight attribute of the iframenull
allowStringallow attribute of the iframenull

Configuration - dynamic Iframe

  1. Add vtex.iframe to the theme's dependencies in the manifest.json file.

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

  1. Add the iframe.dynamic-src 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
}

  1. Register your new page in routes.json with the appropriate parameters passed into the page URL.

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

Prop nameTypeDescriptionDefault value
dynamicSrcStringiframe src with dynamic parameters from page URL enclosed in '{}'null
widthNumberWidth attribute of the iframenull
heightNumberHeight attribute of the iframenull
titleStringtitle attribute of the iframenull
allowStringallow attribute of the iframenull

Customization

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