{"id":39487312,"url":"https://github.com/vtex-apps/iframe","last_synced_at":"2026-01-18T05:28:21.161Z","repository":{"id":43273645,"uuid":"215878257","full_name":"vtex-apps/iframe","owner":"vtex-apps","description":"An app to use sourced iframes","archived":false,"fork":false,"pushed_at":"2025-04-09T17:34:37.000Z","size":285,"stargazers_count":1,"open_issues_count":3,"forks_count":6,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-04-09T18:42:56.790Z","etag":null,"topics":["hacktoberfest","store-framework","vtex-io"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vtex-apps.png","metadata":{"files":{"readme":"docs/README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-17T20:17:20.000Z","updated_at":"2025-03-24T11:50:47.000Z","dependencies_parsed_at":"2025-03-31T21:25:31.296Z","dependency_job_id":null,"html_url":"https://github.com/vtex-apps/iframe","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/iframe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fiframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fiframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fiframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fiframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/iframe/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fiframe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530814,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","store-framework","vtex-io"],"created_at":"2026-01-18T05:28:21.081Z","updated_at":"2026-01-18T05:28:21.150Z","avatar_url":"https://github.com/vtex-apps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"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).\n\n# Iframe\n\n\u003c!-- DOCS-IGNORE:start --\u003e\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\u003c!-- DOCS-IGNORE:end --\u003e\n\nAn app that makes it possible to render external iframes on a store.\n\n![image](https://user-images.githubusercontent.com/18701182/67055752-abcb0500-f11f-11e9-8c24-50234214d474.png)\n\n## Configuration - standard Iframe\n\n1. Add the `vtex.iframe` to the theme's dependencies on the `manifest.json`\n\n```json\n\"dependencies\": {\n \"vtex.iframe\": \"0.x\"\n}\n```\n\n2.  Add the interface `iframe` to any **custom page** (Iframes are not allowed outside custom pages).\n\n```json\n{\n  \"store.custom#about-us\": {\n    \"blocks\": [\"flex-layout.row#about-us\", \"iframe\"]\n  },\n\n  \"iframe\": {\n    \"props\": {\n      \"src\": \"\"\n    }\n  }\n}\n```\n\n| Prop name | Type   | Description                             | Default value |\n| --------- | ------ | --------------------------------------- | ------------- |\n| `src`     | String | Source address the iframe should render | `null`        |\n| `width`   | Number | Width attribute of the iframe           | `null`        |\n| `height`  | Number | Height attribute of the iframe          | `null`        |\n| `allow`   | String | allow attribute of the iframe           | `null`        |\n\n## Configuration - dynamic Iframe\n\n1. Add the `vtex.iframe` to the theme's dependencies on the `manifest.json`\n\n```json\n\"dependencies\": {\n  \"vtex.iframe\": \"0.x\"\n}\n```\n\n2. Add the dynamicIframe block and its properties to the blocks.json file\n\n```json\n{\n  \"store.custom#locationPage\": {\n    \"children\": [\"iframe.dynamic-src\"]\n  },\n  \"iframe.dynamic-src\": {\n    \"props\": {\n      \"dynamicSrc\": \"https://www.test.com/exampleStaticPathName/{dynamicParam1}/{dynamicParam2}/exampleStaticPageName\",\n      \"width\": \"1920\",\n      \"height\": \"1000\",\n      \"title\": \"exampleStaticPageName iframe wrapper for {account}\",\n      \"allow\": \"geolocation\"\n    }\n  }\n}\n```\n\n3. register your new page in routes.json with appropriate parameters passed into the page url\n\n```json\n{\n  \"store.custom#locationPage\": {\n    \"path\": \"/:param1/:param2/pagename\"\n  }\n}\n```\n\n| Prop name    | Type   | Description                                                       | Default value |\n| ------------ | ------ | ----------------------------------------------------------------- | ------------- |\n| `dynamicSrc` | String | iframe src with dynamic parameters from page URL enclosed in '{}' | `null`        |\n| `width`      | Number | Width attribute of the iframe                                     | `null`        |\n| `height`     | Number | Height attribute of the iframe                                    | `null`        |\n| `title`      | String | title attribute of the iframe                                     | `null`        |\n| `allow`      | String | allow attribute of the iframe                                     | `null`        |\n| `id`         | String | ID attribute of the iframe                                        | `null`        |\n| `className`  | String | class attribute of the iframe                                     | `null`        |\n| `onLoad`     | String | onLoad attribute of the iframe                                    | `null`        |\n| `srcAccount` | Object | Object with account name and src                                  | `null`        |\n\n### srcAccount\n\nUsing srcAccount\n\n```json\n  \"iframe#logout\": {\n    \"props\": {\n      \"src\": \"//www.mywebsiteprod.com/logout\",\n      \"srcAccount\": {\n        \"mywebsiteprod\": \"//www.mywebsite.com/logout\",\n        \"mywebsiteqa\": \"//qa.mywebsite.com/logout\"\n      },\n      \"onLoad\": \"setTimeout(() =\u003e {window.location.href='/'}, 5000)\",\n      \"className\": \"iframeLogout\",\n      \"id\": \"iframeLogout\"\n    }\n  },\n```\n\n## Customization\n\nThere is a `.container` handle that wraps the iframe, it's also possible to use `blockClass`.\n\n\u003c!-- DOCS-IGNORE:start --\u003e\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n\u003c!-- DOCS-IGNORE:end --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fiframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Fiframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fiframe/lists"}