📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Iframe

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

Configuration - standard Iframe

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

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

2. 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 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

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

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

2. 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"
    }
  }
}

3. register your new page in routes.json with appropriate parameters passed into the page url

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

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
id	String	ID attribute of the iframe	null
className	String	class attribute of the iframe	null
onLoad	String	onLoad attribute of the iframe	null
srcAccount	Object	Object with account name and src	null

srcAccount

Using srcAccount

  "iframe#logout": {
    "props": {
      "src": "//www.mywebsiteprod.com/logout",
      "srcAccount": {
        "mywebsiteprod": "//www.mywebsite.com/logout",
        "mywebsiteqa": "//qa.mywebsite.com/logout"
      },
      "onLoad": "setTimeout(() => {window.location.href='/'}, 5000)",
      "className": "iframeLogout",
      "id": "iframeLogout"
    }
  },

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!