https://github.com/jenyayel/help-widget
A reference for creating embeddable web UI widget
https://github.com/jenyayel/help-widget
Last synced: 3 months ago
JSON representation
A reference for creating embeddable web UI widget
- Host: GitHub
- URL: https://github.com/jenyayel/help-widget
- Owner: jenyayel
- License: mit
- Created: 2020-04-27T20:08:44.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T14:53:04.000Z (almost 2 years ago)
- Last Synced: 2024-08-13T07:17:09.842Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.43 MB
- Stars: 175
- Watchers: 3
- Forks: 59
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- jimsghstars - jenyayel/help-widget - A reference for creating embeddable web UI widget (TypeScript)
README
# Help Web Widget
This is a reference project that demonstrate how to build web UI widget that can be embedded into 3rd party website. See walkthrough for details [here](https://blog.jenyay.com/web-ui-widget/).
This structure provides those advantages:
* Small footprint and solid snippet on hosting website (see [usage](#usage))
* Multi-instance on the same page
* Isolation of code execution and CSS
* Customization via configuration injection and API to Widget
* Minimal dependencies and small size via single request (>30KB gzipped)
and a few more.
## Usage
In order to embed the widget add the following snippet at any location on the hosting page:
```html
(function (w, d, s, o, f, js, fjs) {
w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', '_hw', './widget.js'));
_hw('init');
```
During initialization you can pass additional configurations to widget like so:
```diff
-_hw('init');
+_hw('init', { minimized: true });
```
You can find a full list of configurations in `AppConfigurations` interface.
## Develop
The widget dev setup is similar to regular client application. To get started:
```bash
npm i
npm start
```
This will open browser with "demo" page which hosts the widget.
## License
The source and documentation in this project are released under the [MIT License](LICENSE)