> For the complete documentation index, see [llms.txt](https://docs.thx.network/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thx.network/developers/html-widget.md).

# HTML Widget

<figure><img src="/files/kBso3pJd5O4W07YOggGU" alt=""><figcaption><p>Example of widget configuration in Developer -> General</p></figcaption></figure>

### 1. Load Campaign Widget

You can embed the campaign widget on your website using a personal embed script or using our JS SDK.&#x20;

### 1.1. Personal embed script

Inject the campaign widget in your site using a script tag similar to this. You'll find your script in the Developer -> General section of your campaign.

```markup
<script src="https://api.thx.network/v1/widget/507f191e810c19729de860ea.js"></script>
```

### 1.2. JS SDK

```javascript
const { THXWidget } = require('@thxnetwork/sdk');

THXWidget.create({ campaignId: '507f191e810c19729de860ea' })
```

### 2. Widget Functions

Some interactions with the campaign widget are exposed to the parent window and you can invoke them as described below.

```typescript
// Will show the widget
window.THXWidget.show(true);
// Will hide the widget
window.THXWidget.show(false);

// Will navigate inside the widget to different routes
window.THXWidget.open("/quests");
window.THXWidget.open("/rewards");
window.THXWidget.open("/wallet");

window.THXWidget.signin() // Sign in (Popup on large screens, redirect on small screens)
window.THXWidget.signout() // Sign out:)

// Will show the widget and open the virtual wallet connect view
window.THXWidget.connect("a6021617-9aab-4194-b2af-a4dd0cc96f84");
// Will store the Identity and connect to an account after a sign in
window.THXWidget.setIdentity("a6021617-9aab-4194-b2af-a4dd0cc96f84");

// public var updated by widget app
// null (signed out), false (signing in), true (signed in)
window.THXWidget.isAuthenticated
```