JavaScript

Feature

Preview

Integration

Improvements

Announcement

Editor

Homepage

Docs

Status

Onset

Application

JavaScript SDK

Pages

Roadmap

Widget

Developers rejoice. Onset JavaScript SDK is officially here! We have made three different packages available for your disposal. All packages are available via NPM and YARN and include type definitions.

## `@onsetio/browser`

Primarily used in the browser for loading public releases.

-   [NPM](https://www.npmjs.com/package/@onsetio/browser)
-   [Yarn](https://yarnpkg.com/package/@onsetio/browser)
-   [Github](https://github.com/onsetio/onset-js/tree/main/packages/browser)

## `@onsetio/node`

Onset API JavaScript interface.

-   [NPM](https://www.npmjs.com/package/@onsetio/node)
-   [Yarn](https://yarnpkg.com/package/@onsetio/node)
-   [Github](https://github.com/onsetio/onset-js/tree/main/packages/node)

## `@onsetio/widget`

We recommend that you should always be loaded the Widget.js script directly from `https://widget.onset.io/widget.js`, rather than including it in a bundle or host yourself. If must bundle the Widget code into your application, you can use this package.

-   [NPM](https://www.npmjs.com/package/@onsetio/widget)
-   [Yarn](https://yarnpkg.com/package/@onsetio/widget)
-   [Github](https://github.com/onsetio/onset-js/tree/main/packages/widget)


Developers rejoice. Onset JavaScript SDK is officially here! We have made three different packages available for your disposal. All packages are available via NPM and YARN and include type definitions.
<h2><code>@onsetio/browser</code></h2>
Primarily used in the browser for loading public releases.
<ul>
<li><a href="https://www.npmjs.com/package/@onsetio/browser" target="_blank">NPM</a></li>
<li><a href="https://yarnpkg.com/package/@onsetio/browser" target="_blank">Yarn</a></li>
<li><a href="https://github.com/onsetio/onset-js/tree/main/packages/browser" target="_blank">Github</a></li>
</ul>
<h2><code>@onsetio/node</code></h2>
Onset API JavaScript interface.
<ul>
<li><a href="https://www.npmjs.com/package/@onsetio/node" target="_blank">NPM</a></li>
<li><a href="https://yarnpkg.com/package/@onsetio/node" target="_blank">Yarn</a></li>
<li><a href="https://github.com/onsetio/onset-js/tree/main/packages/node" target="_blank">Github</a></li>
</ul>
<h2><code>@onsetio/widget</code></h2>
We recommend that you should always be loaded the Widget.js script directly from <code>https://widget.onset.io/widget.js</code>, rather than including it in a bundle or host yourself. If must bundle the Widget code into your application, you can use this package.
<ul>
<li><a href="https://www.npmjs.com/package/@onsetio/widget" target="_blank">NPM</a></li>
<li><a href="https://yarnpkg.com/package/@onsetio/widget" target="_blank">Yarn</a></li>
<li><a href="https://github.com/onsetio/onset-js/tree/main/packages/widget" target="_blank">Github</a></li>
</ul>

Developers rejoice. Onset JavaScript SDK is officially here! We have made three different packages available for your disposal. All packages are available via NPM and YARN and include type definitions.

@onsetio/browser

Primarily used in the browser for loading public releases.

NPM

Yarn

Github

@onsetio/node

Onset API JavaScript interface.

NPM

Yarn

Github

@onsetio/widget

We recommend that you should always be loaded the Widget.js script directly from https&#x3A;//widget.onset.io/widget.js, rather than including it in a bundle or host yourself. If must bundle the Widget code into your application, you can use this package.

NPM

Yarn

Github


Official JavaScript SDK

Added a trigger badge that shows the count of unread releases.

Added

Added new <code>hideBadge</code> attribute to hide the new trigger badge count.

Added new <code>direction</code> and <code>triggerDirection</code> attributes to specify the direction in which the widget should appear.
<ul>
<li><code>direction</code> - accepted values: <code>left</code>, <code>right</code>, <code>center</code>.</li>
<li><code>triggerDirection</code> - accepted values: <code>left</code>, <code>right</code>.</li>
</ul>

Added new <code>width</code> attribute to specify the width of the widget. Useful for when using the <code>center</code> direction and simulating a modal window.

Ability to click on the release links.

Added new <code>ready</code> event. Triggered when the widget is loaded and ready to go.

Added new `<code>new_release`</code> event. Triggered when new release is available.

Added new `<code>read`</code> event. Triggered when new release is read.

Fixed

Fixed the release change list font size.

![](https://cdn.onset.io/organization/71beb7f0-20f9-11e8-91a3-3d93a78d135f/uploads/1654997915243-notification.png)

We got a ton of new features for you! A few notable ones are:

-   **Unread release badges** - notify your users of new releases by showing the count in the trigger badge. We check for new releases every five(5) minutes.
-   **Widget directions **- adjust the direction widget window appears. You can emulate a modal window.
-   **Events **- subscribe to widget events. Read more about them in our [doc](https://docs.onset.io/widget/events).


<img src="https://cdn.onset.io/organization/71beb7f0-20f9-11e8-91a3-3d93a78d135f/uploads/1654997915243-notification.png" class="img-fluid">
We got a ton of new features for you! A few notable ones are:
<ul>
<li>Unread release badges - notify your users of new releases by showing the count in the trigger badge. We check for new releases every five(5) minutes.</li>
<li>Widget directions - adjust the direction widget window appears. You can emulate a modal window.</li>
<li>Events - subscribe to widget events. Read more about them in our <a href="https://docs.onset.io/widget/events" target="_blank">doc</a>.</li>
</ul>



We got a ton of new features for you! A few notable ones are:

Unread release badges - notify your users of new releases by showing the count in the trigger badge. We check for new releases every five(5) minutes.

Widget directions - adjust the direction widget window appears. You can emulate a modal window.

Events - subscribe to widget events. Read more about them in our doc.


Widget v2.0.0

We’ve gone dark y’all! We are following up on our [previous](https://releases.onset.io/pages/introducing-dark-mode) release and rolling out dark mode for our widget. Unlike the page, dark mode is enabled programmatically, with no toggles.

While embedding the widget, now you have an optional `theme` attribute that you can pass. It accepts one of three values:

1.  `light` - light theme
2.  `dark` - dark theme
3.  `auto` - auto-detect based on the user’s computer system settings

We are defaulting to our usual `light` theme to avoid shocking your eyes with the new theme. In the future, this property default value be changed to `auto`.

```dts
onsetWidgetSettings = {
  page: 'releases.onset.io',
  triggerText: "🔔 What's New",
  theme: 'dark',
};
```

Check out our widget [documentation](https://docs.onset.io/widget) for more configuration options.


We’ve gone dark y’all! We are following up on our <a href="https://releases.onset.io/pages/introducing-dark-mode" target="_blank">previous</a> release and rolling out dark mode for our widget. Unlike the page, dark mode is enabled programmatically, with no toggles.
While embedding the widget, now you have an optional <code>theme</code> attribute that you can pass. It accepts one of three values:
<ol>
<li><code>light</code> - light theme</li>
<li><code>dark</code> - dark theme</li>
<li><code>auto</code> - auto-detect based on the user’s computer system settings</li>
</ol>
We are defaulting to our usual <code>light</code> theme to avoid shocking your eyes with the new theme. In the future, this property default value be changed to <code>auto</code>.
<pre><code class="hljs language-dts">onsetWidgetSettings = {
 page: 'releases.onset.io',
 triggerText: "🔔 What's New",
 theme: 'dark',
};</code></pre>
Check out our widget <a href="https://docs.onset.io/widget" target="_blank">documentation</a> for more configuration options.

We’ve gone dark y’all! We are following up on our previous release and rolling out dark mode for our widget. Unlike the page, dark mode is enabled programmatically, with no toggles.

While embedding the widget, now you have an optional theme attribute that you can pass. It accepts one of three values:

light - light theme

dark - dark theme

auto - auto-detect based on the user’s computer system settings

We are defaulting to our usual light theme to avoid shocking your eyes with the new theme. In the future, this property default value be changed to auto.



Check out our widget documentation for more configuration options.
