How to Load the Omniston Widget with @ston-fi/omniston-widget-loader
Use the npm loader to fetch the current Omniston Widget bundle at runtime, connect TON Connect, and mount a complete swap interface inside your application. If you are building a modern JavaScript application, @ston-fi/omniston-widget-loader gives you programmatic control over when the Omniston Widget enters the page. You install a small npm package, call its load() method, receive the…
To load the Omniston Widget using the @ston-fi/omniston-widget-loader npm package, follow these steps. This loader package gives your application programmatic control over when the Omniston Widget enters the page without requiring a global script tag.
First, install the package using your preferred package manager:
```bash
npm install @ston-fi/omniston-widget-loader
```
or
```bash
yarn add @ston-fi/omniston-widget-loader
```
or
```bash
pnpm add @ston-fi/omniston-widget-loader
```
Next, add a container element to your page where the widget will be mounted:
```html
<div id="omniston-widget-container"></div>
```
Then, import the loader and load the widget:
```javascript
import OmnistonWidgetLoader from '@ston-fi/omniston-widget-loader';
const OmnistonWidget = await OmnistonWidgetLoader.load();
```
Create an instance of the widget with your desired configuration:
```javascript
const widget = new OmnistonWidget({
tonconnect: {
type: 'standalone',
options: {
manifestUrl: 'https://your-app.com/tonconnect-manifest.json',
},
},
});
```
Finally, mount the widget into your container:
```javascript
const container = document.querySelector('#omniston-widget-container');
if (container) {
widget.mount(container);
}
```
The loader package only fetches the widget bundle at runtime, while the actual widget is distributed through STON.fi's CDN. This distribution model allows STON.fi to deliver compatible updates within a major version without requiring integrators to reinstall the full widget package.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
