{"id":15022314,"url":"https://github.com/capitec/omni-widget","last_synced_at":"2026-01-04T16:34:32.138Z","repository":{"id":164352244,"uuid":"638472056","full_name":"capitec/omni-widget","owner":"capitec","description":"Framework agnostic, zero dependency web utilities to enable embedding externally hosted web content.","archived":false,"fork":false,"pushed_at":"2024-07-15T14:00:37.000Z","size":443,"stargazers_count":0,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-01-30T18:52:04.831Z","etag":null,"topics":["vanilla-js","web","web-component","widget"],"latest_commit_sha":null,"homepage":"https://capitec.github.io/open-source/docs/omni-widget/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/capitec.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-09T12:45:06.000Z","updated_at":"2023-05-23T08:03:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"15e4526e-2421-4b79-82e5-64f3e0ce9f10","html_url":"https://github.com/capitec/omni-widget","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capitec%2Fomni-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capitec%2Fomni-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capitec%2Fomni-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capitec%2Fomni-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/capitec","download_url":"https://codeload.github.com/capitec/omni-widget/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237843692,"owners_count":19375186,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["vanilla-js","web","web-component","widget"],"created_at":"2024-09-24T19:57:46.881Z","updated_at":"2025-10-23T14:31:10.420Z","avatar_url":"https://github.com/capitec.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"./docs/logos/omni.png\" width=\"128\" height=\"128\"/\u003e\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eOmni Widget\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\u003cstrong\u003e\u003ccode\u003e@capitec/omni-widget\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003eFramework agnostic, zero dependency web utilities to enable embedding externally hosted web content.\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://npmcharts.com/compare/@capitec/omni-widget?minimal=true\"\u003e\u003cimg alt=\"Downloads per week\" src=\"https://img.shields.io/npm/dw/@capitec/omni-widget.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/@capitec/omni-widget\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@capitec/omni-widget.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://github.com/capitec/omni-widget/actions/workflows/build.yml\"\u003e\u003cimg alt=\"GitHub Build\" src=\"https://github.com/capitec/omni-widget/actions/workflows/build.yml/badge.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://github.com/capitec/omni-widget/blob/develop/LICENSE\"\u003e\u003cimg alt=\"MIT License\" src=\"https://img.shields.io/github/license/capitec/omni-widget\" height=\"20\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://capitec.github.io/open-source/docs/omni-widget\"\u003e\u003cimg alt=\"Docs\" src=\"https://img.shields.io/static/v1?label=docs\u0026message=capitec.github.io/open-source\u0026color=blue\u0026style=flat-square\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n\t[\u003ca href=\"#introduction\"\u003eIntroduction\u003c/a\u003e]\n\t[\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e]\n\t[\u003ca href=\"#contributors\"\u003eContributors\u003c/a\u003e]\n\t[\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e]\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr /\u003e\n\n## Introduction\n\n-   The `\u003comni-widget\u003e` is a web component that makes hosting external web content easier, with bi-directional communication capabilities.\n-   The `Widget` class exposes static functions to make it easier for hosted external web content to interact with its `omni-widget` host.\n\n\u003cbr /\u003e\n\n## Usage\n\n1️⃣ \u0026nbsp; Install the library in your project.\n\n```bash\nnpm install @capitec/omni-widget\n```\n\n### For hosted widgets\n\n2️⃣ \u0026nbsp; Import the `Widget` class from the package and use relevant static functions for initialisation, event handling and messaging.\n\n```js\nimport { Widget } from '@capitec/omni-widget';\n\nif (!Widget.isHosted) {\n    console.log('Not hosted as a widget!');\n} else {\n    Widget.initialise(async function (identifier) {\n        console.log(`Widget loaded with identifier: '${identifier}'`);\n        const response = await Widget.messageApplicationAsync(Widget.currentIdentifier, 'some-event-from-the-widget', {\n            message: 'This is event detail.'\n        });\n    });\n    Widget.addEventListener('some-event-for-the-widget', async function (e) {\n        console.log(`Widget message: '${JSON.stringify(e.content)}'`);\n        e.callback('This is a response');\n    });\n}\n```\n\n### For hosting widgets\n\n2️⃣ \u0026nbsp; Import the package\n\n```js\n// JS import\nimport '@capitec/omni-widget';\n\n// or HTML import\n\u003cscript type=\"module\" src=\"/node_modules/omni-widget/dist/index.js\"\u003e\u003c/script\u003e;\n```\n\n3️⃣ \u0026nbsp; Use the web component to host the widget.\n\n```html\n\u003comni-widget src=\"https://some-widget-url.html\"\u003e\u003c/omni-widget\u003e\n```\n\n4️⃣ \u0026nbsp; Use instance functions on the component to send messages to the widget.\n\n```js\nconst widgetResponse = await document\n    .querySelector('omni-widget')\n    .messageWidgetAsync('some-event-for-the-widget', { message: 'This is event detail.' });\n```\n\n5️⃣ \u0026nbsp; Use event listeners to receive messages from the widget.\n\n```js\ndocument.querySelector('omni-widget').addEventListener('some-event-from-the-widget', function (e) {\n    const widgetEventInfo = e.detail;\n    console.log('Widget event data: ' + JSON.stringify(widgetEventInfo.content));\n    widgetEventInfo.callback('This is a response.');\n});\n```\n\n\u003cbr\u003e\n\n### 🚩 Example Usage Project\n\nAn example project is available in the [example directory](https://github.com/capitec/omni-widget/tree/develop/example).\n\n\u003cbr\u003e\n\n## Contributors\n\nMade possible by these fantastic people. 💖\n\nSee the [`CONTRIBUTING.md`](./CONTRIBUTING.md) guide to get involved.\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\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/BOTLANNER\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16349308?v=4?s=100\" width=\"100px;\" alt=\"BOTLANNER\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBOTLANNER\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/capitec/omni-widget/commits?author=BOTLANNER\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#tool-BOTLANNER\" title=\"Tools\"\u003e🔧\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n\u003cbr\u003e\n\n## License\n\nLicensed under [MIT](LICENSE)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003chr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n    \u003cpicture\u003e\n        \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./docs/logos/capitec-logo-white.svg\"\u003e\n        \u003cimg alt=\"Capitec Logo\" src=\"./docs/logos/capitec-logo-color.svg\" height=\"28\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003eWe are hiring 🤝 Join us! 🇿🇦\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.capitecbank.co.za/about-us/careers\"\u003ehttps://www.capitecbank.co.za/about-us/careers\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapitec%2Fomni-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcapitec%2Fomni-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapitec%2Fomni-widget/lists"}