https://github.com/vtex-apps/iframe
An app to use sourced iframes
https://github.com/vtex-apps/iframe
hacktoberfest store-framework vtex-io
Last synced: 6 months ago
JSON representation
An app to use sourced iframes
- Host: GitHub
- URL: https://github.com/vtex-apps/iframe
- Owner: vtex-apps
- Created: 2019-10-17T20:17:20.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-09T17:34:37.000Z (about 1 year ago)
- Last Synced: 2025-04-09T18:42:56.790Z (about 1 year ago)
- Topics: hacktoberfest, store-framework, vtex-io
- Language: TypeScript
- Homepage:
- Size: 278 KB
- Stars: 1
- Watchers: 43
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: docs/README.md
- Changelog: CHANGELOG.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
📢 Use this project, [contribute](https://github.com/vtex-apps/iframe) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).
# Iframe
[](#contributors-)
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`
```json
"dependencies": {
"vtex.iframe": "0.x"
}
```
2. Add the interface `iframe` to any **custom page** (Iframes are not allowed outside custom pages).
```json
{
"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`
```json
"dependencies": {
"vtex.iframe": "0.x"
}
```
2. Add the dynamicIframe block and its properties to the blocks.json file
```json
{
"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
```json
{
"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
```json
"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](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!