Documentation
Feedback
Guides

Advanced components
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

  1. Add the vtex.iframe to the theme's dependencies on the manifest.json
"dependencies": { "vtex.iframe": "0.x" }
  1. Add the interface iframe to any custom page (Iframes are not allowed outside custom pages).
{ "store.custom#about-us": { "blocks": [ "flex-layout.row#about-us", "iframe" ] }, "iframe": { "props": { "src": "" } } }
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 the vtex.iframe to the theme's dependencies on the manifest.json
"dependencies": { "vtex.iframe": "0.x" }
  1. Add the dynamicIframe block and its properties to the blocks.json file
{ "store.custom#locationPage":{ "children":[ "iframe.dynamic-src" ] }, "iframe.dynamic-src":{ "props": { "dynamicSrc": "https://www.test.com/exampleStaticPathName/{dynamicParam1}/{dynamicParam2}/exampleStaticPageName", "width": "1920", "height": "1000", "title": "exampleStaticPageName iframe wrapper for {account}", "allow": "geolocation" } } }
  1. register your new page in routes.json with appropriate parameters passed into the page url
{ "store.custom#locationPage":{ "path": "/:param1/:param2/pagename" } }
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.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page