# Embed a widget

<div align="left"><figure><img src="https://3120590109-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHukEzyKtop3oVU5Uj2y%2Fuploads%2FKkyOQoS5k5rSMbygAd65%2Fimage.png?alt=media&#x26;token=b1872f7a-9b6f-4734-986f-08b541cf3254" alt="" width="392"><figcaption></figcaption></figure></div>

Widget is a Node.JS library that allows you to bundle the current health status in either a compact or a detailed format.

<div align="left" data-full-width="false"><figure><img src="https://3120590109-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHukEzyKtop3oVU5Uj2y%2Fuploads%2Fc3uylqDXWJVUUd6Xp78P%2Fimage.png?alt=media&#x26;token=7d280a16-0d3f-4b06-8a8b-05559c65a1d6" alt="" width="347"><figcaption></figcaption></figure></div>

It is useful to provide information about health status of your endpoints to the users that may expect certain UI update to happen and may accidentally execute the same non-idempotent on-chain action, causing double-spending or any other negative side effects.

<figure><img src="https://3120590109-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHukEzyKtop3oVU5Uj2y%2Fuploads%2FzR9ERe5mahQwQI7WoojG%2Fimage.png?alt=media&#x26;token=1a8cc052-ad06-46f5-b645-b43d6a79e2f2" alt=""><figcaption></figcaption></figure>

Alternatively, these widgets may be used in the internal monitoring dashboards to notify your internal team about service disruptances. Widget is based on the [Chain.Love's Monitoring API](https://chain-love.gitbook.io/chain.loves-performance/monitoring/api).

Up to date installation instructions are always available at the [NPM Package Registry](https://www.npmjs.com/package/@chainlove/sla-widget?activeTab=readme).

{% tabs %}
{% tab title="Quickstart Example" %}

```javascript
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@chainlove/sla-widget/dist/vanilla.mjs"
></script>

<sla-widget service-ids="0x123...,0x456..." details="full"></sla-widget>
```

{% endtab %}

{% tab title="React / Next.JS" %}

```javascript
import { SLAWidget } from '@chainlove/sla-widget/react';

<SLAWidget
  serviceIds={['0x123...', '0x456...']}
  details="full"
  theme="auto"
  position="banner"
/>;
```

{% endtab %}

{% tab title="Core JS API" %}

```javascript
<div id="sla-container"></div>

<script type="module">
  import { SLAWidget } from 'https://cdn.jsdelivr.net/npm/@chainlove/sla-widget/dist/core.mjs';

  const app = new SLAWidget({
    serviceIds: ['0x123...', '0x456...'],
    details: 'full',
    theme: 'auto',
    position: 'banner',
  });

  app.render(document.getElementById('sla-container'));
</script>
```

{% endtab %}
{% endtabs %}