Ability to directly embed public pages using `<iframe />`.

**Requirements**:

- Hide page header
- Hide page sidebar
- Pass down the preferred theme

Ability to directly embed public pages using <code>&#x3C;iframe /></code>.
Requirements:
<ul>
<li>Hide page header</li>
<li>Hide page sidebar</li>
<li>Pass down the preferred theme</li>
</ul>

Ability to directly embed public pages using &lt;iframe />.

Requirements:

Hide page header

Hide page sidebar

Pass down the preferred theme

JavaScript

JavaScript SDK

IFrame Embed

Feature

Integration

Improvements

Editor

Announcement

Preview

Homepage

Docs

Status

Onset

Application

Pages

Roadmap

Widget

NPM @onsetio/widget v0.2.1

Github

Added new <code>loaded</code> event. Includes <code>releases</code> and <code>roadmap</code> items.

Added

BREAKING CHANGE - the <code>ready</code> event doesn’t include release data. Use the new <code>loaded</code> event instead.

Changed

The <code>new_release</code> event now triggered for custom triggers as well.

Fixed the scroll position on project and view select.

Fixed

Widget v2.1.0

We’ve added two new handy methods to our JavaScript Widget.

-   `onsetWidget.update()` - updates widget options. Useful when updating the widget’s theme to match the embedded site’s look.
-   `onsetWidget.reload()` - reloads the widget with the new data source and options.


We’ve added two new handy methods to our JavaScript Widget.
<ul>
<li><code>onsetWidget.update()</code> - updates widget options. Useful when updating the widget’s theme to match the embedded site’s look.</li>
<li><code>onsetWidget.reload()</code> - reloads the widget with the new data source and options.</li>
</ul>

We’ve added two new handy methods to our JavaScript Widget.

onsetWidget.update() - updates widget options. Useful when updating the widget’s theme to match the embedded site’s look.

onsetWidget.reload() - reloads the widget with the new data source and options.

New Widget Methods

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" ref="noopener noreferrer nofollow">NPM</a></li>
<li><a href="https://yarnpkg.com/package/@onsetio/browser" target="_blank" ref="noopener noreferrer nofollow">Yarn</a></li>
<li><a href="https://github.com/onsetio/onset-js/tree/main/packages/browser" target="_blank" ref="noopener noreferrer nofollow">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" ref="noopener noreferrer nofollow">NPM</a></li>
<li><a href="https://yarnpkg.com/package/@onsetio/node" target="_blank" ref="noopener noreferrer nofollow">Yarn</a></li>
<li><a href="https://github.com/onsetio/onset-js/tree/main/packages/node" target="_blank" ref="noopener noreferrer nofollow">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" ref="noopener noreferrer nofollow">NPM</a></li>
<li><a href="https://yarnpkg.com/package/@onsetio/widget" target="_blank" ref="noopener noreferrer nofollow">Yarn</a></li>
<li><a href="https://github.com/onsetio/onset-js/tree/main/packages/widget" target="_blank" ref="noopener noreferrer nofollow">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 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 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" ref="noopener noreferrer nofollow">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" ref="noopener noreferrer nofollow">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" ref="noopener noreferrer nofollow">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.