HTML Widget

Your campaign widget exposes various functionality to your site in order to create seamless onboarding experiences.

Example of widget configuration in Developer -> General

1. Load Campaign Widget

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

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.

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

1.2. JS SDK

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.

// 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