Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/capitec/omni-widget
Framework agnostic, zero dependency web utilities to enable embedding externally hosted web content.
https://github.com/capitec/omni-widget
vanilla-js web web-component widget
Last synced: 3 months ago
JSON representation
Framework agnostic, zero dependency web utilities to enable embedding externally hosted web content.
- Host: GitHub
- URL: https://github.com/capitec/omni-widget
- Owner: capitec
- License: mit
- Created: 2023-05-09T12:45:06.000Z (over 1 year ago)
- Default Branch: develop
- Last Pushed: 2024-07-15T14:00:37.000Z (5 months ago)
- Last Synced: 2024-09-26T21:22:27.339Z (3 months ago)
- Topics: vanilla-js, web, web-component, widget
- Language: TypeScript
- Homepage: https://capitec.github.io/open-source/docs/omni-widget/
- Size: 433 KB
- Stars: 0
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
Omni Widget
@capitec/omni-widget
Framework agnostic, zero dependency web utilities to enable embedding externally hosted web content.
[Introduction]
[Usage]
[Contributors]
[License]
---
## Introduction
- The `` is a web component that makes hosting external web content easier, with bi-directional communication capabilities.
- The `Widget` class exposes static functions to make it easier for hosted external web content to interact with its `omni-widget` host.
## Usage
1️⃣ Install the library in your project.
```bash
npm install @capitec/omni-widget
```
### For hosted widgets
2️⃣ Import the `Widget` class from the package and use relevant static functions for initialisation, event handling and messaging.
```js
import { Widget } from '@capitec/omni-widget';
if (!Widget.isHosted) {
console.log('Not hosted as a widget!');
} else {
Widget.initialise(async function (identifier) {
console.log(`Widget loaded with identifier: '${identifier}'`);
const response = await Widget.messageApplicationAsync(Widget.currentIdentifier, 'some-event-from-the-widget', {
message: 'This is event detail.'
});
});
Widget.addEventListener('some-event-for-the-widget', async function (e) {
console.log(`Widget message: '${JSON.stringify(e.content)}'`);
e.callback('This is a response');
});
}
```
### For hosting widgets
2️⃣ Import the package
```js
// JS import
import '@capitec/omni-widget';
// or HTML import
;
```
3️⃣ Use the web component to host the widget.
```html
```
4️⃣ Use instance functions on the component to send messages to the widget.
```js
const widgetResponse = await document
.querySelector('omni-widget')
.messageWidgetAsync('some-event-for-the-widget', { message: 'This is event detail.' });
```
5️⃣ Use event listeners to receive messages from the widget.
```js
document.querySelector('omni-widget').addEventListener('some-event-from-the-widget', function (e) {
const widgetEventInfo = e.detail;
console.log('Widget event data: ' + JSON.stringify(widgetEventInfo.content));
widgetEventInfo.callback('This is a response.');
});
```
### 🚩 Example Usage Project
An example project is available in the [example directory](https://github.com/capitec/omni-widget/tree/develop/example).
## Contributors
Made possible by these fantastic people. 💖
See the [`CONTRIBUTING.md`](./CONTRIBUTING.md) guide to get involved.
## License
Licensed under [MIT](LICENSE)
We are hiring 🤝 Join us! 🇿🇦
https://www.capitecbank.co.za/about-us/careers
