VTEX Developer Portal

All ContributorsAll Contributors

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

imageimage

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 ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Updated 4 months ago


Iframe


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.