Ulule Streaming Widgets (for StreamElements)

Ulule provides widgets to display various page stats.

The following will list basic installation instructions, assuming you're already familiar with StreamElements and OBS (or a similar tool).

---

📖 ℹ️ If you need a detailed how-to, a preview or a list of supported events and interactions, please refer to the public documentation (only in French 🇫🇷 for now, sorry).

---

Alert widget

Steps:

• Create a new Overlay in your StreamElements dashboard, and make it host a Custom Widget
• Copy and paste the provided code into the HTML tab of the new widget:

  StreamElementsWidgets/src/alert/index.html

  Lines 1 to 11 in 907dcc4

  	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />
  	<link href="https://cdn.jsdelivr.net/gh/ulule/StreamElementsWidgets/src/alert/index.css" rel="stylesheet" />
  	<script
  	async
  	src="https://cdn.socket.io/4.7.5/socket.io.min.js"
  	integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO"
  	crossorigin="anonymous"
  	></script>
  	<script src="https://cdn.jsdelivr.net/gh/ulule/StreamElementsWidgets/src/alert/index.js" defer></script>
  	<div id="ulule-widget-container"></div>

• Save the newly created overlay
• Share your StreamElements Account ID and JWT Token with your coach at Ulule to finish activating the widget

Advanced configuration:

Feel free to implement custom CSS code within the StreamElements CSS tab to make the widget suit your liking!

Advanced testing with a custom event:

If you're already familiar with StreamElements Custom Widget development, you can send your own test events should you want to make sure the widget meets your needs.

This is an exemple of the POST payload expected by the widget:

{
    "event": "sub",
    "data": {
        "currency": "€",
        "months": 1,
        "tip": "20", // Optional
        "subName": "Tier 1",
        "userName": "Jane Doe",
        "years": 3,
    }
}

There are two different and possible payload types, dependending on the event value provided: contribution or sub.

Details

contribution-type event:

Field (path)	Type	Required	Description	Example
event	"contribution"	Yes	Event type. Use contribution for reward-based fundraisers.	"contribution"
data	object	Yes	Object containing order-specific details.	{ ... }
data.currency	string	Yes	Currency symbol (e.g., €, $…).	"€"
data.rewardName	string	Yes	Reward title.	"Ultra Deluxe Edition"
data.userName	string	No (optional)	Backer's display name. If none, show as anonymous.	"Jane Doe"
data.tip	number or string	No (optional)	Optional tip amount added to the order, expressed in the provided data.currency.	"5"

sub-type event:

Field (path)	Type	Required	Description	Example
event	"sub"	Yes	Event type. Use sub for memberships.	"sub"
data	object	Yes	Object containing order-specific details.	{ ... }
data.currency	string	Yes	Currency symbol (e.g., €, $…).	"€"
data.isRecurringDonation	boolean	Yes	Whether is it a recurring donation or a straight subscription.	true
data.months	integer	Yes	Subscription tenure in months, which is total months % 12 to account for full years (can be 0).	1
data.recurringDonationAmount	number	No (optional)	Optional recurring donation amount, expressed in the provided data.currency.	20
data.subName	string	Yes	Subscription title.	"Tier 1"
data.tip	number	No (optional)	Optional tip amount added to the order, expressed in the provided data.currency.	20
data.userName	string	Yes	Subscriber's display name.	"John Doe"
data.years	integer	Yes	Subscription tenure in years (can be 0).	3

Bear in mind that the payload needs to be send to:

https://api.streamelements.com/kappa/v2/channels/[account-id]/socket

… while properly replacing [account-id] and providing the StreamElements JWT Token.

Progress widget

Steps:

• Create a new Overlay in your StreamElements dashboard, and make it host a Custom Widget.
• Copy and paste the provided code into the new widget:
  • HTML tab

    StreamElementsWidgets/src/progress/index.html

    Lines 1 to 8 in 48aff9e

    	<link href="https://cdn.jsdelivr.net/gh/ulule/StreamElementsWidgets@main/src/progress/index.css" rel="stylesheet" />
    	<script src='https://cdn.jsdelivr.net/gh/ulule/StreamElementsWidgets@main/src/progress/index.js' defer></script>
    	<div class="amount"></div>
    	<div class="progress-bar">
    	<span class="progress-bar__content"></span>
    	</div>
    	<div class="stretch-goal"></div>

  • Fields tab

    StreamElementsWidgets/src/progress/fields.json

    Lines 1 to 79 in 48aff9e

    	{
    	"projectNumericalId": {
    	"label": "Identifiant numérique du projet",
    	"type": "number"
    	},
    	"refreshInterval": {
    	"label": "Intervalle de rechargement (secondes)",
    	"min": 5,
    	"step": 1,
    	"type": "number",
    	"value": 30
    	},
    	"currency": {
    	"label": "Devise",
    	"type": "text",
    	"value": "€"
    	},
    	"presaleSuffix": {
    	"label": "Suffixe des préventes",
    	"type": "text",
    	"value": "préventes"
    	},
    	"fontColor": {
    	"label": "Couleur du texte (collecté)",
    	"type": "colorpicker",
    	"value": "#ffffff"
    	},
    	"fontFamily": {
    	"label": "Police",
    	"type": "text",
    	"value": "Oxanium"
    	},
    	"fontSize": {
    	"label": "Taille du texte (collecté)",
    	"step": 1,
    	"type": "number",
    	"value": 16
    	},
    	"targetPercentage": {
    	"label": "Pourcentage cible",
    	"min": 100,
    	"step": 1,
    	"type": "number",
    	"value": 100
    	},
    	"progressBackgroundColor": {
    	"label": "Couleur de fond de la progression",
    	"type": "colorpicker",
    	"value": "transparent"
    	},
    	"progressBarColor": {
    	"label": "Couleur de la barre de progression",
    	"type": "colorpicker",
    	"value": "#02715c"
    	},
    	"progressBorderColor": {
    	"label": "Couleur de bordure de la progression",
    	"type": "colorpicker",
    	"value": "#02715c"
    	},
    	"progressBorderRadius": {
    	"label": "Courbure de la bordure de progression",
    	"min": 0,
    	"step": 1,
    	"type": "number",
    	"value": 4
    	},
    	"progressBarFontColor": {
    	"label": "Couleur du texte de progression",
    	"type": "colorpicker",
    	"value": "#ffffff"
    	},
    	"progressBarFontSize": {
    	"label": "Taille du texte de progression",
    	"step": 1,
    	"type": "number",
    	"value": 14
    	}
    	}

• Save and reload
• Open up your Ulule project backoffice and grab your numerical project ID from the URL
• Go back to the StreamElements freshly created widget, set the project ID on the left sidebar
• Set the other sidebar parameters to your liking and enjoy!

Advanced configuration:

Feel free to implement custom CSS code within the StreamElements CSS tab to make the widget suit your liking. And if needed, you can also edit the fields to your liking through the dedicated tab!