# 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
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thx.network/developers/html-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.