dev-chat

[uneven oxide]

If you need to fill out a support ticket, please use the command !ticket in chat, following the subject of your issue! For example, please type "!ticket My chatbot isn't working", and then follow the prompts from our bot!

[dapper birch]

thx bru

ty for helping me and -> translating my autistic ass syntax lmao

^_^

[severe shell]

No worries, I understand your side, sorry for being harsh at the beginning. 🙂

[dapper birch]

is okay no worries - im sure a lot of ppl come thru -> asking for help in unintelligable manners often -> so is understandable

• • i just deadass type in like

python syntax

• • i gave up on english language after i got a traumatic brain injury

i just speak fckign conda / C# / and binary too i guess now LMAO 10101001

-> deadass is a much more utilitarian way 2 communicate

-> just fkcing coding the damn dms at this point

OMG @severe shell YOOOO -> i clicked ur twitch, ur bio and stuff is in portugese - are u brazilian 😮

[severe shell]

I am!

[dapper birch]

lmao do u know Wesley Gonzaga

not personally obvi but like -> do u know who he is LMSLKDJLKSAD

[severe shell]

Yeah, not in person, but I know he exists! 😄

[dapper birch]

bro brazilian funk like - edm discoteca music is deadass so fucking funny - wesley gonzaga remix of rihanna umbrella - when i heard that the first time shit like -> i was deadass in tears

like it kinda goes hard as hell after u listen to it like 7 times - but like, its kinda brutal -> the Horns / brass intruments he uses -> deadass sound like clown horns like 🤡 and then my brazilian homie was showing me tiktoks of like

every1 in the club like - doing a line dance to wesley gonzaga's remixes like

im a wesley gonzaga like superfan ong hes fucking hilarious

[severe shell]

😄 😄 😄

[dapper birch]

omg i see u doing a fundrasier PARA LOS ANIMAIS -> omg -> how long does it go on ?

once twitch payout happens omg i MUST DONATE TO THE BRAZILIAN ANIMALS

*por los animales

por vs para always fucked my brain up

idk portuguese but im pretty fluent in Spanglish so i can understand decently

[severe shell]

Hmm, I actually didn't start it, to be honest. I did R$2 just as a test, but as I haven't streamed for some time, I added that just to keep doing by myself each month

As a reminder

[severe shell]

Yeah, it's the same in English with to and for for us 😄 We never know when to use it correctly. Or in, on and at

[dapper birch]

oo amazing! -> haha i dropped u a follow, i usualy stream everyday around 8am eastern usa time - just to like, get starting on some 3d modeling / animation / game dev

-> i stream in the software and game dev catefory now but i deadass used to be a fcking Leauge of legends vtuber ong

[dapper birch]

omg that makes me feel so much better -> bc in high school my AP spanish teacher would be on my fcking ass 24/7 cause id always fail the Imperfecta shit and the por/para -> and i like -> bro i didnt get an autism diagnosis UNTIL THIS YEAR DEADASS -> i just turned 25 like

yeee i took spanish up 2 like university level and then my like first boyfriend in college was from puertorico and we stil lchill

-> so i still have access to his like Master Playlist of REggeaton that he updates on the regular

-> ya if i manage 2 catch a stream imma learn some more portugese mwahahhaah

[severe shell]

Learning those little details are very hard, especially when they don't have specific rules and we need to learn by "experience".
Sometimes we just know because we know and feels more natural, not because someone explained how to use.

[dapper birch]

ya so tru - i think i am fluent enough in spanish that like, if i just learn a few basic phrases / words in portugese - and then -... just u kno talk w/ my feelings and be like - demonstrative in my speech

im goated

omw 2 brazil

[severe shell]

Let's go!

[dapper birch]

dime

ahora es fcking tiempo -> BASILAR -> ong -> its siesta time -> imma go chill a bit and eat lunch -> then more Blender 3d modeling -> was so nice 2 meet u ^_^ + ty for the help + and ur understanding + about my fuckign HAHAHA my fucking way of typing

oki omw 2 the Discoteca i must Basilar y Fumar -> fumando-ing time

[severe shell]

Go have a rest! Thank you also for understanding my side! See ya!

[dapper birch]

jk im jsut gonna go walk my dogs and like have a lunch break, i just love latin american music so much like shiiii -> ive always wanted 2 go to SudoAmerica -> mainly URUGUAY

[dapper birch]

np ^_^ seeya around

[fading lagoon]

Hi! I need to make some sort of a script/tool that triggers the addpoints command every 10 minutes for my channel. It looks like the loyalty tool does not work, so I need an alternative while we work with SE support 🙌 Could someone help me?

[potent halo]

Sounds like a temporary fix for smth?
Python + requests module.
Send a PUT https://api.streamelements.com/kappa/v2/points/{channel}/alltime/{reveiving username}/{amount} here with your JWT as auth

import requests
import time

# Get your token and id from https://streamelements.com/dashboard/account/channels
TOKEN = 'YOUR_TOKEN_HERE'
myChannel = 'YOUR_CHANNEL_ID_HERE'

def add_points(receiver, amount):
    url = f"https://api.streamelements.com/kappa/v2/points/{myChannel}/alltime/{receiver}/{amount}"
    headers = {'Authorization': f'Bearer {TOKEN}'}
    response = requests.put(url, headers=headers)
    print(response.json())

# Run the function every 10 minutes
while True:
    add_points('Cr4sher_', 1000)
    time.sleep(600)

stdlib only. no need to install anything other than python (Python 3.11.4 in my case)

[shut turtle]

Is there a way I am able to edit these parameters for testing? I can edit the session data values just fine, but these ones are greyed out

[quick sequoia]

Guys i have problems with the display in OBS, seams well i think in my Stream Elements(idk if its okey how it seems is my first widget)

Is not showing nothing here

Is showing nothing here*

[uneven oxide]

The default resolution for StreamElements overlays (theme and custom) is 1920x1080. Please add them in OBS at their full resolution and use CTRL+F to fit to screen if necessary. You can then downscale your stream in OBS settings > Video if you'd like https://i.imgur.com/6bWXxjR.png

[indigo dawn]

quick question, what does Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'none'". mean?

showing up in console when making a custom widget

[hardy walrus]

What is the widget supposed to contain/use?

This is more of so those who can actually answer it better than I can.

[indigo dawn]

right now its just basic javascript. no fetching or anything ```js
window.addEventListener('onEventReceived', function(obj) {
console.log(1);
console.log(obj.detail.event);
if (obj.detail.event) {
if (obj.detail.event.listener == 'widget-button') {
if (obj.detail.event.field == 'testButton') test();
}
}
});

const placeholderWords = ["color", "among", "stream"];

const wordIndex = Math.floor(Math.random() * placeholderWords.length);
console.log(placeholderWords[wordIndex]);

function test() {
console.log(document.querySelector("#mainContainer > :last-child"));
document.querySelector("#mainContainer > :last-child").remove();

const word = document.createElement('div');
word.classList.add('word');
document.querySelector('#mainContainer').appendChild(word);

const message = "color";
for (let i = 0; i < message.length; i++) {
const letter = document.createElement('div');
letter.classList.add('letter');
letter.textContent = message[i];
word.appendChild(letter);
}

}

[hardy walrus]

Yeah. That's a "I'll let them answer" thing

[potent halo]

Very stupid question ik, BUT

• have you turned your local javascript off?
• have you installed "security" addons?
• have you changed your adblocker rules to include javascript?

This is basicly just your browser saying "hell nah I'm not excecuting this because the user told me not to."

That being said, it works on my machine™️

If there is no way for you to check the js execution rules, try another browser

[indigo dawn]

it still executes, so its not causing any problems. just trying to make sure i didnt accidentally write some code thats gonna break something

[potent halo]

huh. Ehm in that case, I'd look in the network tab, filter like that and look if anything shows up.

[indigo dawn]

yea no nothing is showing up

[potent halo]

wierd

well webdev do be like that

[indigo dawn]

alrighty i wont worry about it then lol

thank you very much

[quick sequoia]

Guys when it is a gift sub: which value can I see who received the sub, and who sent it?

[quick sequoia]

Guys other question, if i have a svg file i want to use in a chat, where i can upload it or how i can use it, im interested in give customization the color of the svg with fill

[potent halo]

You can upload it using StreamElements or just use it directly. svgs are just html under the hood. Open it up with any text editor and look for yourself.

Also since it's just html, you can style it using css.

[quick sequoia]

Nice! Thanks you

I find it later but i solve it, thanks you a lot!

[quick sequoia]

About this, you know how works? Because i recive "sender" and "name"/"username" in streamElements shows the same name even if is a single gift

I want show the name of who recived the gift sub, and the sender of that gift

[severe shell]

Are you using the emulation option? If so, that's "normal" (although it shouldn't), but in real life, sender is the gifter and name is the gifted, so it would be like:
{sender} sent a gift to {name}

[quick sequoia]

Nice! Thanks a lot bro!

I was anxious because of this all the night

[hard gazelle]

I tried to access the tips/top API endpoint for a channel I manage: https://dev.streamelements.com/docs/api-docs/b404f906817c4-channel-top
But it looks like this endpoint needs authentication and even with my personal JWT I don't seem to have access to it.
What would be the intended way to access this endpoint if I'm not the owner of the channel?
Is the access depending if the top tips are visible in the Twitch extension?

[indigo dawn]

is there something wrong with these fields? json { "restartDelay": { "type": "number", "label": "Restart Delay (Seconds)", "value": 5, "step": "1" }, "maxListLength": { "type": "number", "label": "Max Word List Length", "value": "50", "step": "1" } } the first one works fine but i can't get the default value to work for the second one, it throws an error like [ngModel:numfmt] Expected '50' to be a number even if i change the value

[shut turtle]

You're passing it as a string when it's expecting a number. Try doing "value": 50

[smoky seal]

I am trying to use the spotify API to do in chat song requests. However, when the widget loads I need to authenticate the user. I have tried window.location.href(authURL) and window.open(authURL) but neither have worked. Any ideas on how to make a window popup for the user to login to spotify and authorize?

[severe shell]

To use your JWT, you would need to have Full Control permission for that channel. Bot Supervisor or Editor, don't have access to tip information.
If using oAuth, you need tips:read scope

[hard gazelle]

Ah that's good to know, thank you! Using oAuth is probably a bit overkill for what I need, but I think I can find a way which works.

[midnight haven]

hello i have a porbleme

[severe shell]

It isn't a problem, it just says you cannot participate the campaign.

[midnight haven]

its my campaign

i can't instal on my pc

[severe shell]

So I would recommend that you open a ticket to explain your situation to the staff, follow the steps below to open it

[uneven oxide]

@midnight haven ⤵️

If you need to fill out a support ticket, please use the command !ticket in chat, following the subject of your issue! For example, please type "!ticket My chatbot isn't working", and then follow the prompts from our bot!

[midnight haven]

!tike

!tiket

[eternal oyster]

Hello. I wanted to know if anyone had this issue in the past. I wanted to put in a fact command from scorpstuff. I copied the url thing it gave but when I test the command it says "unable to make request" in chat. Anyone know how to fix? This is the command itself I have. Is it only possible to use when live? Cause even not live I can use my other commands.

[proud spade]

Answered in #community-helpdesk

[quick sequoia]

Hello guys! I'm trying to understand how to create commands in custom widgets. Honestly, I'm still quite new to this and not very familiar with it. Could someone explain it to me?

[severe shell]

A custom widget can read events from onEventReceived, so you just need to check if it is a chat message and if the message is the one you want to perform some action:

window.addEventListener('onEventReceived', obj => {
  if(obj.detail.listener !== "message") return // If not a chat message, ignore
  if(obj.detail.event.data.text == "YOUR_COMMAND_NAME_HERE"){ // if the chat message is YOUR_COMMAND_NAME_HERE
    // Do something here
  }
})

[rose tusk]

anyone got a valorant api i can use?

[quick sequoia]

That even exist? Damn

[quick sequoia]

I will check on this

[severe shell]

For q custom widget or a chat command? You can use Henrikdev API, for example

[bright jetty]

Is it possible for me to export the chat commands and import them to another SE account? Or create a backup of the commands in case if a mod screws up a command and it needs to be redone?

[severe shell]

You cannot export all commands at once, but you can share each one and open it in another account.

Or using the API, you can get all custom commands
https://dev.streamelements.com/docs/api-docs/6c4c897a6cee2-channel
and create new commands in another account
https://dev.streamelements.com/docs/api-docs/5976d1d8f1bec-channel

[pulsar willow]

how do i do the dynamic banner it wont work for me

[hardy walrus]

@bright jetty You have a moment to open your DMs for here?

[quick sequoia]

Guys i have a problem with the size of a div, the name it takes is "borderMessage" i tryied match the height of other container but is not working right, in my local machine works, but when i do it on StreamElements fails

I verified the same text, same widget size, recognize in my local machine the final size of the div with the text. But in streamElements calculates bad

[severe shell]

Many things can go differently in the overlay editor, as it wraps the code in a widget with limited dimensions.
What I would do is simply check the value of each variable and adapt them accordingly.

The overlay editor wasn't designed to be worked on local dev, unfortunately.

[quick sequoia]

Yhea but is strange that works sometimes and other no

Like idk why is like that

[white ember]

hello, anyone here?

[white ember]

i want to ask something. how do i edit my chat that when someone follows, it say "Thank you for following! Furry Dragon is happy!"?

[quick sequoia]

You need recognize the type of the event, and then show a alert

If you check when you recive the event you can show it with a console.log

Then you can check the type in your case you are looking for "follower" events. So when the "event".type is equal to that you show what you want

@white ember You will recive first this event:

And after this one: In my case i check if the type is "follower"(the second event that executes) and i show something

[quick sequoia]

Like the problem is, sometimes work others no, idk why

Here gives me a certain size of the container, but the div containing the text gives me the wrong size of the height (im using offsetHeight)

The second time takes the correct size:

Idk why fails like that the first time but not the second one

From the 2nd try to the next try doesn't fail anymore

Just fails ones

I solve it with a setTimeOut of 500ms

I think is not a good solution but it works i think

[quick sequoia]

If i want check the type of user that have sent a message where i have to check? Inside "tags" or inside "badges"?

[quick sequoia]

Or wich information i can check about that?

[severe shell]

You can check obj.detail.event.data.badges[x] and check each type of each item of array
You can also check obj.detail.event.data.tags.badges, it will show each badge separated by comma, i.e.: "broadcaster/1,subscriber/3012"

Usually, broadcaster, moderator, and vip don't get the badges replaced, but others do. subscriber, for example, can have the badge replaced by founder badge (which is also a subscriber, but being the first ones on that channel):

obj.detail.event.data.tags:

{
  "badge-info": "founder/45",
  "badges": "moderator/1,founder/0,bits/50000",
  "client-nonce": "4d0fe343f2f403d4c5c12d82d01514a1",
  "color": "#8AE020",
  "display-name": "c4ldas",
  "emotes": "",
  "first-msg": "0",
  "flags": "",
  "id": "afae9fee-84cd-4035-ef88-46c545dbee9f",
  "mod": "1",
  "returning-chatter": "0",
  "room-id": "321321321",
  "subscriber": "1",
  "tmi-sent-ts": "123123123",
  "turbo": "0",
  "user-id": "987654321",
  "user-type": "mod"
}

[quick sequoia]

Is there some written information about this to dig deeper? Or is just try and error process?

[severe shell]

That information is sent by Twitch via Twitch IRC . It is parsed to become a JSON object.
The message parsing doc can be seen here:
https://dev.twitch.tv/docs/irc/#parsing-messages

And here is shown how it is parsed:
https://dev.twitch.tv/docs/irc/example-parser/

The Twitch tag documentation is here (but it doesn't mention which ones are always in chat and which ones are hidden/replaced):
https://dev.twitch.tv/docs/irc/tags/

[quick sequoia]

You are my savior man XD

[mortal wharf]

why my campagn stop pls i need this money i pay in game

[uneven oxide]

@mortal wharf ⤵️

Sponsorship questions can only be handled with the ticket system. Please type !ticket sponsor support in #community-helpdesk and follow the instructions from the bot.

Attempting to open multiple tickets will not quicken staff response as they are handled in the order they are received.

[tribal zenith]

if it helps, you can also check https://reboot0-de.github.io/se-tools/tutorial-ChatMessage.html

[wooden basin]

Is the SE.API rate limiting still 500/minute? Making like 6 calls and I get 429 error :/

[severe shell]

You can check the ratelimit headers to confirm

[wooden basin]

I see 300/min, thank you. But I don't get it, from just one call to the next, I switch from "137" X-Ratelimit-Remaining, to "41" ? How is it possible?

[severe shell]

Which endpoint is that?

[wooden basin]

It's just a PUT request on my widget https://kvstore.streamelements.com/v2/channel/

Is the SE_API.store.set propagated to my whole overlay library and counting as 1 call for each widget?

[severe shell]

Yes, each widget in the overlay will count in the SE_API.store request.
So if you have 6 widgets in the overlay and make SE_API.store.get/set it will count as 6 requests.
If you have the same overlay open in 2 places (like browser and OBS) at the same time, it would count as 12 requests, by the way

[wooden basin]

Ooooh, makes sense. Too many OBS browser sources opened. Thank you, I really appreciate the help ❤️

[distant island]

May i talk to an admin

[proud spade]

About?

[distant island]

I need support for the sponsorships

[uneven oxide]

Sponsorship questions can only be handled with the ticket system. Please type !ticket sponsor support in #community-helpdesk and follow the instructions from the bot.

Attempting to open multiple tickets will not quicken staff response as they are handled in the order they are received.

[hardy walrus]

Hold that thought akina

The person who can answer about that is offline ATM and had sumbitted a fix for it to be posted to work again but no response from staff about it.

[viscid matrix]

so i am not to dumb 🥺 ? and it is just not wrong generally right now ?

[hardy walrus]

It is indeed broken.

[viscid matrix]

ok, than i will wait and hope for the fix ? is there anyway to be notifed for that ?

[hardy walrus]

However in the event that a ping awakens them from a slumber @severe shell

[viscid matrix]

okay thank u 😊

[ancient edge]

i am checking the list cant see members data for youtube: https://dev.streamelements.com/docs/widgets/6707a030af0b9-custom-widget-events

[severe shell]

Hey, saw the deleted message about the Valorant rank widget.
Well, I asked the staff to update the widget with the new code, but still pending.
In the meantime, you can get it from here:
https://streamelements.com/dashboard/overlays/share/6189c86c787ca32c5304816b

[viscid matrix]

thanks so much 🙏🏻🥰

I will try it as soon as i get home

[severe shell]

It’s the sponsor-* entries. That’s how YouTube call members.

[viscid matrix]

does someone has a widget like a to do list to add task ? chat and me adding them? i only found 1 and they want 150 dollars 🥺🥲 i cant afford that

[severe shell]

How would that work? You and chat type a command and the task ext appears on the screen and stays there? Can you show the widget you found?

[viscid matrix]

i only got this picture from another streamer they said it costs 150$, i dont know

like they type !addtask or edit or done and it is just for the viewers specific tasks like you can‘t delete anyones tasks, and the streamer can clear them.
sadly i dont know how coding works so i cant try doing it myself

[viscid matrix]

i hope u can see the picture 🥺 if not i could draw you an example in procreate 🥲 i just cant code it

[severe shell]

Yeah, I saw the picture, but don’t know any widget that does something similar, unfortunately. 😞

[viscid matrix]

ok, thanks anyways 🥹 i just have to hope that maybe someone else someday will code something like this, because it would be soo cool, if chat can just post their tasks with names and than check them while doing it watching or lurking stream

and you could get like timers or reminders and 🥲🥺 i just have so many ideas but i can‘t code and it‘s like gibberish to me

[dull horizon]

I have a widget that listens for subscriber-latest and adds the users name to a list.

Running a test shows that obj.detail.event.displayName works, however on my Twitch stream displayName is undefined.

Would obj.detail.event.name be correct to use, or is there another term?

Even replaying the event in streamelements activity feed makes it show up correctly 😓

[severe shell]

Correct key is obj.detail.event.name

[dull horizon]

Fantastic thank you 🙏

[severe shell]

The default tip goal widget doesn't have that option, so you can either try to look for one in #widget-share or create your own custom widget.

For a custom widget, the keys you can use are in the API documentation (in this channel description or below):
https://dev.streamelements.com/docs/api-docs/775038fd4f4a9-stream-elements-custom-widgets

[viscid matrix]

i finally could try it but it still seems to not work

[severe shell]

Fixed, it should appear correctly now, I missed a parameter from my server. 🙂

[viscid matrix]

yes finally thank u ❤️

[chrome tinsel]

hey guys! im working on my first ever widget thats far from complete. ive noticed that the goal only updates when i refresh the browser source, not when the event happens. how do i fix that?

[quick sequoia]

Guys if i want work on Goals i need to create a account on SE api?

[broken coyote]

That widget is on Etsy for like $15

[shut turtle]

I'm trying to figure out goal periods, but these are all returning 0 except for the total goal. Does anybody know why? I took a look at the documentation here https://dev.streamelements.com/docs/widgets/6707a030af0b9-custom-widget-events and it seems correct to me. Tried console logging straight after but everytime I emulate subscribers in the widget editor, it always returns 0

 weeklyGoal = data["subscriber-week"]["count"];
 monthlyGoal = data["subscriber-month"]["count"];
 totalGoal = data["subscriber-total"]["count"];```

and data is `data=obj["detail"]["session"]["data"];` on widget load

[potent halo]

There is nothing wrong with your code according to docs.
Would I be in your shoes, I'd try to debug now.
put a console.log(obj) on the first line of your onwidgetload
open the console and look where this line printed. You should be able to open and explore the object's properties.
At that point look for detail > session > data > subscriber-... > count and see if it's there and the variable is set correctly.

[potent halo]

That is some WILD code. You made that?
While it's somewhat over-engineered, it has comments and has pretty well spread out logging.
I'm a bit confused why you didn't get the reason with all that loggin tbh.
Line 31:
In onSessionUpdate the obj is constructed slightly differently then in onWidgetLoad
Your "data" is directly under session.

window.addEventListener('onSessionUpdate', function (obj) {
  console.log("Session updated:", obj);
- let data = obj.detail.session.data;
+ let data = obj.detail.session;
  updateProgress(data);
});

[chrome tinsel]

i had some help from someone much more experienced than me

this worked, thank you so much !!!!

[potent halo]

np

[strange river]

Hey folks,
When someone bulk gifts 10 subs e.g is it possible to show the receivers names?

[white ember]

hey guys? how do i have my chatbox disappear while i keep chat more visible?

[white ember]

i got it, now i just need to make chat white

anyeone know how?

[severe shell]

Just a suggestion, in onWidgetLoad, you already have the isEditorMode value on obj, so no need to wait for a request from SE_API.getOverlayStatus().

  let isEditor = obj.detail.overlay.isEditorMode
  console.log("IS THIS EDITOR MODE:", isEditor);

  // Simulate goal event only if in editor mode
  if(isEditor){
    setInterval(simulateGoalEvent, 2000);
  }

[severe shell]

#dev-chat message

[severe shell]

Which chat are you referring to, exactly? The default chat widget, the Twitch chat in OBS docks, a custom chat?

[strange river]

Thanks! That’s not really what I was looking for but I’ve managed to do it myself 🙂

The problem I’ve got now is, when I emulate two bulk gifted at the same time, only one is being displayed. Maybe I’m doing something wrong with the activitygroup? @severe shell

let bulkGiftedQueue = [];
let currentBulkGifted = null;
let isDisplaying = false;

// Function to generate random positions in a circular pattern for explosion effect
function getRandomPosition() {
    const radius = Math.random() * 0.5 + 0.5; // Random radius between 0.5 and 1
    const angle = Math.random() * 2 * Math.PI; // Random angle in radians
    return {
        x: Math.cos(angle) * radius,
        y: Math.sin(angle) * radius
    };
}

// Function to display all the names with an explosion effect
function displayBulkGiftedSubs(subsList) {
    const container = document.getElementById('giftedSubsContainer');
    container.innerHTML = ''; // Clear container

    if (subsList.length === 0) {
        console.log('No subs to display');
        return;
    }

    isDisplaying = true;

    subsList.forEach(name => {
        const pos = getRandomPosition();
        const subElement = document.createElement('div');
        subElement.className = 'sub-name';
        subElement.style.setProperty('--x', pos.x);
        subElement.style.setProperty('--y', pos.y);
        subElement.textContent = name;
        container.appendChild(subElement);
    });

    console.log('Displaying subs:', subsList);

    // Delay before clearing the container
    setTimeout(() => {
        container.innerHTML = ''; // Clear container after 5 seconds
        console.log('Gifted subs cleared');
        isDisplaying = false;
        displayNextGift(); // Display next gift if available
    }, 5000);
}

// Function to display the next community gift in the queue
function displayNextGift() {
    if (!isDisplaying && bulkGiftedQueue.length > 0) {
        const nextGift = bulkGiftedQueue.shift();
        currentBulkGifted = nextGift;
        displayBulkGiftedSubs(nextGift.subsList);
    }
}

// Listen to the event from StreamElements
window.addEventListener('onEventReceived', function (event) {
    const data = event.detail.event;

    if (data.bulkGifted) {
        console.log('Bulk gifted event received');
        const giftData = {
            activityGroup: data.activityGroup,
            amount: data.amount,
            subsList: []
        };
        currentBulkGifted = giftData;
        bulkGiftedQueue.push(giftData);
        displayNextGift(); // Start displaying if not already displaying
    }

    if (data.type === 'subscriber' && data.activityGroup === currentBulkGifted.activityGroup) {
        console.log('Subscriber event received:', data.displayName);
        currentBulkGifted.subsList.push(data.displayName);
        if (currentBulkGifted.subsList.length === currentBulkGifted.amount) {
            displayBulkGiftedSubs(currentBulkGifted.subsList);
        }
    }
});```

Appreciate the help

[severe shell]

Hmm, I don't like to work with gifts on SE, unless I'm using se-tools library from Reboot0
https://reboot0-de.github.io/se-tools/tutorial-Events.html
Check onSubBomb, onSubBombComplete and onCommunityGift
Instructions here:
https://reboot0-de.github.io/se-tools/index.html

[chrome tinsel]

thank you !

[white ember]

Oh huh. I use streamelement

[shut turtle]

When I simulate a community gift, it triggers the 'onEventReceived' more than just once (like 10 times). I removed all my code in the onEventReceived listener and logged the output. It also shows an auth warning. Has anyone come across this issue?

I only just noticed it after clearing my cookies and it seems to be happening on other devices too

window.addEventListener('onEventReceived', function (obj) { console.log('event received')

[severe shell]

That's normal, emulated community gift triggers 10 gifts.

[shut turtle]

Yeah it adds to the goal correctly, but then it basically repeats itself and starts incrememnting again

So community gifts always trigger multiple events?

[severe shell]

Yes

[opaque vine]

Hola

[shut turtle]

Thank you so much, it's been irritating me for so long 🙏

[severe shell]

I hate working with community gifts on SE. I would recommend this: #dev-chat message

[placid junco]

Heey, will start making custom widget like eventlistner, chat and that. Who do I share that like nerdordie? He have a html link to the widget so I easy can add the widget to my streamelement

[hardy walrus]

I'm going to tentatively ping @wet mauve about this as that's sorta funky atm with permission and access.

[subtle prawn]

Hello, can anyone help me with a little problem that i have with the default EventList (custom widget), i cant figuerout how to make it do the animation that i want, right now it does the fadeout, animation, and i want to be the Slide to right out.

[subtle prawn]

well, no help at all, only a lot random "people" adding me for no reason.

[terse anchor]

Hey everyone. I am new to the development side of things, but if I wanted to get started, any advice on what I can do to get started?

Even if it's starting small?

[potent halo]

Damn sry to hear that. Had a headache yesterday so I honestly didn't care about helping anyone.

Anyway if you still need help...
Because the info you gave is somewhat vague, my answer will be, too. The animation is most likely handled by css (while it is also possible with js). "Fadeout" most likely modifies the opacity property. There are 2 main ways of doing that, either with @keyframes and setting the animation property, or setting the transition property with an extra class modifier.
Also "Slide out" could be achieved by using transform: translate(...)

[potent halo]

What do you mean?
New to development over all?
New to SE development?
New to Minecraft modding?
You see what I mean? You gotta specify a bit what you are new to. And what you want to learn.
Even within SE there are multiple points to start from.

[placid junco]

@wet mauve something you could help me with?

[uneven oxide]

@placid junco ⤵️

One-Click Overlay Sharing Application

Use this link to submit an application: https://strms.net/shareoverlay_request

[severe shell]

Or you can use the Elements Editor, which has the option to use a sharing link

[delicate gate]

Hey! Im pretty dang new to this and not great with development, but I've been meaning to find a way to make one command send 2 messages in Twitch. I faced a dead end, but then got this miraculous situation where my code was so long that it came out in two messages, and slightly messed up. I'm hoping to find how to replicate this effect or find another method of sending 2 message in one command.

The command was:

$(eval a = $(user); b = $(query) ? $(query) : ''; c = decodeURIComponent($(urlfetch https://pastebin.com/raw/AAAAAAAA)); d = c ? c.split(',') : []; b ? d.push(b) : ''; d = d.join(','); fetch(https://pastebin.com/api/api_post.php, { method: 'POST', body: api_dev_key=AAAAAAAAAAAAAAAAAAAAAAAA&api_option=paste&api_paste_code=${encodeURIComponent(d)}, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}).then(response => response.text()).then(data => 'Added to the list: ' + b))

And the output was:

$(eval a = $(user); b = $(query) ? $(query) : ''; c = decodeURIComponent($(urlfetch https://pastebin.com/raw/AAAAAAAA)); d = c ? c.split(',') : []; b ? d.push(b) : ''; d = d.join(','); fetch(https://pastebin.com/api/api_post.php, { method: 'POST', body: api_dev_key=AAAAAAAAAAAAAAAAAAAAAAAA&api_option=paste&api_paste_code=${encodeURIComponent(d)}, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}).then(response => response.text()).then(data => 'Added to the list: ' +

and

. b))

My apologies if this is the wrong channel to post this in.

[wooden ivy]

Hey guys! Trying to connect to StreamElements API specifically to respond to incoming tips. I was creating a websocket to "https://realtime.streamelements.com" and using my JWT to auth but I'm getting a 503 error. Any help?

[hardy walrus]

Correct channel.

Unfortunately we don't support eval so you'd need an external server handling that part.

The 2 messages bit I'd need to leave to someone else to answer.

[potent halo]

not a websocket server, it's socket.io
That's a protocol on top of websockets.

And yes the docs are lying to you in that regard.

[potent halo]

there is no way to send 2 msgs (just with the website bot interface) afaik.
Also I think you found a bug.

Sadly I can't reproduce it using other means, so the second message with always just contain a dot and the last word.
And that's just not very helpful :/

[strange river]

hey i just created a overlay and want to share it. how is sharing possible ive done these "quick imports" multiple times but cant manage to export my own

[severe shell]

Well, as was mentioned before, SE does not support eval (that works on Nightbot, though), so it just prints exactly what you added to the command. You cannot send 2 messages using a single command, either (the exception is !filesay which reads and send each line separately from a plain text output).

As regards the message is being separated in two, it is because there is a limit of characters that can be sent on chat, which is 500. If the message is equal or more than that, SE will break it into two separating the word that goes after that and putting a dot and space before the second part of the message

[severe shell]

Not sure if the overlay sharing form still working, but check this: #dev-chat message

Edit: overlay sharing form is not being used anymore, as the Elements provides sharing capabilities.

[potent halo]

except the interface for the bot commands only allows 500 chars and this happens anyway.
Also tried to break it and doing test $(repeat 100 " a")$(repeat 100 " a")$(repeat 100 " a")$(repeat 100 " a")$(repeat 100 " a") test just cuts of the second "test"
Also importing a pastebin with 500 spaces (and some Zero Width Spaces) doesn't work and it just trims multiple spaces in a row to one. After that I gave up.

[severe shell]

You went a lot far than I did some time ago, very good! 😄

[grand jackal]

hi, are there some info for the new bits enchantments cheers? we'll see them in window.addEventListener('onEventReceived' under "cheer-latest"?

[potent halo]

you mean "power ups"? i dont think there is even an api endpoint for that

[still juniper]

there is

[potent halo]

uh where 👀

[still juniper]

Eventsub

[grand jackal]

yes the new "power ups", on twitch apis and irc they are already on, but here on streamelements i don't see them, i think they need to add them

[wooden basin]

Hey there, currently trying to use the "https://api.streamelements.com/kappa/v2/bot/channel/say" endpoint to send message on chat. I'm sure the channel ID and API token provided are correct, but so far I'm receiving a 403 : Forbidden (Not allowed to perform this operation). Do I miss anything?

I'm aware of the jebaited botMsg solution, but I would really prefer using the StreamElements API directly..

[still juniper]

that endpoint cannot be used inside overlays, the apikey is not authorized for that

[wooden basin]

Oh, I see 😦

[ruby sable]

Is there a way I can make the streamelements bot say different/multiple messages with 1 "options" variable? I tried this but I would get "Bad Request" in the console

[potent halo]

not enough code to help you. You cut of everything that would be important.

1. the full url
2. where you actually make the call

[ruby sable]

I'll resend it in full but also covering token and channel id information

[severe shell]

Why not posting the code in text? It is so much better

[ruby sable]

Havent crossed me mind xDD. Im so used to screenshoting

I'll send the code over

[severe shell]

In developing world, it is always better to put the code in text, so if needed we can test in our side without the need of typing it manually 😄

[potent halo]

If you dont know how...

This is a code block

```js
This is a code block
```

[ruby sable]

const options = {
  method: 'POST',
  headers: {
    Accept: 'application/json; charset=utf-8',
    'Content-Type': 'application/json',
    Authorization: 'Bearer  TOKENHERE'
  },
  body: `{"message": ${BotMessage} }`
};

try {
      const response = await fetch(url, options);
      const data = await response.json();
      console.log(data);
  } catch (error) {
      console.error(error);
  } ```

Thanks!! I didnt know how to do that

[potent halo]

hm doesn't the body need quotation marks for values too?

[severe shell]

I'm considering you are changing the CHANNELIDHERE and TOKENHERE and you have something for the variable BotMessage. If so, that's correct.

Change the body to:

body: `{"message": "${BotMessage}" }`

[ruby sable]

The code follows through but it treats BotMessage as '' even though the variable is set to a string a line before fetching

Oh wait. I think "message" is restricted to the string BotMessage was set the moment it is mentioned

So it won't change

[potent halo]

why not put the whole thing in a function and just call that?

[ruby sable]

That worked! xDD

[potent halo]

smth like

function sendMessage(myMsg){
  const url = 'https://api.streamelements.com/kappa/v2/bot/CHANNELIDHERE/say';
  const options = {
    method: 'POST',
    headers: {
      Accept: 'application/json; charset=utf-8',
      'Content-Type': 'application/json',
      Authorization: 'Bearer  TOKENHERE'
    },
    body: `{"message": ${myMsg} }`
  };
  try {
        const response = await fetch(url, options);
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    } 
}

// Calling it like this
sendMessage("Hello World!")

[ruby sable]

Yeee. I just tested it and it's running just as I expected it to 😄

Thank you so much!! 🙂

[viscid matrix]

if i wanted to start learning how to create widgets in what like program language would i need to code? and please be like noob level explaining cause i know 0,0% 🥹

[drifting token]

If you find out & someone DMs you could you let me know pls?
If they send it here no problem

I'm trying to do something like this
Where the User & their badges are on the darker plank & their message on the lighter.
It's hard haha
especially with no one to throw solutions at 😅

[severe shell]

HTML, CSS and Javascript. Basically web development. This is what is used on widget.
Once a person asked what they should look for, and I recommended the following:
#dev-chat message

[burnt swallow]

Who do i need to talk to regarding adding Subscriptions, followers, etc. on Twitch and/or Youtube for certain?

[chrome tinsel]

not sure where else to ask so!

I'm a graphic designer looking for programmers to work on some projects for my shop (chat widgets, goals, tasklist, etc)
if you have experience with coding StreamElements widgets and portfolio with recent work please dm me!
I would need someone active who will be making widgets weekly :) the designs are ready and the pay is pretty good

[viscid matrix]

thanks so much for the tip, i already did the html course and understood everything, i will do the other ones and than i am gonna look at some existing widgets ☺️

[pulsar willow]

I have 2 Layers. 1 has an image and the other shows the lastest follower. What im trying to do is after 10 seconds i want those 2 layers to fade out. But no idea how....

[severe shell]

Go to animation settings, and choose Fade Out in exit animation. Put 10 seconds in duration.

[pulsar willow]

That's if i create everything within the custom widget. Correct? I have 2 separate ones. I made a image in Photoshop for a bit more control in design I guess. Im trying to fade the Image layer as well as the other layer. Hopefully that makes sense.

[severe shell]

No, I was talking about a common alert box. Since you didn't provide that information, I just assumed it.

Each "layer" is a widget in Streamelements overlay (if we are talking about the Overlays page and not Elements page). Each widget is controlled independently, so you would need to put all layers together in a single if you want to control them at the same time.

[pulsar willow]

Ah I see. Sorry for the lack of information. Thank you for the help.

[chrome tinsel]

im new to coding widgets too! let me know if you ever need support

[quick harbor]

Is API token not allow to access /v2/activities/{channel} or even /v2/sessions/{channel}?
i tried the same code with JWT and im getting the response 200, but when i tried with the API Token from /oauth/token it says 'Not allowed to perform this operation' with status code 401
For more info, my token have the following scope - tips:read channel:read activities:read activities:write

also for update: it works fine when i call /oauth2/validate or /v2/channels/me

[potent halo]

What are you using for the Authorization Keyword?

[quick harbor]

Bearer
if thats what u mean

[potent halo]

Try OAuth for your oauth2

[quick harbor]

it result in 403 forbidden

[hardy walrus]

Certain scopes are a PITA regardless of doing JWT/oauth but I unfortunately do not know which ones those are.

[potent halo]

Even though the scope exists would be crazy

[quick harbor]

also for update: it works fine when i call oauth2/validate or v2/channels/me

[hardy walrus]

That is unfortunately indeed the case.

[hardy walrus]

For context this.

[potent halo]

Okay just looked again..
Getting activities is possible. Jebaited does it

[quick harbor]

also it seems like if i have Full Control over someone channel, i can access their activity feed using my JWT
thats interesting

[severe shell]

/v2/activities/{channel} works fine with oAuth when having activities:read scope

/v2/sessions/{channel} was expected to work with session:read, but that scope is invalid (we have requested SE staff to remove the invalid scopes, but that's still pending)

[quick harbor]

thats strange then
it (/v2/activities) didnt work for me

i expect it to be issue of missing scope but then why would it return that i have activites:read when i user /oauth2/validate

[quick harbor]

it feels like the whole doc need an update, with a lot of stuff

[hardy walrus]

Yeah. It's rather dated and lacking unfortunately.

[quick harbor]

i wonder why its not working with my api token

[abstract osprey]

Hi

[potent halo]

Hi 🙂

[warped bridge]

Hi, i try to disable an item in my SE Store via API.
I tried this:

    $url = "https://api.streamelements.com/kappa/v2/store/".$shopID."/item/".$itemID;

    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');

    $headers = [
        'Authorization: Bearer '.$bearer,
        'Content-Type: application/json'
    ];
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

    $data = json_encode([
        'enabled' => false
    ]);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);

    $response = curl_exec($ch);

    if (curl_errno($ch)) {
        echo 'Error:' . curl_error($ch);
    } else {
        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        echo 'HTTP Code: ' . $httpCode . "\n";
        echo 'Response: ' . $response;
    }```
But i only get this back:
```HTTP Code: 404 Response:

Cannot PUT /kappa/v2/store/[shopID]/item/[itemID]```

Have I missed anything?

[hardy walrus]

While i'll leave the real answer to those who can really answer i assume you looked at this? https://dev.streamelements.com/docs/api-docs/9a4492167f29c-channel-items-item-id

[warped bridge]

Yes, i tried this "short" version and also the version were i send all the required fields, but i didn't work. I had some trouble with required fields in the past, so i'm not sure what fields exactly are needed

[potent halo]

While I'd love to figure that out, I'm currently at work. So here is how I'd do it. Go to wherever StreamElements' Website does it, press F12, go to the network tab, disable an item, check what requests go to api.streamelements.com

One of them has everything needed to disable an item

[warped bridge]

Wow, this is very helpful, i will try this... when i at home from work 😄

[severe shell]

404 means "Not found", so the endpoint URL is wrong. The word is /items/ (plural)

Also, the name and description of the item is always required, so to disable an item, the body should be this JSON:

{
  "name":"Item name",
  "description":"Item description bla bla bla", 
  "enabled": false
}

[warped bridge]

Thanks i will try this 😄

[limber cloud]

I'd love it if they added a way to track and run subathons, because right now I have to use another bot to do that.

[proud spade]

StreamElements Dashboard -> Streaming Tools -> Overlays Gallery -> Widgets -> "Stream Marathon Timer"

Let your viewers keep your stream live by following, subbing, donating and more!

[quick harbor]

Is it possible to call StreamElement storage value, the one we set from SE_API in the widgets, from oAuth access
Even read only works for what I want

[silver fox]

I was looking for a tutorial to learn how to do a custom widget and now I’m learning how to code!! And it is so funnyyyyy!!! ✨✨

[potent halo]

1. Don't know about oAuth tokens, so that is for you to figure out
2. Afaik this is UNDOCUMENTED meaning it CAN BREAK at any moment
   GET https://kvstore.streamelements.com/v2/channel/<CHANNELID>/customWidget.<KEYNAME>
   Using Authorization Header of course.
   Response is smth like {"value":0}

POST also works. Although slightly different

[proud spade]

@stark pilot

Hi there! I run an aviation stream, and I can add a browser source in OBS no problem, but I'm trying to get it to run through streamelements overlays because I'm trying to remove the laptop from the streaming setup. I have used something like <embed src=https://www.radarbox.com/live-widget/CYYZ?limit=5&type=news&arrivals=true&departures=true&metar=true"></embed> but this particular site won't load. I wonder if it is a security issue or something. Iframe doesn't work either. Any thoughts?

The bot doesn't like links, but radarbox should be okay now.

I don't believe overlays support <embed> 😦

Or <iframe> or using javascript to incorporate another site

[stark pilot]

Thanks. I will have to take some javascript lessons. 🙂

I have tried embed and iframe with the url, and it shows up blank. Other websites I can get to show in the overlay, but this one seems to just be empty

[proud spade]

I tried to use xhttp requests to incorporate things and I could never make it work.

[stark pilot]

I'm such a newb at coding. I used to do html back in the late 90s, but the java, css, etc. is new to me

[proud spade]

If I had a good source for Canadian METARS I could maybe help, but I only know where to get US ones. 😦

[stark pilot]

Much appreciated 🙂

[severe shell]

It doesn't work with oAuth, unfortunately. Also, the insert would be using PUT

@quick harbor
A suggestion would be after getting the oAuth token, do a request to /channels/me and collect the apiToken.
With that token you can do the request to the kvstore endpoint using Authorization: apikey APITOKEN

[quick sequoia]

Hi guys! I'm trying to do the bubble chats, what happens is i need to animate them. So im thinking in use SVG format. But i can make the bubble chat responsive depending on the quantity of text. How can I do that? Or is possible to do that?

[wanton cliff]

Hello! I'm looking to customize the existing streamelements marathon timer for Twitch, I'd like to add the ability to differentiate gifted subs from "real" subs (to incentivize self subscription for the plus program) except I'm not sure how to do that. I'm not sure if there even is a way to identify a gifted sub vs "real" subs

Would anyone know how to do that?

[potent halo]

Very much possible
Tbh while you could, I wouldn't recommend doing it yourself.
Use reboot's implementation https://reboot0-de.github.io/se-tools/

If you still want to do it yourself search for gifted in this channel. There should even be an explanation from me.

[quick sequoia]

Anyone can help me with this? How can i solve it, a documentation or something?

[severe shell]

I'm terrible with the frontend part, but I think you can check the scrollWidth (or clientWidth) of your content and change using javascript:

<div class="text-box" id="text=box">
  <div id="label" class="label">admin</div>
  <div id="text-content" class="text-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

const box = document.querySelector("#text-box");
const content = document.querySeletor("#text-content");
const contentWidth = content.scrollWidth;

// Define here the min and max width the textbox can have
const minWidth = 250;
const maxWidth = 500; 

// Check the largest and smallest
const boxWidth = Math.max(minWidth, Math.min(maxWidth, contentWidth));

// Set the size accordingly
box.style.width = `${boxWidth}px`;

[lusty tartan]

Just wanted to pick at your brains if anyone would have any idea! I'm trying to make a popup trigger for my stream to play a video source that im working on but want my current scene to blur and darken before the video plays. Most blur plugins seem to be only source related but would anyone know if there's a way to blur an entire scene?

Unsure if it would require coding hence why I decided to ask here

[potent halo]

The way blur works doesn't allow css to affect the obs content at all.
So it has to be done in obs (probably using a plugin)
Googling for 5 seconds gives me streamfx. Maybe look into that. Use it if it satisfies your needs, modify it if needed.

[lusty tartan]

Yea i had a look as well but all the plugins Ive found seem be only apply blur as filter to singular sources and not an entire scene so back to my research I guess, thank you for the guidance! I'll look into streamfx more

Was looking more into a way to streamline it and not have to apply a filter to every scene and with the press of a button it would just blur any scene im on with the animted video on top but it's not that easy unless im being dumb

[velvet prism]

Anyone know how to add a shared timing to this line of JS please?

The timings are off when the information changes

I need them to be synchronized even if the info changes due to any event that's happening like subs or follows, etc.

[potent halo]

this line of JS
sends like 400 lines
You are also being very cryptic...
The timings are off when the information changes [...] I need **them **to be synchronized
What Timings? What Information? What is "them"
Also wdym by shared timings?!
If I had to guess you want to decouple Event Updates and Animations, in which case you might want to use setInterval() to get an impulse to your animation update

[velvet prism]

Yes, exactly thank you

I had no idea how to phrase the whole sentence so sorry for being cryptic there

[bright moth]

Does anyone have a command that when you type a shoutout to someone that outputs the message, displays what game they where last playing in chat and then auto triggers Twitch's shoutout feature using Steam Elements itself?

[tribal zenith]

I think you're more likely wanting a queue with Promises. You could build and manage your own or use the more complex one from https://reboot0-de.github.io/se-tools/tutorial-Queue.html in combination with the event listeners.
I wouldn't include the whole script if you just use the queue tho 😅

[valid basin]

Hello everyone,
I am currently trying to use the Streamelements Loyalty System for Kick and youtube. I have already managed to give points to viewers on these platforms. Unfortunately, these are always deleted after 24 hours. Is it because there is no Twitch account with this username? I thought about reproducing the store on a page via the API and letting users authenticate themselves with the respective platform and make a purchase. But the points have to stay on the account first... 😦

The funny thing is that with 2 users who collect points on kick, there is no twitch account with this username, but the points are not deleted. Why does it work for these two, but not for all the others

[hardy walrus]

It is twitch only.

We do not have support/integration for kick so that's why nothing will work and it's just not available for youtube.

[valid basin]

I am aware of that, I can still give points to viewers via the /user endpoints. The only question is why the points are deleted. Is there anything I need to be aware of?

[velvet prism]

Nah don't worry

After fighting with it for an hour it's now synchronized

[radiant shale]

hihi, I was hoping someone here might have a lead. I'm trying to helpout a friend who's going to be doing a subathon on twitch and we're trying to avoid doing everything by hand. unfortunately nobody we know is very experience with the devkit for SE.

We're essentially just looking for a subathon tracker that can convert bits/subs/donations to a $ or euro amount, while showing both the leader for each category, and a goal tracking bar showing the entire total while we progress through said goals.

[potent halo]

Wdym Devkit? Wdym not doing everything by hand?
Unfortunately for you, that amount of custom features is probably not going to be available just like that.
I built 2 widgets that do that, but they were paid for to be closed source. I can give you a couple pointers tho, if you have specific questions

[serene gulch]

I made a subathon timer which handles subs/bits/donations. It doesn’t convert everything to money but you can set goals based on the total time (so it includes all types indirectly).
Currently, the website has a leaderboard for gift subs only, but you can get the top 5 per category with chat commands.

If that works for you, let me know. Not sure if I can link it here or if that’s against the no self advertising rule

[plucky osprey]

Hey y'all, I'm trying to make a widget for a kick streamer friend and could use some help. I'm relatively fresh to JS, I can figure out most of the HTML and CSS on my own probably but would still love some advice

[proud spade]

It may be difficult as Kick hasn't given StreamElements API access yet.

[plucky osprey]

Hmm. How would you recommend I go about making a web panel then? It's a Roulette wheel for giveaways, so I'm assuming he wants buttons for starting the spin, showing and hiding the wheel, and clearing it

[proud spade]

As long as it doesn't have to integrate with kick and can just be an overlay, it's possible.

[plucky osprey]

Yeah I was just making it a browser source he could link as an overlay

[potent halo]

There are a million ways of doing this. Heavy html and css but light js could be you utilizing css animation and transition properties. You could then add/remove classes or update properties like transform rotation using js. Just Google smth like css wheel of fortune. Or browse through #widget-share . You'll find something

[broken coyote]

I have a store full of kick widgets that work with SE

[plucky osprey]

I have the widget, have all the js and everything. It’s more just customizing it

[plucky osprey]

Would you be willing to answer some questions about them tomorrow? Or maybe take a look at what I have and just help me figure out my next step

[broken coyote]

I can def steer you in the direct to get it working with kicks api

Just shoot me a dm tomorrow

[timber lark]

I'm a bit late to the party... Is there still a way to participate? 🙂

[low wave]

That was 3 months ago 😭

[dark blaze]

Hey, can anyone explain me how I can get a counter to count specific amounts? For example I want to have a financial counter for prices on my tour and I want the counter to count 5,99 on top. Like [!count +5,99] and the bot saying [Current count: 57,84€] or something like that

[severe shell]

Not sure if I understood, but if you want to add 5,99 to the current counter, it isn't possible. Counters do not accept decimal values.
However, if you just want to show the count value + 5,99, you can do like below:

[Current count: ${math ${getcount YOUR_COUNTER_NAME} +5.99}€]

That won't change your counter, just get its current value and use it to add 5.99 using math.
Also, math doesn't work with comma , for decimals, only period .

[potent halo]

Before I go completely insane.. Maybe you know more.
I tried giving ${1} on a counter, which doesn't work. Thought it might be string, but mathjs number() also doesn't work.
If it were to work the following might be able:
!getmoney: [${math ${getcount COUNTER} / 100}€] and
!addmoney: [${count COUNTER +${math round(${1} * 100)}}]
At least the get command works xD

[severe shell]

Yeah, with two commands that would work fine.

The counter is always be in cents, which would make more sense 🙂

[potent halo]

Theoretically you could name the counter smth like "cents" tho and just use !editcounter cents +200

[dark blaze]

@potent halo & @severe shell hey thank you for your help actually I was doing a 10.000 calorie burger king challenge for 24 hours till now and I got another solution which wasn't perfect but it worked for the spontaneous stream so I couldn't read your helping messages anymore. I'm sorry for that and very thankful for your help!💛

[wise hawk]

Hi, as far as I know, Twitch’s new Power-ups are not yet supported by StreamElements overlays and also the cheers used for Power-ups are not taken into account by the overlays and the chat bot (please correct me if I’m wrong).

Does anyone know if there are plans to send cheer events to overlays when Power-ups are used? Or if there will be an additional event for Power-ups so that overlays can be notified?

[severe shell]

Maybe on Elements in some time, but not on Overlays.

[wise hawk]

Thanks for the info! 🙂

Does anyone by any chance know whether Power-ups trigger an obj.detail.listener == "message" event and if so, whether obj.detail.event.data indicates somehow that the message belongs to a Power-up?

[knotty hare]

Hello everyone, can someone help me? Is it possible to integrate a self-designed animated 3D model (avatar robot) into SE to trigger alerts? For example: The robot waves at a new follower or starts dancing by redeeming channel points. Thanks for info.

[naive mesa]

I was hoping to access the native TTS functionality through a custom widget rather than creating a call to /kappa/v2/speech on my own, but that isn't exposed through SE_API. is there a way to access the full API or directly use the StreamElements angular module in a custom widget?

[proud spade]

I believe it is intentional that TTS is not available via the API.

[naive mesa]

hmm...so the only way for me to switch between different TTS voices on the fly would be building the functionality again from scratch?

[still juniper]

why can't you call /kappa/v2/speech inside your custom widget?

[naive mesa]

I can, but the API has spam filtering built-in as well as supporting multiple voices if you call it directly. the normal cheer widget uses this, but you can only set a single voice through the overlay tools. spam filtering also isn't part of the SE_API exposed to custom widgets.

[still juniper]

• Not sure what you mean by single/multiple voices. You can call the endpoint with the voice of your choice. If you just want a single one, use one. If you want the user to select among multiple, or randomize selection, just code a list of available voices
• SE_API.sanitize is the spam filter, just sanitize your text before calling the endpoint

[naive mesa]

I have this implemented already with multiple voices using the /kappa/v2/speech endpoint. I was just hoping I could reuse the textToSpeech code instead remaking the rest of the function. also it looks like sanitize is purifyData which is different from the isSpam call.

it's fine if I can't use it. I was just curious if we could get access to the full API or if that was limited to SE itself

[uneven oxide]

@pulsar willow ⤵️

Sponsorship questions can only be handled with the ticket system. Please type !ticket sponsor support in #community-helpdesk and follow the instructions from the bot.

Attempting to open multiple tickets will not quicken staff response as they are handled in the order they are received.

[hardy pumice]

I'm creating a website for a channel and I wanted to have a store section, which would connect its API. But I wanted to know how I can make the user reedem the items. At this point my solution was to create a database and in Reedem change the remaining quantity of this item and remove the user's points (I'm using Twitch's oAuth) and add a record to the Database. I wanted to know if according to your TOS I can "hide the items" from "https://streamelements.com/omendigotv/store" and only show them on the website or not. Thanks

[severe shell]

In a world the the user could redeem items from store outside the SE website, it would be possible using SE oAuth. However, the scope for store:read / store:write isn't valid, so it isn't possible to do that.
Also, the user points you are possibly removing using Twitch oAuth isn't the points used for Streamelements store, those are Channel Points. Streamelements points are Loyalty points, and are only valid on Streamelements, they are not integrated with Twitch channel points.

[hardy pumice]

Sim, nao é essa a questão

[severe shell]

Well, as regards the TOS, you can check it here:
https://streamelements.com/terms

I don't remember anything related to your use case, but it's been a while since I read the TOS. I would open a ticket to check directly with the staff if you have questions on that (they don't check this channel)

[uneven oxide]

@hardy pumice ⤵️

If you need to fill out a support ticket, please use the command !ticket in chat, following the subject of your issue! For example, please type "!ticket My chatbot isn't working", and then follow the prompts from our bot!

[severe shell]

In default alerts you can use images and videos.
In custom widgets you have more flexibility to choose what you want to show using HTML, CSS and JavaScript.

[spice tapir]

Is it possible with the API to get the sponsorship message of the activity feed ?

[waxen ivy]

sorry, i want to ask if there will be an update on the widget for power-ups(twitch)?

[hardy walrus]

If you mean the new twitch stuff there is nothing added yet.

[severe shell]

It does. There is a key called obj.detail.event.data.tags["msg-id"] that shows the power up identification, like "gigantified-emote-message" and "animated-message".
I'm not sure about the "On-Screen Celebration" because I could not test that one.

[wise hawk]

Thanks, that’s exactly what I wanted to know. 🙂

[unborn coral]

haiiii! i submitted a support ticket (several times lol both here on disc and on the SE website), and so far no one has been able to really help me. was wondering if i could talk to someone here :')

[severe shell]

The staff doesn't check this channel. Also, opening many tickets only delay the process. I would suggest to stick to one ticket and wait for the response (maybe they have a big queue at the moment)

[unborn coral]

fair ig, buti keep getting uhh "default" solutions that i have tried even before submitting the support ticket :')

[tranquil marsh]

Verry nice update 🙂 cant stream anymore

[proud spade]

I don't believe there was an update to SE.

[tranquil marsh]

It was when i started it today it asked me if i wanna do the update and ofc i said sure why not big mistake

[proud spade]

Update to 30.2?

[tranquil marsh]

y

its the same thing anyway

none of them are working now

drop frames like hell when i go live

same settings

[hardy walrus]

That's an issue you'd need to speak with the OBS people about as SE.Live is just a plugin.

[broken coyote]

if i had a nickel for every time i said this

[hardy walrus]

BTW you wanna look at my quip in the affiliate chat in NoD?

Found a "bug" on DL page.

[broken coyote]

I passed it along to nathan. i dont have access to that stuffs

[hardy walrus]

[tough crane]

Hey guys, as I mentioned several times I've implemented multistreaming alerts/polls/chat and activity feed working with StreamElements. It is a framework to help create multistream-able overlays and docks and it is now ready to be beta tested so I'm looking for developers wanting to try it and ginving me much needed feedback. 🤗 Who wants to be part of the beta?

[flat swan]

hey it would be super cool if the alerts we could use folders for different types of alerts

[prime tapir]

Update: I brought up the broken store:read scope through email, they said they won't fix it, and just removed it from the docs.

Anyone know how to check pause state when using OAuth?

[severe shell]

There are other invalid scopes to be removed as well, I will try to reach them again to merge my PR with only the correct scopes

[severe shell]

Check here, you can do a GET request instead of a PUT (and consequently, no body and authorization oauth)
#dev-chat message

Response is

{
  "muted": false,
  "paused": false
}

[prime tapir]

tyvm

[azure thistle]

Is there a way to create fake events the same way the emulate panel does, but from within widget's code instead?

[soft kiln]

any tips on how to overwrite fieldData in JS and reload the css

to use the {{somevariable}} in css

[soft kiln]

emulate stuff here
}};
 window.dispatchEvent(emulateEvent); ```

[potent halo]

I feel like that's the xy problem

you can manipulate css from js at runtime. Why would you need to reload it

[soft kiln]

im updating the field data in js but css just dont wanna inherit it

[potent halo]

so? update the css from js at the same time you update the field data.

[sand void]

hi, sorry for my english (I'm italian), I hope this is the right section. I've done a simple system with SE API and I'm using the JWT token. Does it expire? Because the system stopped to work and the first thing I tried to do was to check the JWT token and I saw that copying it from the SE Control Panel was that it was different from the one I've saved in my website constants. With the new one the system works perfectly.

So, it was a special situation or it normally expires? And if it expires, after how many days?

Thanks in advance for the answer ❤️

[severe shell]

It does, usually 30 days after being generated. After being generated, not the time you copied.
You can check the expiry date on https://jwt.io, you will see a key called "exp", paste your jwt in there and just hover the cursor to "exp" value to show the date in human format.

[sand void]

Thanks a lot, and is there a way to automatically refresh it or I have to "set the date on the calendar" every time and do it manually? If the answer is "manually" maybe is better to try to implement the OAuth version with the refresh token etc...

[severe shell]

Only manually. 😦

[sand void]

Ok @severe shell, you are very kind! I'll try to implement the OAuth version ❤️

@severe shell sorry, the last thing, is there a way to use Loyalty system (or something like that with points, etc...) also for Youtube?

[severe shell]

No, Youtube doesn't have support for Loyalty system, unfortunately.

[sand void]

ok super thanks again, have a nice day ❤️

[naive mesa]

what's the proper way to interpolate text for a TTS composite field in the elements editor? applyHtmlElementTextContent seems like a roundabout way to do it given I want to play audio and not update displayed text. interpolateTextContentComponents works but it provides an array rather than the fully formed input field. I feel like I'm missing something obvious.

[severe shell]

I would suggest that you check in #elements-editor-widgets20 as it is focused in Elements editor (and staff answers in there)

[silver fox]

hi guys a question, people who creates widgets do they code them directly on stream elements or on visual studio?
Im learning css and java but i cant understand how usually people work on widgets

[naive mesa]

for custom widgets in the overlays editor, I just did the JS in the editor. for the newer elements beta feature, I have my own hosted node.js server that I can call to freely. you can technically use whatever language you want at that point, but you still need a piece of JS code that will run the element inside of streamelements. it would depend on how complicated of a widget you're building, but it will all come back to JS in the end.

[potent halo]

1. Not Java. It's JavaScript.
2. Both is possible. In StreamElements you can directly run them tho. With VSC you either need to copy over stuff or use the local devkit

[silver fox]

Yes JavaScript sorry 😴.
I’m trying to make chat boxes, goal bars with unique designs and animations that will match my overlays, but I don’t quite understand how my workflow should be.

My workflows is:

1)I design my stuff on illustrator,
2)then I move on codepen ( I like it because it shows me the preview live, but I guess visual studio does the same 😭)to do the code, and test the animations
3) copy everything on stream elements

Is this process correct?

[hardy walrus]

More or less yeah.

[strong geyser]

hi @se.staff

[keen ivy]

Hello, after half a year (or so ) asking again, if the API endpoints for giveaways will ever be fixed? (current issue is unable to list more users than 100 and unable to paginate the results - limit & offset values)

[severe shell]

It was in December, I remember that. I reported the issue the same day you informed, but didn't get any response, unfortunately.
I will try to send that again.

[keen ivy]

Thank you 😄

[ancient lynx]

Hi! Is there any way using the SE widget editor to accept OAuth requests? I mean, I am developing a server that will require the user to connect using it's account, I was thinking if there was any way I could create a widget in SE editor but I am not sure if it's possible to use OAuth inside it, any idea maybe?

[severe shell]

Nope, the best option would be send to your website to do the oauth and then you can generate some kind of code to use in a widget. Using oAuth would require a redirect URI and you won't be able to add the redirect uri inside the widget.

[ancient lynx]

And I guess there is no way to redirect from the widget itself to my website right? So I would need to send the user to the website, authorize it, get the code and paste it into a field maybe? And use that code to authorize my request, am I right?

[severe shell]

Yep, you can do something like the image

[ancient lynx]

Sounds good, thanks for your help as alway!

[acoustic dune]

Hello, I am trying to share an overlay with a friend that I made for her stream. I don't want to be an editor on her stream, I just want to share a link with her that I made in the stream elements overlay editor. How do I make a link similar to the ones that are in those one click setups?

I've tried the "/dashboard/overlay/" substitution trick, and that doesn't seem to work.

[severe shell]

One-click sharing link was for companies who sell widgets, SE partners or people who shared widgets with the community (the ones from ⁠#widget-share). It is not available anymore using Overlays (but you can have a sharing link if you use Elements). Maybe this one here (option 4) would be a good one for you:
#community-helpdesk message

[acoustic dune]

Thank you very much. I think the easiest way will just be to get her to add me as an editor... I do a lot for her already on stream, I just don't like being given permission or doing more than I have to. I know... I'm weird.

Just feel responsible.

Anyhow, thank you very much for the info.

Oh, quick question, if you don't mind @severe shell - If you "publish" an Element, does that mean it is shared with the community? or that it is just live?

in elements

[severe shell]

I'm not very used with Elements (I just used it to tests before), but when you enable "public sharing", users with the URL will be able to install it or customize the widget.
If you don't enable it, it will be valid only for your account. You can see that in View option (top right) > Publisher

[acoustic dune]

OK.TYVM! And sorry if this wasn't the place to ask questions like this.

[severe shell]

But there isn't a place that people will find your widget

[severe shell]

No worries, your question is fine. But if you have questions related to developing using Elements, I will suggest that you ask that in #elements-editor-widgets20. It is better because you can have the staff answering and fixing issues if needed.

[acoustic dune]

Will do!

[devout fern]

if I didn't check out my oauth email before it expired do I have to send another email to get a client id and secret or is there a developer panel where I can grab that information?

[severe shell]

You will have to send another email, but I believe you can just open a ticket for that

[uneven oxide]

@devout fern ⤵️

If you need to fill out a support ticket, please use the command !ticket in chat, following the subject of your issue! For example, please type "!ticket My chatbot isn't working", and then follow the prompts from our bot!

[strong geyser]

@se.memers

[quick bay]

Is it possible to create a widget that return the amount of user that boost a specific Discord server?

[hardy walrus]

Tentively I'd say yes but how is a "no idea".

[devout fern]

is it tips:read scope in order to connect to the ws and listen for streamelements tips?

[severe shell]

Well, you would need to get this information from Discord API and work with the permissions and scopes.
This endpoint gives you all the roles available in a discord server, so you can take note of the role id
https://discord.com/api/v10/guilds/SERVER_ID/roles

This endpoint will show how many members there is in each role, just check the role id that is related to users who boosted the server:
https://discord.com/api/v9/guilds/SERVER_ID/roles/member-counts

I don't know how those endpoints work and which type of authorization they require, you have to check the discord documentation.

[severe shell]

If you referring to socket.io connection, channel:read is enough to listen to tips.
It seems the scopes are valid only for API requests.

[quick bay]

Thank you, JS is pretty new for me, I'm investigating into Discord API and bots.

[soft echo]

Hello everyone! I have a question.

now I am looking for a goal bar for Cheer, Subscribe
For example, is there anything that if Cheer reaches its goal, the goal bar will reset and start from 0 again?

Many of them continue counting past 100% once the goal is reached. I am looking for something that doesn't 🤔

[potent halo]

Sounds like an easy modification. Look for where the percent get set. Most likely this function will get some floating point value.
In this case (imagine input being x) you could just throw something like x = x % 1 before the value gets turned into a string and your good to go.
But this is just one way this could be done. There are way to many to list. Easiest may be to find a widget you like and write the name and where you found it in here.
Oh also, I'm guessing wrong channel for just getting a finished widget recommended

[spring mulch]

Anyone knows why my "!enter" command for the giveaways doesnt stay "on"?

[uncut pendant]

hey man my stream elements isnt working in youtube chat but it is in twitch chat

[ancient lynx]

Hi there! Does anyone know if this is expected behavoir? there is a log where you can see a lot of info for the account, included the apiToken, and it's not coming from my custom widget, it says it's vendor.js

[severe shell]

It is expected

[ancient lynx]

Is this being shown only to myself because I have a custom widget or is it something that happens to anyone?

[severe shell]

It appears only in your account, it can only be seen in your overlay editor.
If you share your overlay with anyone else, they will see their own info.

[ancient lynx]

Isn't that something a little weird? I mean we do have email, apiToken, last login and some info like that there, I just want to make sure it's not something that could compromise the acc security

[severe shell]

Not weird at all, if you are on your account, you have info of your account. You're not seeing info of another person (unless you have permissions for that)

[scarlet agate]

hey! I created a custom widget that display the session's subs count, but it doesn't refresh automatically for some reason. It updates automatically on SE but not in OBS. In order to update it I have to manually refresh the OBS browser source, which I don't have to do with other counters that I have. This is what I'm using for updating the sub count on the widget:

      let data=obj["detail"]["session"]["data"];
      rsub = data["subscriber-resub-session"]["count"];
      nsub = data["subscriber-new-session"]["count"];
      gsub = data["subscriber-gifted-session"]["count"];

      currentAmount = rsub + nsub;
      //currentAmount = 2;
      var percent = currentAmount * (100 / totalAmount);

    setProgress(percent);
    document.getElementById('progress-text').textContent = currentAmount + ' / ' + totalAmount;
});```

am I doing something wrong with the code?

[potent halo]

Code looks weird but fine. Be sure to save your overlay before expecting changes in obs. If you still have issues, you might want to debug obs.

[potent halo]

No discord links possible so just look for "debug obs" in this channel

[scarlet agate]

thank you @potent halo . I will do that but not right now as I cannot close and re-launch OBS at the moment. I have a related question, though. I suspect the reason the code does not update in OBS is because the browser source does not refresh itself, somehow. Could this be related to my html or other parts of my javascript code? In OBS forums I found this:

Browser sources are webpages, and webpages are supposed to auto refresh themselves, if they intend to update often. This is something the webpage creator has to implement. If you're the author yourself, add <meta http-equiv="refresh" content="1200" > to the html head part of your page.

Is this (or something similar) something that I should have in my html code? I got all my code from chatGPT so I have no idea what to do

[potent halo]

I normally don't bash on other's trying to help, but I do find that statement extremely misleading..
Yes browser sources are web pages, but they absolutely do not need to refresh themselves.
You can manipulate the dom with js normally. For example.. Google would need to refresh the whole page every time you enter a single letter if that statement were true.

[scarlet agate]

@potent halo I see. Well, I just checked and the alert does not update automatically if I have it open in a web browser, for example. As far as I understand, the javascript function that I pasted above should update the subscriber count when a subscription event is received... the text is updated, the progress bar is updated... am I failing to "render" the html document or something? Otherwise I don't understand why the widget is not updating outside of the streamelements widget editor

I think it may also not be updating in the widget editor either

[severe shell]

Do you see any error in the browser console? Usually that informs if there is any problem. But only based on your code, I would say that maybe totalAmount is not defined.
Also, that widget will run every time onEventReceived is triggered (which means any event, like every chat message, for example)

[potent halo]

Finally back from work.

[potent halo]

Also @severe shell,
Had time to check a bit deeper now and he seems to have just copy pasted code from onWidgetLoad -.-
onWidgetLoad is not the same as onEventReceived. The returned objects differ somewhat.
In your case onEventReceived's obj does not have obj["detail"]["session"]. Therefore undefined has no field data.
Therefore TypeError: Cannot read properties of undefined (reading 'data')

in that case (and assuming nothing else is wrong) replacing the first two lines with this should fix it.

window.addEventListener('onSessionUpdate', function (obj) {
      let data=obj["detail"]["session"];

-# Note: Due to complexity of object in onSessionUpdate a onEventReceived event listener will be the best way to use for most of the scenarios (easier to implement and better performance). This is just a quick fix and not a solid solution.

[quick bay]

Is it possible to set global variables to avoid calling the same API for each widgets?

[severe shell]

Each widget works independently, but you can save the value of the API call using SE_API.store.set() and retrieve the value using SE_API.store.get(). That value can be read by any widget.
https://dev.streamelements.com/docs/api-docs/775038fd4f4a9-stream-elements-custom-widgets#se-api

It would work as a global variable in your case

[quick bay]

Thank you 🙂

[scarlet agate]

thank you very much @severe shell and @potent halo . I understand what the error was and I have updated the code. I will test it on Wednesday and will let you know if it works. Thanks!!

[lavish bolt]

is there someone good at dev i need help

[potent halo]

And another reminder..
Don't ask to ask just ask

[severe shell]

I always love to see that!
As an example, I'm in a (kind of) conversation with a person, going to the third day... He sends single messages, like "how are you?", "are you there?", "can you help me?", "can I ask you a question now?"... I still don't have his actual question 😄

[devout axle]

Hi, is the /:channel/levels endpoint working ? I'm trying to use it but i'm getting 404 errors, even when using from the dev docs tester

[naive mesa]

found an interesting bug in the overlay editor. this introduces a $ before the token. removing the $ before the {} actually creates the string correctly for some reason. verified this in firefox and chrome on 2 computers. I use a templated string elsewhere to create a url and it works fine

[hardy walrus]

@wheat kelp ^^

[zenith pond]

Did something change with the events API? seems like they are not coming through correctly and nothing has changed in my app

[severe shell]

That's something expected, you probably have a field data called token.
In overlay editor, when you use { }, it looks for a field data with the name inside of it before running the code (it's something specific for Overlay Editor, not a Javascript thing).
https://dev.streamelements.com/docs/widgets/ec99002224803-code-editor#fields

Some suggestions to fix that, you can choose any of them:

1 - Change the variable name in your JS:

const tokenData = fieldData.token;
[...]
const options = {
  method: 'POST',
  body: JSON.stringify({q: message}),
  headers: {
    'Authorization': `Bearer ${tokenData}`,
    'Content-Type': 'application/json'
  }
};

2 - Change the field data variable in FIELDS

{
  "tokenData": {
    "type": "text", 
    "value":"",
    "label": "Your token"
  }
}

3 - Call the field data by its name directly

[...]
const options = {
  method: 'POST',
  body: JSON.stringify({q: message}),
  headers: {
    'Authorization': `Bearer ${fieldData.token}`,
    'Content-Type': 'application/json'
  }
};

[naive mesa]

ah, had no idea it supported that. thanks

[severe shell]

One more wrong endpoint in the documentation (I wish I had access to fix them). This is the correct one:
https://api.streamelements.com/kappa/v2/bot/:channel/users

[devout axle]

Works better ! Thank you 😊

[glass marten]

hey all, i'm pretty new to all this streaming stuff, but i'm a dev so when i noticed that we can do custom html/css/js elements i went pretty nuts. anyway, i have a few questions about the api since it's not the best documented

1: what does it mean when a custom element is "loaded" (onWidgetLoad)? I can't seem to find a way to load a widget, would this be when you change overlay? can you trigger a load manually from code?

2: is there any way to load image resources from the server? this would streamline a lot of the process since we have the 2gb of space or whatever. the example i saw used a CDN. also, is anything cached? I know CDNs are fast but the main problem i want to avoid is anything "popping in" because it would have to go somewhere to load an image

[severe shell]

#dev-chat message
It is basically when the widget is opened

[severe shell]

You can upload images to Streamelements creating a field and loading it from there.
https://dev.streamelements.com/docs/widgets/ec99002224803-code-editor

You can also load images using fetch request on Javascript or <img> in HTML, for example... It depends on how you want to load them.

[glass marten]

right, i get that, but how is a widget opened? from what i can gather all you can do is hide or lock them, unless you can do it programmatically?

so i guess what i'm wondering is, for example, if I used a heavy js library, it's going to be loading every time the widget opens right? so it might just be better to keep it open all the time? would you use this listener for like if you wanted an animation after switching overlays or something?

[glass marten]

i guess i'm still a little confused by what you actually do with an image-input. does the label represent something (i.e., the name of the image) or it it just whatever you want?

[severe shell]

When you stream, you use a piece of software called OBS. In that program, you have the option to add your camera, images, text, audio files, videos, etc... There is a thing called "Browser source", and that's what you do with the overlays.
Streamelements overlays are webpages. You add the overlay URL to the OBS scene and every time you are using that scene in OBS, the widget is loaded (like when you open a webpage). The similar process from a normal webpage is the "load" event listener (when the webpage is loaded, that event listener is triggered). In Streamelements, it is called "onWidgetLoad" instead.

[glass marten]

ohh, ok. i knew it was a browser source, but I didn't know that. so it would load if you change scenes or something

ohhh i figured out the image thing too

[severe shell]

Yeah, that's the easy way to imagine that. However, OBS has the option to keep the overlay loaded when you change scenes, so it is not always exactly loading again when you do that.
It doesn't mean they will load when you switch, but only the first time (unless you check the option "shutdown when not active")
Think overlays as browser tabs, for example

[severe shell]

Oh great then 🙂

[glass marten]

for anybody who's curious, you set the type in the fields and then you change it from the fields (like serializing fields for the inspector in Unity)

thank you for all the help @severe shell!

[severe shell]

You're welcome, if you have any questions, feel free to ask here

[quick bay]

window.addEventListener('onWidgetLoad', function (obj) {
    channel = obj["detail"]["channel"]["username"];
    updateData();
    setInterval(updateData, timeToRefresh);
});

It seems that setInterval doesn't work or, at least, seems to stop updating after an amount of time. Can someone help me?

[potent halo]

It works.
Made a minimal example and let it run for the time I wrote this message (~4mins i guess):

function a(){console.log("A");}
function b(){console.log("B");}
window.addEventListener('onWidgetLoad', function (obj) {
    setInterval(a, 1000);
});
setInterval(b, 1000);

Any one of the two work btw.
Check your console, probably something else wrong like your updateData.

[quick bay]

I found the bug, I was calling the wrong channel... 😅

[quick bay]

Does SE_API.store.get('***') requires to be async/await?

[severe shell]

Yep, or you can use .then()

[quick bay]

Thank you 🙂

[warm sparrow]

looking for a streamelements/twitch dev that can create a custom overlay for my channel. it will require javascript, + twitch api +maybe stream elements api. possibly web server but hopefully not. pls dm if poss. high experience prob required. willing to hire/pay of course

[grizzled rock]

Does anyone know if it's possible to let the bot show the watchtime in hours instead of month/days/hours? I tried something like this but I failed. Also tried with ${customapi} but I don't know exactly if it's possible to get the watchtime in hours from the StreamElements-API

[severe shell]

user.time_online won't give a number as a response, so you can't use math.
There is no way to choose the result only in hours, it will always try to use the most approximated option. After 24 hours will show 1 day, for example.

[low oasis]

Does someone have experience with ultrawide monitors streaming? Because i want to stream from 5120x1440 to 1920x1080 so that there is no blackbars or anything. Can't figure out how to do it... I have base canvas to my resolution and output to 1920x1080, but it looks horrible in my obs

[quick bay]

Does the chatbot also allows custom javascript code like overlay does?

[hardy walrus]

I'd say no but would need context.

[quick bay]

For example, I would like to use some API that requiers auth and things. Like the only possible things is $customapi but auth aren't possible.

I think the only possible way is by developing a bridge to be able to use $customapi.

Does $customapi accept variables?

[hardy walrus]

That would indeed be the case unless said API allows inserting the cridentialsin the link.

Assuming you mean somethign like this https://decapi.me/twitch/accountage/decicus?precision=7&lang=no yes.

Or if you mean SE variables then yes to that as well.

[quick bay]

${customapi ://example/search?q=$(queryescape ${1:})}

Something like this.

[hardy walrus]

Yes that would work in theory.

[quick bay]

Thank you 🙂

[broken coyote]

My main monitor is a 5120x1440 and I use a 1920x1080 canvas. I crop the sides of my game capture so it’s a 1920x1080 window

[azure pier]

I am currently trying to develop an incredibly botched way to spent Loyalty Points on in-game events. I am currently achieving this with the $(customapi) command with success, sending API calls to my server.

Now I would like to also add a pop-up animation when this happens, and I have already scrolled through this chat and saw a custom widget API, but I fail to understand how it works.

I have created a Custom widget in my overlay, and have found this snippet of code:
#dev-chat message

But I dont understand how to make this appear a text. It only logs the event in the console of the overlay

Do I understand it right that I am able to send data from outside to this Custom widget and have it appear in the overlay?

[severe shell]

You don't need to send data from a custom widget to anywhere else, you can use the custom widget to show the information.
If you already have the information on your console, you just need to send it to the HTML.

window.addEventListener('onEventReceived', (obj) => {
  console.log(obj);
  const data = obj.etc.etc.etcetc; // the data you want from the object
  document.querySelector("#yourDivName").innerText = data; // The info will appear in the div
})

In HTML tab, you just need to create a div with the corresponding id:

<div id="yourDivName"></div>

Of course, you will have to filter the data you are receiving from onEventReceived, otherwise it will try to run on each event (chat message, subscription, commands, etc)

[azure pier]

Thanks for the response. Is the code snipped I have linked the right method to send data to this widget, or is there a better way to do so?

[severe shell]

If you are using the fetch from the example on your server, yes, that's the way you can send data from your server to Streamelements widgets.

[azure pier]

https://tenor.com/view/jeff-goldblum-jurassic-park-jurassic-scientist-your-scientists-gif-11921883

This is me right now, I am unsure if I should even do it at this point of bodge

[severe shell]

😄
Well, if you have any specific question or want to give more details about your project, we can try to help 🙂

[azure pier]

Thanks for the offer, but this is beyond help

I am reverse-engineering a Raft mod, trying to integrate it with my own API, sending data to three different endpoints etc.

[azure pier]

Although, I probably need some help understanding how to make the popup behave like an actual popup, giving it some fade in and fade out animations for example

[potent halo]

Unity reverse engineering? So dnspy xD

[azure pier]

Nah, luckily all Raft mods uploaded to the "official" raftmodding site are open source by design

[severe shell]

I think the easiest way is using the animate.css. Add the animate.css lib and a div you want to animate with the class animate__animated in your HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<div id="notification" class="animate__animated"></div>

Then add and remove the fadeIn and fadeOut classes from animate.css:

window.addEventListener('onEventReceived', async (obj) => {
  
  const notification = document.querySelector("#notification");
  const animationInName = "animate__fadeIn";  
  const animationOutName = "animate__fadeOut";  
  
  notification.classList.remove(animationOutName);
  notification.classList.add(animationInName);
  notification.innerText = "YOUR DATA TEXT HERE";

  setTimeout( () => { 
    notification.classList.remove(animationInName);
    notification.classList.add(animationOutName);
  }, 5000); // 5 seconds to fade out
})

More info in https://animate.style/

[devout axle]

Hi, is there a way of getting the name of a widget from javascript ? Or a widget ID

[severe shell]

Widgets don't have ID, only overlays. You can get the overlay ID from this endpoint:
https://api.streamelements.com/kappa/v2/overlays/ACCOUNT_ID?search=OVERLAY_NAME

After getting the overlay ID, you can get the details of the overlay with the widgets in it from this endpoints:
https://api.streamelements.com/kappa/v2/overlays/ACCOUNT_ID/OVERLAY_ID

More info:
https://dev.streamelements.com/docs/api-docs/b642d46bee583-channel
https://dev.streamelements.com/docs/api-docs/af02de52998ec-channel-overlay-id

Actually, widgets have ID, starting from 1 (not uuid) inside the widgets array from the overlay.

[devout axle]

Thank you for the answer ! You're a living documentation 😅 Won't be able to use it for what I wanted to do but i'll find another way 😊

[spice tapir]

Is it possible with the API to get the sponsorship message of the activity feed ?

[tribal zenith]

For custom widgets you could read the name from meta data in the fields object.
While it is good practice to set those fields, they aren't enforced and not all widgets might have it

window.addEventListener('onWidgetLoad', function(obj) { const fieldData = obj.detail.fieldData; console.log('Widget name: ', fieldData.widgetName) });

[severe shell]

Not sure if that will get sponsorship activities (maybe if you can find anything using types=sponsor and types=purchase), but you can check this:
#dev-chat message

[spice tapir]

Thank u !
But what do I do with that ? Like is it for a website , à discord bot ?

[severe shell]

Sorry, didn't get your question. You asked to get sponsorship message using the API, so I sent you an API endpoint for that.

[spice tapir]

Yeah youve answered correctly

But it's another question, like how to do it

[shut pivot]

anyone have an easy process to conver ta working custom widget into a new elements

[severe shell]

There isn't any easy process for that.

[shut pivot]

is everything recreatable if im using every tab of this

how do i add the JS code

to the elements

[shut pivot]

it is possible though right? the capabilities arent downgraded?

[severe shell]

Some things are possible, others aren't. The documentation for the Elements SDK is here:
https://dev.streamelements.com/docs/elements--sdk/9do3bhwlp2fdt-introduction

[shut pivot]

yeah ive skimmed thru it but i dont get how to recreate that JS tab, i guess its all thru composite fileds?

[naive mesa]

your JS will be hosted locally during initial development. that should be explained later in the documentation

[shut pivot]

ok given my app is just sending an event via websockets from my node middleware there should be no issues as long as i figure it out?

or is it incapable

[naive mesa]

that would depend on what you're trying to do. I was able to translate my overlay into an element with fairly minimal effort, but I don't have anything being rendered on screen.

[vital wadi]

I have a custom widget game and I'm saving the high score using the kvstore. All good so far reading and writing data. Im a bit confused on the scope, 1. does each SE user have their own 'bucket'? If I send the widget to someone and the keyname is '1234' for the database, are we writing to the same place? or different because it's different users?

[severe shell]

Yes, each one has its own bucket, so if you send your widget to anyone else, it's expected the data will be created from scratch.
The recommendation is that you create a key related to the widget name, for example. This will ensure you are not overwriting other users data.

[vital wadi]

great, thanks. So another step further...if I wanted to make a leaderboard where I gather everyone's high score, how could that be handled?

[severe shell]

It depends on how the data is structured in your kvstore. Not sure what you need exactly, can you give an example?

[vital wadi]

so everyone's high score is gonna be stored in their own bucket, but I wanna access everyones high score, not just the current users. if 80 people play my game, I wanna be able to list the current top 5 high scores

[old chasm]

im trying to use the api for media share and i put in my JWT token for authentication and it keeps returning forbidden, any way to fix that?

doesnt even work when i paste it into the test panel on the right of the api docs website

[severe shell]

You want to access other users kvstore? That’s not possible.

[severe shell]

Can you send the page you are trying to use the test panel?

[old chasm]

https://dev.streamelements.com/docs/api-docs/27bdcf848f078-channel-queue

[severe shell]

I’ll check that later, if nobody appears for you. Going to sleep right now.

[old chasm]

thanks, all good

[astral marsh]

In the docs there currently are only limited ways to interact with the overlays via API.
Does anyone know if in the future it might be possible to update the code of a overlay via api?
E.g. update CSS/html

[hardy walrus]

If it isn't already the odds are little to none as they're focusing on elements entirely.

[astral marsh]

What are elements? @hardy walrus

[hardy walrus]

https://streamelements.com/dashboard/alerts-and-widgets

[potent halo]

You'll probably need to send your scores to a centralized api in that case. POST the Highscore and GET the Highscore list.

[hardy pumice]

Can someone tell me if JWT Token refresh after some time?

[severe shell]

Yes, 30 days after being generated.

Approximately

[hardy pumice]

E qual é a alternativa?

Se existir

para nao ter que estar sempre a mudar e a atualizar

[severe shell]

There isn’t any, unfortunately.
You could apply to OAuth and use it, however, it doesn’t have the same permissions.
Sadly, we are stuck to manually change the token every time 😞

[analog kelp]

What permissions are different? (just curious)

[severe shell]

I've just tested and it's working with no problems.
Where it says "channel", you should put your account id (maybe you are using the channel name, instead and it returns "Forbidden"). You can find it on the same place where you have your JWT.

[old chasm]

its twitch channel, right?

ohhhh ok ill try account id

[severe shell]

Nope, it is your Streamelements account id, you can find it here:
https://streamelements.com/dashboard/account/channels

[old chasm]

yea i found it

got it, thanks so much!

[severe shell]

I don't know exactly which ones work and which ones don't, I would need to test each one (the documentation doesn't help), but I know you don't have access to /v2/store/, /v2/sessions, for example

[old chasm]

ok now i have a questions about https://dev.streamelements.com/docs/api-docs/7e1b03afc6651-channel-queue-song

deleting a song queue item

oh wait i might see how to

[calm star]

Hello everyone
Despite searching through the history, I've found people with the same problem as me but no solutions...
I want to use the great work of Ix to create Patreon Alerts
I follow the whole procedure when I run the test, patreon tells me that the items are being transmitted (status code 200) but nothing appears in my overlay on StreamElements...
After a few hours of poking around, I'm calling on you...

[severe shell]

I have just tested it and it worked fine on my side, the alert was sent after clicking on "Send test". We are talking about this widget, right?
#widget-share message

Check if you updated the Patreon Secret Webhook ID on jebaited.net.

[pulsar willow]

thank you so much, you've been amazing help

i figured it out!

although would you have a clue as to why the chat pushes through onto the live stream 7-9 seconds later? apart from stream latency

im guessing its just youtube being wonky, i notice that other livestreamers in youtube have the same

[obtuse isle]

No problem. It’s exactly like that. YouTube chat is based on the “polling” system. Aka. API repeating calls. It returns you messages and when you should call again with the “pointer” so next call return you only new messages since the previous call. And that runs in a loop under the hood of streamelements.

[shut turtle]

Heya, how do I add pronouns to a chat widget? Is it something that can be retrieved from the user data?

[severe shell]

There is no data related to pronouns on user data (at least on Twitch and Streamelements)

[shut turtle]

I did see this: https://github.com/zaytri/stream-elements-widgets/blob/main/DynamicChatBubbles/widget.js isn't this retrieving pronouns ?

[potent halo]

Other api

[severe shell]

Oh, a widget from Zaytri, nice. It comes from another API, actually. Each user needs to register itself on it manually

In fact, this widget is available here:
#widget-share message

[hardy walrus]

Wouldn't trust it not being up to date with the repo 😐

[shut turtle]

Ahh okay I see, yeah just took a look at the api which lets you set it. Thanks for the info! 🙂

Yeah i think the git may be up to date

[severe shell]

For sure! 😄

[potent halo]

Also.. search for "alejo" in here. I'm pretty sure I explained the process before

[shut turtle]

Oh yep awesome! Just found it 🙂 Thanks for the quick responses

[red canopy]

hello, where i can get any other badges broadcaster ?

[hardy walrus]

Broadcaster has a single badge though...?

[red canopy]

oh sorry I mean, badge type other than broadcaster

[shut turtle]

https://github.com/Schkullie/Twitch-badges-cheat-sheet

[proud spade]

There's a bunch more

[red canopy]

tysm

[proud spade]

https://www.streamdatabase.com/twitch/global-badges

[shut turtle]

Oh yeah I just found these https://www.streamdatabase.com/twitch/global-badges

[red canopy]

im just struggle to crosscheck any badges

[proud spade]

https://dev.twitch.tv/docs/api/reference/#get-global-chat-badges is probably the best way that will always work and be correct.

[minor root]

Hello dunno if this is the right section. I have a widget on which is a twitch chat for my overlay. Now the chat goes vertical but I was wondering does anyone know any coding to make it so i could possible convert it into a horizontal chat? Like is there a CSS Or HTML code?

[vital wadi]

not sure how your chat is formatted, but in your CSS yeah you can do it

I've asked this question before a while ago but I didn't know enough at the time, so I'm gonna try again. I have a game widget, I save the high scores with kvstore. I want to make a leaderboard on my site that has everyone who plays the games high score. 1. How could I write to a database from SE (that isn't a security risk) and/or 2. read people's kvstore data from my site?

[severe shell]

There is a widget called minimal chat that is horizontal, you can use it or check the code to update yours.

#widget-share message

[severe shell]

If you have the data on your kvstore, and want to have to access it outside the SE overlay, you can use this endpoint:
https://kvstore.streamelements.com/v2/channel/<ACCOUNT_ID>/customWidget
Method: GET
Headers:
Accept: application/json
Authorization: Bearer <JWT_TOKEN> or Authorization: apikey <API_TOKEN>

That will show your entire kvstore.
You cannot read others kvstore, only the one stored in your account.

I mean, unless you have their JWT 😅

[hardy walrus]

Which you should honestly NEVER have but people do trust people like that sometimes 😐

[earnest helm]

can anyone help with a custom command

[potent halo]

from my site
Seems like you already have a server. So just make it so that you post to your server. I already told you that way earlier

[gritty jetty]

im trying to make a custom alert style, with some animations to match another project that i have where by default, all of the html is hidden until an '.active' tag gets added, i want to emulate that in the custom alert but the js doesnt seem to work, i tried making the container have a default opacity of 1, instead of 0, and then it appeared but it didnt do any of the css 'animations' that is should have done and the name isnt replacing. Can i send my code here?

[potent halo]

you could send your code here. Or you could make a minimal reproducible example. That would help us not needing to understand all of your code and you by maybe already finding the issue

[gritty jetty]

fs, let me do that again

i had an image that was a link that was on my website, thats why the bot deleted it
I think that the js is the problem because in theory everything else works, does the js tab in the custom css window act like its own fucntion, or is there a function that i have to call in the tab?

<div class="text-container">
    <div class="image-container">
        <img src="link to image, it works but i cant send links in this channel">
    </div>
    <div>
        <div class="awsome-text-container">
            <span id="username-container"></span>
            is now following!
            <br>
        </div>
    </div>
</div>

.text-container {
  opacity: 1;
  display: flex;
  width: 260px;
  height: 70px;
  background: #ffffff;
  color: #000000;
  border-radius: 12px;
  align-items: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
  /*transform: translateX(-500px);*/
  overflow: hidden;
}

.text-container.active {
  opacity: 0;
  transform: translateX(100px);
}

const container = document.querySelector('text-container');

container.classList.add('raise');
        container.classList.add('active');

        setTimeout(function() {
            container.classList.remove('active');
        }, 5000);
``` the js is just my code, it is after the default code that is there

this is a mre version of it

this is what it looks like with that code, but it just 'pops in' and just stays there, the tag adding doesnt work in js, it does in my other project

[potent halo]

ehm querySelector don't work like taht

you need to add a dot before your class

const container = document.querySelector('.text-container');

@gritty jetty

[gritty jetty]

in the code that i sent, i rushed (i just copied and pasted the selector that was in the default calling '#username-container'). It wasnt like that in my original attempt instead using 'getElementById', however using your change, it does work now, im just going to try on my original attempt to re-try and see if that would work

[potent halo]

getElementById? Using the class tag name? Yeah that would also not work

[gritty jetty]

it works on my project, like

const container = document.querySelector('.container');
const nameElement = document.getElementById('name');
const eventElement = document.getElementById('artists');
``` to select ```html
<div class="container">
<h2 id="name" class="active">Retrieving...</h2>
<h4 id="artists" class="active"></h4>

[potent halo]

Nothing wrong with this snippet

[balmy night]

guys i am having an issue with my js code and i need someone to help me trouble shoot it

[potent halo]

dont ask to ask just ask

[balmy night]

i mean here is the code i have but for some reason the chat disappears after 1 second like it doesnt want to stay

been trying to fix it since yesterday and no clue where the issue is

[gritty jetty]

looks like i rushed it a bit too much..
So basically i rewrote the js in my original one and it seems to be working now, you have been an amazing help, thank you!

[balmy night]

i already gave up on finding the issue since i have absolutely no ide where it is so if someone have an idea on how to fix it let me know

[potent halo]

bruh

[balmy night]

how stupid am i for messing this up!

thanks XD

[potent halo]

np

[balmy night]

ok 2 more question is there a way to make the message allignment go both left and right?

the 2nd question is there a way to turn this into a css

[crude gorge]

maybe using the property clip-path

[hardy pumice]

Is it possible to obtain logs of who gave points through the API?

[severe shell]

Nope

[hardy pumice]

ty ❤️

[fierce solstice]

Hey guys! Im working on a subathon timer for some people and I want to be able to check for new tips. I am looking at the documentation for the API and I am a bit confused as to how the tip get /:channel endpoint is supposed to work. I assume the "after" will be updated to the latest tip I have parsed, but its the other required fields that confuse me.

• email
  what is that supposed to be? the email for the streamelements channel im getting tips from?

• message
  maybe i am dumb, but shouldnt this be returned to me not provided in the get request?

• tz
  what is a timezone number?

• username
  username for what? the stremelements channel im checking tips from?

I tried the following

curl --request GET \
  --url 'https://api.streamelements.com/kappa/v2/tips/[redacted]?offset=0&limit=25&sort=-createdAt&tz=4&username=+[redacted]&email=+[redacted]&after=0&before=1723434062844&message=+' \
  --header 'Accept: application/json; charset=utf-8, application/json' \
  --header 'Authorization: Bearer [redacted]'

and got the response:

{
  "docs": [],
  "totalDocs": 0,
  "offset": 0,
  "limit": 25,
  "totalPages": 1,
  "page": 1,
  "pagingCounter": 1,
  "hasPrevPage": false,
  "hasNextPage": false,
  "prevPage": null,
  "nextPage": null
}

even though this user certianly has recieved tips.

just a bit lost

Unless this isn't the proper way to get incoming tips. I was trying to find some kind of EventSub-like thing in the documentation but maybe I missed it

[severe shell]

Well, the endpoint will list all tips received (defaults to 25 latest ones, 0 being the most recent one)
All of the query parameters are optional (although the documentation says otherwise) and are just filters, the only things you need are the account ID (channel) and the token.
But explaining what they are:

• email: Email of the user who made the tip.
• message: (part of) The message sent by the tipper
• tz: Never understood the reason of this one. I never seen that to make any difference, so I'd just ignore it.
• username: username of whom made the tip

[fierce solstice]

ah good info!

[severe shell]

The response would look like this:

{
  "docs": [
    {
      "donation": {
        "user": {
          "username": "rodrigo",
          "email": "[e-mail]",
          "geo": null
        },
        "message": "Hello this is a message",
        "amount": 15,
        "currency": "BRL"
      },
      "_id": "66b98ad704443bd9efe88a68",
      "channel": "5f2de5dd9a474a2c2dc4d0ab",
      "provider": "paypal",
      "transactionId": "IMPORTED",
      "approved": "allowed",
      "status": "success",
      "deleted": false,
      "createdAt": "2024-08-12T04:08:55.842Z",
      "updatedAt": "2024-08-12T04:08:55.842Z"
    }
  ],
  "totalDocs": 1,
  "offset": 0,
  "limit": 25,
  "totalPages": 1,
  "page": 1,
  "pagingCounter": 1,
  "hasPrevPage": false,
  "hasNextPage": false,
  "prevPage": null,
  "nextPage": null
}

[fierce solstice]

great! is this the proper way to get tips in real time though? i just noticed the websocket thing

[severe shell]

No, but it depends on how you are trying to get the tips, is that in the Streamelements overlay or outside the Streamelements overlay?
If you want to get from a Streamelements overlay, you create a custom widget and monitor for tip-latest, like below:

window.addEventListener('onEventReceived', async (obj) => {
  if(obj.detail.listener !== "tip-latest") return
  console.log(obj)
})```
If outside of Streamelements overlays, you can use socket.io, something like below:
```js
const token = "YOUR_TOKEN";
const socket = io('https://realtime.streamelements.com', { transports: ['websocket'] });

socket.on('connect', onConnect)
socket.on('authenticated', onAuthenticated)
socket.on('event:update', onEventUpdate); 

function onConnect() {
  socket.emit('authenticate', {method: 'jwt', token: token});       
}

function onAuthenticated(data) {
  const { channelId } = data
  console.log(`Successfully connected to channel ${channelId} - Streamelements`);
} 

function onEventUpdate(data) {
  // Your logic here (any follow, tip, subscription, cheer, will be shown here)
  // For tips, you can check if(data.name === "tip-latest")
  console.log(data);
}

[fierce solstice]

from unity! but this will help!

[vital wadi]

Okay. I know, thank you again. The network aspect is not my strength

[tribal obsidian]

do they plan on fixing this? my overlay setup updates a key every few minutes so that its consistent across different overlays but every time it does it blasts hundreds of update events

[severe shell]

It won't be changed, it is by design, all widget emit an event every time there is a new update. Overlays won't receive any updates, unfortunately, due to new Elements

[tribal obsidian]

interesting, how hard is it to port widgets over to an element?

[severe shell]

It is a completely different approach, not similar in any way, so the widget needs to be completely rewritten

[tribal obsidian]

unfortunate

no raw js support in there?

[severe shell]

There is, but it uses the Streamelements SDK
https://dev.streamelements.com/docs/elements--sdk

[tribal obsidian]

oh cool thanks

[inland hearth]

Are there any plans to make the StreamLabs plugin available for Linux versions of OBS Studio?

[severe shell]

I think you meant Streamelements. If so, I believe it isn't any, but you can confirm with a ticket to check directly with the staff

[uneven oxide]

@inland hearth ⤵️

If you need to fill out a support ticket, please use the command !ticket in chat, following the subject of your issue! For example, please type "!ticket My chatbot isn't working", and then follow the prompts from our bot!

[inland hearth]

Boy, that's embarrassing! I sure did.

[spice mountain]

Hey, I'm attempting to write a StreamElements chat command that uses the $(customapi) functionality to make a get call to a URL that returns some text to display.

One of the query parameters in that URL is uptime and I'd like to pass in the value of the StreamElements $(uptime) variable in.

The response I get in chat from the bot is "Unable to make request". I saw in the docs that this can mean that the server is retuning a non-200 response code, but in this case, my server is not even being hit. The request to my URL doesn't ever actually fire.

Does anyone have advice on how to embed the stream's uptime in the URL and avoid the "Unable to make request" error?

Something akin to:

!cmd add !mycommand $(customapi https://usefulinfo . com?uptime=$(uptime))

Happy to create a ticket, but since this may not be a bug and I might just need some advice, I started here.

[severe shell]

Your command looks right, if you open the URL on the browser, it returns the text you expect correctly?

[spice mountain]

It does, minus the replacement that I'm hoping the bot will make for the $(uptime) bit.

Here's the actual, exact command being used:

$(touser), $(urlfetch https://maycbf42n557zb3oqdraffjc3e0afdcp.lambda-url.us-west-1.on.aws/?name=Pett&tag=egwin&region=na&pronoun=His&uptime=$(uptime)&player_name=Pett)

It's a call to an AWS Lambda that makes a call to an external API and smashes it into a readable bit of info to display in Twitch chat, and it uses the stream's uptime to inform the way it slices the data

Thank you much for the help 🙂

[severe shell]

You know the $(uptime) returns <not live> or The stream has been live for X hours X minutes., right? People sometimes think it returns a number or something like that.

[spice mountain]

yep

If you don't see anything wrong, maybe my assumption that it wasn't hitting the server was wrong. I thought that because nothing was showing in the CloudWatch logs attached to my Lambda function, but perhaps I'm mistaken

[severe shell]

Change the $(uptime) to $(queryescape $(uptime)):

$(touser), $(urlfetch https://maycbf42n557zb3oqdraffjc3e0afdcp.lambda-url.us-west-1.on.aws/?name=Pett&tag=egwin&region=na&pronoun=His&uptime=$(queryescape $(uptime))&player_name=Pett)

[spice mountain]

Goat

you

Thank you

[severe shell]

As the uptime returns a string with < and > when not live, the bot gets confused when sending the request

Queryescape handles that 🙂

[spice mountain]

makes sense

[ruby sable]

Howdy, I have a question about widget sharing with the "one click link" installation. Is it still possible to be able to create one click links? If not, is there still a way a can share my overlay widgets in a similar manner?

[hardy walrus]

Not in the sense of how you probably want to do.

"1CL" via overlays is not possible anymore and only those that have previously gotten permission to do so can still do it. You'd need to have the user invite you to share whatever you want to give them.

Elements on the otherhand are possible out of box but custom widgets would need to be redone as per the conversation up a bit with C4ldas.

[ruby sable]

Are we able to send or convert our widget overlays to Elements by chance?

[hardy walrus]

Stuff would need to be converted for this.

There is no "upgrade"

[ruby sable]

Does it have the same capabilities/customizations as overlays?

[hardy walrus]

WIP is about best description.

It doesn't suffer the same "code size" issues that overlays had but can't say anything specifically beyond that.

[ruby sable]

Oh okay gotcha!

[analog kelp]

"code size" issues?

[hardy walrus]

There's a non-specific amount of code that you can put into an overlay before it's unsavable.

this is for all widgets within it.

mainly happens when users dive into variations.

Results in a 413 error.

[analog kelp]

Huh. That seems easier to fix than to make a whole new overlay system... 😉

...how many variations are we talking about here?

[hardy walrus]

That's the non-specific amount unfortunately.

You'll know when it's hit when you click the save button but it doesn't return the indicator in the corner or the console spits out the error.

[analog kelp]

Are we talking tens? Hundreds? Thousands?

[hardy walrus]

Tentatively I'd say less than 50 but it's one of those try it and see.

actually

[analog kelp]

Well I definitely have over 50 alert variations going.

Now I'm curious how close we are to hitting the wall.

[hardy walrus]

It technically covers all the alert types but it's not necessarily a major issue as some of the alerts don't have anything beyond an image/text snippet and one type while the others are "load it all up" with customizations.

[analog kelp]

aha. Ours are fortunately just videos to play back, 95% of the time.

[hardy walrus]

And that's why most people don't really hit the code cap.

It's the ones with transitions/fonts/images across bunch of variations that make it an issue.

[analog kelp]

Time to resize some database columns!

[edgy oak]

Hey, does anyone have any idea why the Tip API doesn't trigger an alert when sent thru a node application but does when ran thru the documentation?

[severe shell]

Tips trigger alert when imported value is set to true on the POST body.

[edgy oak]

imported is indeed true

oh wait

jesus christ

I am so fucking blind

import

[severe shell]

Yeah!

Import

[edgy oak]

had a bit of a stroke when defining the schema from the api page

oops

yeah it works thanks!

[lost sinew]

Hey fellow devs~
i checked the discord and the API but i can't seem to find what i search for...
i would like to add custom fonts to my custom overlays/widgets, the .ttf and .woff files are stored on my webside as files, when i locally grab it with @font-face it works just fine, but it does not when i do the same in the CSS editor on streamlabs... why is that?
i know google fonts work, but the font i want is not available on google fonts
is it even possible to use custom fonts?

[severe shell]

I believe you meant CSS editor on Streamelements.
If you have your font stored on your website and can access it publicly, then you should be able to use it in a custom widget. It works with no issues.

@font-face {
  font-family: 'fontName';
  src: url('https://example.com/fonts/yourFont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'fontName';
}

[lost sinew]

yeah sorry 😄 SE of course!
i do exactly that... yet it does not work.. i don't get why

if i load it in the same way on a local html file, it works

[severe shell]

If you type the URL on a web browser, can you download it?

[lost sinew]

does it have to be a woff2 file?

[lost sinew]

yes

[severe shell]

No, you can use .ttf, .otf...

[lost sinew]

in the same way i have src of img tags, and that works, just not fonts, i dont get it

[severe shell]

If you want to send your CSS for that part, I can try to check if it works on my side

[lost sinew]

mmh.. it has my personal website in the src: don't know if i wanna share that

[severe shell]

Ok, no problem

Well, you can try to host it elsewhere to confirm is not something on the website, maybe

Do you see any errors on the browser console when loading the overlay on SE overlays page?

[lost sinew]

it is not, because the images i use are stored there as well, and they work

[hardy walrus]

If you load the plain overlay link in browser is anything returning in console as an error?

[lost sinew]

ohhhh~
"... from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

any idea on that?

it has no problems with .png or .mp3, just the font file

[severe shell]

That's a CORS issue, you will need to configure your server to allow CORS (Cross-Origin Resource Sharing)

It's something on browsers to prevent requests from a different domain other than the actual web page

[lost sinew]

thanks, will check if my webside host has that option 👍

OMG finally! works now

[severe shell]

Great!!!

[potent halo]

Another penny in the cors labeled piggy bank

[violet tartan]

Inside of Streamelements you have the option to use overlays. Inside of those overlays you can add labels that let you know when a recent stream action has been done (I.E: Recent subscriber on Twitch) and the text on the screen will update to the most recent Twitch follower's name. This is natively possible in Streamelements because you can log in with your Twitch account. There are other websites that will let you know when someone follows you on other platforms and give you an updating label for that just like Streamelements does natively for Twitch. I am looking to implement that updating label from the other websites into a Streamelements overlay.
Tl;Dr - Why won't this link add to Streamelements properly but does in OBS?

[severe shell]

I am looking to implement that updating label from the other websites into a Streamelements overlay.
You can do it using custom widget and developing the widget to connect to the other service (if it is supported). If you give some more information or the piece of code you are trying to add to the custom widget, we can maybe try to help you if it is possible.

[violet tartan]

I've been trying for the better part of 1-2 hours to figure it out via custom widget (I'm not smart enough for this) and using ChatGPT to fill in the blanks on HTML. Can't quite understand what I'm missing. Thank you for your response and even considering this. The link is this:

[severe shell]

Ok, so you have a custom widget already from BotRix and want to add it to Streamelements? That won't work well, really. The best option is to add the BotRix widget as a separated browser source on OBS.
Yeah, you would have two browser sources, but that's expected, as you are dealing with completely different platforms and widgets.

(Also, please edit your previous message and remove the URL) 🙂

[violet tartan]

Yeah that's precisely what I'm trying to do, so what you are saying is that it's not me and it's just not possible right?
I'm attempting to set this up for OBS but for an IRL stream scene. So that all of the overlays would be in a single browser source to not put a lot of strain on my PC since it'll be multistreaming obviously. But now that I think about it, I'll probably just bite the bullet and add another source. I know i'm explaining this poorly, but either way: Thank you so much!

[severe shell]

I understand, having as few browser sources as possible would be the best option. But sometimes that's not possible (or would have too much effort for that) and we have to accept. Especially when we work with different platforms

[lean zealot]

In a custom widget, intended to track subs, if a community sub is gifted (multiple subs), the initial event will be received, and then all the single gifted events will also pour in - how do I best ignore the single ones after?
My first thought was to check if .gifted has a value, but that includes "normal" gift subs (single ones), so those would be ignored as well.
Is my only chance to ignore the communitySub event and then go through all the single events that follow?

[severe shell]

I find kinda annoying working with community gifts in general on Streamelements, to be honest. But if you want just that initial event of the community gift, you can look for these two values:

obj.detail.listener == "subscriber-latest"
obj.detail.event.bulkGifted

window.addEventListener('onEventReceived', obj => {
  // Community Gift
  if(obj.detail.listener == "subscriber-latest" && obj.detail.event.bulkGifted){
    console.log("Community Gift:", obj);
  }
})

But my recommendation is to use Reboot0 Widget Tools library, it's way easier to work with those subscriber gifts:
#dev-chat message

[lean zealot]

Yeah thats what I do, but after the bulkGifted event comes through, there will be the individual gifts coming in - which I wanna skip (as to not count it double)

So I need a way to differentiate between "this gift is from a community bulk gift" and "this is a 'normal' gift"

Ill take a look at the library, thanks!

[severe shell]

Well, maybe that would work, but need more tests:

window.addEventListener('onEventReceived', obj => {
  if(obj.detail.listener == "subscriber-latest") {
    // Community Gift
    if(obj.detail.event.bulkGifted) {
      console.log("Community Gift:", obj);
    }
    
    // Single Gift
    if(obj.detail.event.gifted && !obj.detail.event.isCommunityGift) {
      console.log("Single Gift:", obj);
    }
  }
})

[severe shell]

That's way better! ❤️

[plucky halo]

Hi there,
I've got a question.

I've just noticed that for some reason the bannphrase group API https://api.streamelements.com/kappa/v2 /bot/filters/{channel}/banphrases creates those groups in my channel rather than another channel I manage despite providing their channel ID.

Why is that and is there a way to actually send post commands to their channel?

Thanks in advance
Cheers.

PS: I can read their groups just fine.
PSS: Please tag me in your response, so I'll get a notification.

[severe shell]

Yeah, just tested here and it seems to be a bug.
The channel looks tied to the JWT channel payload value, other than the account ID from the URL, going to report it to staff.

[plucky halo]

Thanks a Lot!

I hope that it's a relatively easy fix.

Is there a way to get feedback once it's fixed?

[severe shell]

Unfortunately, we never receive any information when (or even if) an endpoint was fixed.
My suggestion is just a sad "try again every other week" 😦

[plucky halo]

Alrighty, will do. Thanks a lot. I hope it won't take too long. With bots picking up in pace, it has become a pain to maintain the lists for all channels.

[fierce solstice]

hey there! im trying to connect to the realtime websocket from unity in c#. I am having a strangely difficult time figuring it out (translating from examples ive been given in JS). Do any of you see something glaringly wrong with this?

using Newtonsoft.Json.Linq;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using NativeWebSocket;

public class StreamElements : MonoBehaviour
{
    private WebSocket socket;
    private const string token = "redacted";

    // Start is called before the first frame update
    void Start()
    {
        ConnectToStreamElements();
    }

    // Update is called once per frame
    void Update()
    {
#if !UNITY_WEBGL || UNITY_EDITOR
        socket?.DispatchMessageQueue();
#endif
    }

    private async void ConnectToStreamElements()
    {
        socket = new WebSocket("wss://realtime.streamelements.com");

        socket.OnOpen += () => OnConnect();
        socket.OnMessage += (data) => OnMessage(data);
        socket.OnError += (e) => OnError(e);
        socket.OnClose += (e) => OnClose(e);

        try
        {
            await socket.Connect();
        }
        catch (System.Exception ex)
        {
            Debug.LogError($"WebSocket connection failed: {ex.Message}");
        }
    }

    private void OnConnect()
    {
        Debug.Log("Connected to StreamElements");
        var authMessage = new JObject
        {
            ["method"] = "jwt",
            ["token"] = token
        };
        socket.SendText(authMessage.ToString());
    }

    private void OnMessage(byte[] messagebytes)
    {
        var message = System.Text.Encoding.UTF8.GetString(messagebytes);

        // Handle incoming messages
        Debug.Log($"Message received: {message}");

        var json = JObject.Parse(message);
        var eventType = json["event"]?.ToString();

        if (eventType == "authenticated")
        {
            OnAuthenticated(json["data"]);
        }
        else if (eventType == "event:update")
        {
            OnEventUpdate(json["data"]);
        }
    }

    private void OnAuthenticated(JToken data)
    {
        var channelId = data["channelId"]?.ToString();
        Debug.Log($"Successfully connected to channel {channelId} - StreamElements");
    }

    private void OnEventUpdate(JToken data)
    {
        // Your logic here (any follow, tip, subscription, cheer, will be shown here)
        Debug.Log(data.ToString());
    }

    private void OnError(string message)
    {
        Debug.LogError($"WebSocket Error: {message}");
    }

    private void OnClose(WebSocketCloseCode e)
    {
        Debug.Log($"WebSocket closed with reason: {e}");
    }

    public class StreamElementsSettings : SerializationManager.MEEPSerializable
    {

    }
}

I did notice that in js its
https://realtime.streamelements.com
but the websocket libraries im familiar with (nativewebsocket and websocketsharp) dont accept https which is why i swapped to wss://realtime.streamelements.comIm not familar enough in these areas to know if thats a problem or not

I also just found the documentation for "Astro" while trying to google an example for connecting with websockets. Was i supposed to be using that instead? It says the list of topics is coming soon, which is dreadfully unhelpful

I also tried implemeting that based on the example given on that page as follows:

    void Start()
    {
        ConnectToStreamElements();
    }


    private async void ConnectToStreamElements()
    {
        socket = new WebSocket("wss://astro.streamelements.com");

        socket.OnOpen += () => OnConnect();
        socket.OnMessage += (data) => OnMessage(data);
        socket.OnError += (e) => OnError(e);
        socket.OnClose += (e) => OnClose(e);

        try
        {
            await socket.Connect();
        }
        catch (System.Exception ex)
        {
            Debug.LogError($"WebSocket connection failed: {ex.Message}");
        }
    }

    private void OnConnect()
    {
        Debug.Log("Connected to StreamElements");
        var authMessage = new JObject
        {
            ["type"] = "subscribe",
            ["nonce"] = Guid.NewGuid().ToString(),
            ["data"] = new JObject
            {
                ["topic"] = "channel.follow",
                ["token"] = token,
                ["token_type"] = "jwt"
            }
        };
        socket.SendText(authMessage.ToString());
    }

    private void OnMessage(byte[] messagebytes)
    {
        var message = System.Text.Encoding.UTF8.GetString(messagebytes);

        // Handle incoming messages
        Debug.Log($"Message received: {message}");

        var json = JObject.Parse(message);
        var messageType = json["type"]?.ToString();

        if (messageType == "response")
        {
            OnResponse(json);
        }
        else if (messageType == "message")
        {
            OnNotification(json);
        }
    }

    private void OnResponse(JObject json)
    {
        var error = json["error"]?.ToString();
        if (string.IsNullOrEmpty(error))
        {
            Debug.Log("Successfully subscribed to topic");
        }
        else
        {
            Debug.LogError($"Subscription error: {error}");
        }
    }

(just the relevant parts)
only to be hit with this

ah

I realize now that the example giving "channel.follow" as a topic is a red herring

the only topic seems to be "channel.activities" which covers all the things i need

[fierce solstice]

Now that I have that running I have a question about JWTs. Do they expire? I was assuming no, but then I saw some messages here that would imply otherwise.

I thought I saw mention of a way to refresh them if they expire but I'm having trouble finding that in the documentation.

Would I just be better doing oauth at that point?

[hardy walrus]

6 months

[fierce solstice]

I was planning to have users of my application just paste in their JWT to a form in the app and have it connect.

Its a local application so I thought maybe it wouldn't qualify to use the oauth. Especially since I'd have issues keeping a client secret secret

[hardy walrus]

Other parts of your question no idea.

[fierce solstice]

The intention is for it to be able to run potentially indefinitely without user intervention. Id be surprised if it was 6 months nonstop, but it's not impossible

[hardy walrus]

Unoftunately there would need to be some interaction to "renew" the token.

The only way I know ATM is via the website.

Here specifically https://streamelements.com/dashboard/account/security

[fierce solstice]

I'm aware of that. I was referring to this message specifically #dev-chat message

Where there's implication that you can refresh them from the API

[hardy walrus]

I can ask internally if that method is actually valid.

[fierce solstice]

I could switch to using proper Oauth instead which does allow for token refreshing, but I just wanted to make sure that is necessary and that my use case would even be accepted as I noticed you need to apply for access to it

I also am on a deadline and I don't know how long it would take for an application to be approved. That's my fault though of course

[hardy walrus]

That I can say is a hard no if you're running tight.

[fierce solstice]

If I absolutely need to I can just inform the user their JWT has expired but that would be the last resort if there is no other method I can rely on

[fierce solstice]

I would love to hear more about your findings on this when you get them though! If that method does work out and you can point me to documentation that would rock. I would assume you can't use it on already expired JWTs so I would probably want to refresh early (which is easy to do when you have 6 months before it expires)

I'm just unsure about the logistics of how the expected implementation would be based on that

[hardy walrus]

Officially I won't get an answer until Monday.

Unofficially I can give something in about 20 minutes as go whether or not it does.

[hardy walrus]

@fierce solstice Quick test with what I could do "returns" a "valid" response but quick glance appears to indicate it didn't work as desired.

aka failed sucessfully.

[severe shell]

That doesn't work, the token generated is not a valid token for API requests

[severe shell]

That is because the realtime.streamelements.com is Socket.io, not Websocket
https://socket.io/docs/v4/#what-socketio-is-not

You can try to check the client here:
https://socket.io/docs/v4/#client-implementations

[fierce solstice]

Ah unfortunate. So my best bet it to launch the product with manual JWT refresh and then hopefully update it with proper Oauth in later patches

[fierce solstice]

Is there a reason not to use Astro? Because I got something working there already

[severe shell]

You can use astro, but it is not as completed as realtime at the moment as it is still in development. But if you have everything you need, you can use it with no issues. 🙂

[fierce solstice]

I do also want to point out your documentation specifically says "Websocket" for realtime.streamelements

I will investigate both routes more. Thanks for the information!

[severe shell]

Yeah, the documentation on dev.streamelements.com needs a lot of improvement and fixes... But I don't believe they will change anything in there, because they are moving to docs.streamelements.com

[fierce solstice]

Oh interesting. Noted

[fallow nimbus]

Is it possible to send a tip using the API with media attached?

[pliant scaffold]

Someone help me, my last follow streamelements doesn't work, or is it bugged?

[spare sorrel]

is it possible to change my chat widget's badge to just a text? cause i saw some chat widgets where, instead of the sword badge, its just a "mod", instead of a sub badge, its just "sub", anyone know how is this possible or how to do it.

[shut turtle]

You could conditionally render the text on the widget based on what badge the user has:

let data = obj.detail.event.data;
if (data.badges.type === 'mod') {
    renderBadgeText = 'Moderator'
    // do something, i.e. render MOD text 
 }```

[spare sorrel]

this is js correct? im currently using the premade one that the github provided, where do i put this?

[opaque jetty]

Every Subscribing Alert are now showing & when showing a alert are too delay, anyone say how i can fix this?

[severe shell]

No

[severe shell]

This is the block in your code you have to change:

for (let i = 0; i < data.badges.length; i++) {
  badge = data.badges[i];
  badges += `<img alt="" src="${badge.url}" class="badge ${badge.type}-icon"> `;
}```

You would need to replace the `badges += <img alt...`to use `badge.type` instead,  something like below:
```js
for (let i = 0; i < data.badges.length; i++) {
  badge = data.badges[i];
  badges += `<span class="badge ${badge.type}-icon">${badge.type}</span>`;
}```
You probably will need some tinkering on that, because the text for subs is not only "sub", but "subscriber". Also, there will be some different badges like "twitch-recap-2023" or even "minecraft-15th-anniversary-celebration"

As of today, this is the list of badge.type values:

[opaque jetty]

Every Subscribing Alert are now showing & when showing a alert are too delay, anyone say how i can fix this?

[sinful drum]

Hi Helper/All, i am pretty new to OBS and stream elements (SE.live). i have been trying to setup a overlay from the available one's but when i enter them in a browser link even after an hour nothing pops up (still a black screen). I googled and YT'ed but nothing seem to make it work. I am now here as my last resort to fix this issue

[potent halo]

Virtually infinite possibilities with that much detail but hey...
paste it in a normal browser window. See if anything pops up.
If nothing pops up: Issue with your widget. Look in the browser console and see if you can spot the issue.
If something shows up: Issue in obs. See if custom css blocks it. Otherwise open OBS in debug mode

[sinful drum]

It works in browser as a normal link and behaves as it should be. How to check this custom CSS blocks or not?

[jovial nymph]

hi i could really use some assistance!

[potent halo]

In obs, where you pasted the link, there should be a text field where custom css can be injected in the browser source. Unlikely to happen randomly tho. obs defaults with pretty much safe css.

[potent halo]

Don't ask to ask just ask

[jovial nymph]

im struggling to change the color of my chat in Streamelements, its black and i dont see the option to change it to white. Which is strange because it was white before i made updates to my overlay

[sinful drum]

I can give you SS in sometime of what I'm facing and also the default css that's written

[sinful drum]

@potent halo this is what i am seeing and not able to fig out why it wont pop up in OBS. can you guide me setting up this ?

[hardy walrus]

That wouuld indeed be an issue

[uneven oxide]

The default resolution for StreamElements overlays (theme and custom) is 1920x1080. Please add them in OBS at their full resolution and use CTRL+F to fit to screen if necessary. You can then downscale your stream in OBS settings > Video if you'd like https://i.imgur.com/6bWXxjR.png

[sinful drum]

i did ctrl+F alreadyy and its fit to the screen with 1920*1080. Not sure what is causing this

[hardy walrus]

That image shows 800x600 though

[sinful drum]

idk why but as you can see in the BG its fit to screen

[hardy walrus]

Take the youtube homepage for example.

The browser source properties size is different than the size of what you do when you fit to the above.

[sinful drum]

i ran current logs and this is what i see

12:20:00.966: warning: Found EOI before any SOF, ignoring
12:20:00.966: fatal: No JPEG data found in image
12:20:00.966: Error decoding video
12:20:00.980: [obs-browser: 'Browser'] Error: [Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'none'".

[sinful drum]

i updated to 1920*1080 and still wont work

[potent halo]

Don't know what is wrong so let's debug..

1. Remove the background color directive in obs. Depending on what your widget is doing it might mess with the image.
2. Search in this channel for obs debug. There is a flag that allows for seeing the browser console of obs sources. Let's look at that instead of the obs log

[potent halo]

Default chat or custom widget?

[jovial nymph]

any idea on how to change the color via the SE web browser? i have a subathon coming up and need to fix it before then<3

default chat

[potent halo]

Should be a setting in the settings panel on the left then. Just look through there. You'll find it.
There could also be custom css involved. Something like "text-color" or just "color".

[jovial nymph]

i have no idea how css work, but there doesnt seem to be an option, ive looked for hours

for a setting in the left panel that is

Background color, text stroke color, and Text shadow color

[potent halo]

Text stroke

Rgba(255, 255, 255, xxx) is white

0,0,0,x is black

[jovial nymph]

Text stroke is a outline of some sorts

[potent halo]

Ahh. Well idk then. Tbh I looked myself a sec and you are missing a setting above custom font

Add the chat again and see if it's still missing

[jovial nymph]

Thought the same

No luck

[shut turtle]

It should be here (i added the default chat) :

[jovial nymph]

I shut down my pc

Turning it back on now to see if that reset the page and returned the option to me

Got it! Thanks alot

[sinful drum]

how do i remove the BG color directrives ? and the debug you mentioned is this #dev-chat message?

[potent halo]

1. In obs. You sent a screenshot of this. background-color
2. Yes

[sinful drum]

is it okay now? and sorry for silly questions but i am not sure how to use that mentioned remote debugging to start OBS i tried that in cmd it did not recognise

[potent halo]

css looks right. That didn't fix it?

[sinful drum]

nope still black screen.. i also removed complete CSS to test and that also gives me black screen

[potent halo]

Also a bit clearer directions
#dev-chat message

So in cmd just smth like obs.exe --remote-debugging-port=9000

[sinful drum]

oh like that lemme check that quick

[sinful drum]

same with 9000 port

[potent halo]

cmd not ps

Powershell has slightly different syntax afaik

[sinful drum]

finally opened it

in this debug that overlay works without issue

[potent halo]

But it doesn't show in obs?

Is the browser source hidden?

[sinful drum]

Yeah 😦

[sinful drum]

Nope all default I have

[potent halo]

Only other thing I can think of is that you have some other layer above the widget that's a black screen. Like a game capture or smth

[sinful drum]

That's the only later in that scene I don't have anything else

[potent halo]

Then sry I have no idea what's wrong or how to figure out what's wrong

The widget is fine, obs can render it, your layer settings are fine and there is no other layer blocking it. There is nothing that should prevent the frame from being drawn

Please check your layer settings again. Also visual filters.

[sinful drum]

i am not sure what else i am supposed to check in this case

[violet tartan]

Is there a way inside of StreamElements overlays to display multi-stream alerts? (I.E: In a single overlay display: Twitch Alerts, Kick Alerts, TikTok Alerts, etc..) I know you can solely display Twitch Alerts.

[hardy walrus]

No.

[violet tartan]

Thank you.

[woeful cliff]

Hi there wonderful people~ I was talking to some of the community helpers and they suggested I post this question here.
I saw this widget [linked below] on the widget share and was hoping I could tweak it to be used as a tip tracker instead of for subs.
I tried to get in contact with the original dev but no luck there.
Is there anyone here that can help me with that? It would be greatly appreciated~
(I tried to look at the code myself but I'm a novice so that didn't lead anywhere productive)
#widget-share message

[severe shell]

I think the quickest and easiest way is removing the onEventReceived, adding a onSessionUpdate and replacing any "subscriber" text by "tip".

1. Remove the lines from 1 to 44 in JS tab
2. Replace "subscriber-goal" lines with "tip-goal" (2 occurrences).
3. Add the following at the end of the code:

window.addEventListener('onSessionUpdate', function (obj) {
  console.log("onSessionUpdate:", obj);
  currentPercent = singlePercent * obj.detail.session["tip-goal"].amount;
  
  document.getElementById("currentSubs").innerHTML = obj.detail.session["tip-goal"].amount;
  document.getElementById("progress_bar").style.width = currentPercent + "%";
});

Maybe there is something else to do, not sure. I just did a quick test when editing it.

[potent halo]

I couldn't help myself after seeing the counter stuff.. I rewrote the code a bit.

var fieldData;
var data;

window.addEventListener('onEventReceived', function (obj) {
    if (!obj.detail.event) return;
    if (typeof obj.detail.event.itemId !== "undefined") obj.detail.listener = "redemption-latest";
    const listener = obj.detail.listener.split("-")[0];
    const event = obj.detail.event;

    if (listener === 'tip') {
        currentTips = data["tip-goal"].amount;
        goalTips = fieldData.subgoal;
        newCurrentTips = currentTips + event.amount;
        currentPercent = (newCurrentTips / goalTips) * 100;
        document.getElementById("currentSubs").innerHTML = newCurrentTips;
        document.getElementById("progress_bar").style.width = currentPercent + "%";
        data["tip-goal"].amount = data["tip-goal"].amount + event.amount;
    }  
});

window.addEventListener('onWidgetLoad', function (obj) {
      data = obj.detail.session.data;
    fieldData = obj.detail.fieldData;
    currentTips = data["tip-goal"].amount;
    goalTips = fieldData.subgoal;
    currentPercent = (currentTips / goalTips) * 100;
      document.getElementById("progress_bar").style.width = currentPercent + "%";
    document.getElementById("currentSubs").innerHTML = currentTips;
    for (const x of Array(12).keys()) {
        document.getElementById("progress_" + (x+1)).style.width = (fieldData["sub" + (x+1)] / goalTips)*100  + "%";
    }
});

@severe shell's code is a much simpler solution tho

[severe shell]

But I don't know if there is any side effect 😅

[potent halo]

same here. does the goal update automatically, just not for emulated events?

[severe shell]

Emulating is terrible for goals, it doesn't update the value, the best way to test is adding a tip on Revenue history

[woeful cliff]

I'll try both versions and report back with results if I can~!!

[woeful cliff]

To what line of the original JS code does this replace?

I imagine all but I thought I'd double check

[potent halo]

jup all

[woeful cliff]

In the html, how would I get the counter to say £"currentSubs"? (I know that it just the label and it's referencing the tips)
Just to add context to the number is all~
<div style="float: right; text-align: right;font-weight: bold; font-size: 16pt; color: #fff;"><span id= "currentSubs"></span> {label}</div>

[potent halo]

Put {label} in front and put a £ in the settings panel.
Or just put the £ directly in the html.
So.. {label}<span id= "currentSubs"></span></div>
or.. £<span id= "currentSubs"></span> {label}</div>

[woeful cliff]

I think I understand!

[lost sinew]

sooo... i'm trying to make an overlay for some friends that all do charity streams with the twitch charity tool....
i would like stuff to pop up or change in the overlay when a donation comes in.
but i can't find any charity related variables in the API doc... anyone knows if that is possible even?
a little example: i would like a part of the overlay to start sparkle when a donation comes in. would be even better if i could grab the amount and the name of the twitch user

i checked this: https://dev.streamelements.com/docs/widgets/6707a030af0b9-custom-widget-events#on-event
but i don't see a "charity" event on the eventlistener... :/

even asked chatGPT but hell that thing is freaking useless sometimes.. i need real humans

is this what i would need to use? -> https://dev.twitch.tv/docs/api/reference/#get-charity-campaign

[severe shell]

You will find the charity donations as obj.detail.event.type == "charityCampaignDonation"

[lost sinew]

oh! will try that, thanks!

[severe shell]

The response will be something like this:

{
  "bubbles": false,
  "cancelable": false,
  "cancelBubble": false,
  "composed": false,
  "defaultPrevented": false,
  "detail": {
    "event": {
      "_id": "66ce32541672c9c96c7df50b",
      "activityGroup": "2SqBREJRRv4v5tm1pa4C2SLdsAz",
      "activityId": "66ce32541672c9c96c7df50b",
      "channel": "5f2de5dd9a474a2c2dc4d0ab",
      "createdAt": "2024-08-27T20:08:52.518Z",
      "data": {
        "amount": 6.15,
        "avatar": "https://static-cdn.jtvnw.net/jtv_user_pictures/451dd285-491d-49e0-b1e0-20147f3ab56b-profile_image-300x300.png",
        "currency": "BRL",
        "displayName": "c4ldas",
        "providerId": "28057703",
        "quantity": 0,
        "sourceAmount": 1,
        "sourceCurrency": "EUR",
        "username": "c4ldas"
      },
      "flagged": false,
      "provider": "twitch",
      "sessionEventsCount": 9,
      "type": "charityCampaignDonation",
      "updatedAt": "2024-08-27T20:08:52.518Z"
    },
    "listener": "event",
    "result": undefined
  },
  "eventPhase": 0,
  "isTrusted": false,
  "returnValue": true,
  "timeStamp": 69683.5,
  "type": "onEventReceived"
}

[lost sinew]

will that trigger with the emulated "charity"?

[severe shell]

Yeah, something similar:

[lost sinew]

awesome! works

now i just need to know if that trigger is ACTUALLY the trigger that will come when someone uses twitch charity tool to donate

thanks alot! will look into it

[severe shell]

The one I sent first is a real donation. I have a charity donation setup in my Twitch channel and did 1 euro donation right now to check how would appear on Streamelements.

The screenshot is emulated

[lost sinew]

oh cool, thanks!

faith in humanity: restored
such a kind community here!

[echo night]

Short and quick question (unless specifics are requested).

Do I need to request StreamElements API access to be able to use POST to external API's when a specific chat command is triggered? Ultimately, I am trying to avoid giving tasks to StreamLabs or Nightbot to phase them out. The customapi and similar variables didn't work since they are GET.

(Edit - fixed sentence)

[severe shell]

customapi variable only does a GET request, there is no way to do a POST, there is no relation to Streamelements AP.
Also, you don't need to request anything to SE to use the API.

[echo night]

Thanks! Yeah, I read through and saw that nothing did POST. I hadn't got into the SE API yet, but I flipped over the OAUTH doc and saw it required a request. I didn't even get to the JWT side yet.

Essentially we have a custom game. Chat issues a command to place them into a team. Then their responses throughout the event total up their team score. I was hoping I could get away with it in SE since I know how to do it in the other two.

Example, user types "!joingreen" and it places their user in a database for the green team. All of that team's database updates the end total automatically and shows the top 3 from that team. After joining, they can just type the answer in chat that we expect as the correct input/regex match.

A piece that confused me nicely while researching is that people have discussed using variables like eval, urlfetch, querystring, and etc within StreamElements. One that came up quick from searching was Brandinio. I figured this was a change that was supported temporarily (or maybe not at all?) to encourage users to move away from SL and NB. Nonetheless, I think this answers the direction I have to look for POST. Thanks again!

[hot pollen]

Hey, is it correct that this requires OAuth 2.0 and JWT won't work? https://dev.streamelements.com/docs/api-docs/861a5d5450bbb-channel

Literally every other one I look at accepts JWT

[severe shell]

You can use your JWT for that. The documentation is wrong

[hot pollen]

Alright cool thanks

[hot pollen]

Am I doing something wrong then? I just keep getting "BadRequest" errors

using RestSharp;

var options = new RestClientOptions("https://api.streamelements.com/kappa/v2/activities/<MYCHANNELID>?after=0&before=-9007199254740991&limit=25&mincheer=0&minhost=0&minsub=0&mintip=0&origin=twitch&types=%5Btip%5D");
var client = new RestClient(options);
var request = new RestRequest("");
request.AddHeader("Authorization", "Bearer <MYJWTKEY>");
request.AddHeader("Accept", "application/json; charset=utf-8");

try
{
    var response = await client.GetAsync(request);
    Console.WriteLine("{0}", response.Content);
}
catch (Exception e)
{
    Console.WriteLine(e.ToString());
}

I can get others to work

[severe shell]

change types to just "tip" instead. The documentation says it's an array, but actually it's just a single value. If you want more than tips, you can do &types=tip&types=follow&types=subscriber and so on

Also, after and before needs to be ISO 8601 date, so something like 2020-01-30, for example

[hot pollen]

Alrighty I'll give that a shot

Ah nice that works, thanks!

[hot pollen]

OK got what I needed to work, awesome!
Is there any rate limit or some such I should be avoiding? I'm not requesting every 5 seconds or anything (every 5 minutes currently) but it'd be nice to know I'm not about to lock myself out of the API halfway through my stream ahaha

[severe shell]

Rate limits in APIs are usually sent in response headers. For Streamelements, the rate limits are showin in these ones:

x-ratelimit-limit
x-ratelimit-remaining
x-ratelimit-reset

[hot pollen]

Ah sick OK thanks I'll check that

[surreal robin]

Hey, I've looking for the documentation of Streamelements Custom Code, I'm looking for a way to detect channel redeemtions

[severe shell]

There isn't. SE does not have native support for channel redemptions.
But you can use this widget as an alternative way of generating custom reward redemption events and create another widget (on the same overlay) to read those events.
#dev-chat message

[surreal robin]

Ohh, you are using Twitch websockets right?

[severe shell]

Yeah, the pubsub one

[surreal robin]

Ohh, thank you so much!

[surreal robin]

Actually, I was trying to achieve something similar, but it was weird, I was trying to connect to EventSub, but it required lots of stuff like Oauth and secret... and thigns like that that I didn't get the reason why it was so complicated

Soo this PubSub is like Oauth-less?

Oh my bad, I didn't see this:

apiToken = obj.detail.channel.apiToken
channelId = obj.detail.channel.id

[severe shell]

Well, most of the topics need some authentication. However, there are some (undocumented) ones used by Twitch frontend that don't require authentication (for example, show redemptions on chat when you are not logged in). So I got that topic and used in my code.
The good part is that it works. The bad one is there is no official support and Twitch can change at any moment.

Also, pubsub will be deprecated in April, 14th, but we don't know what will happen with the frontend, maybe another scrapping will be needed 😄

[surreal robin]

Oh, dang it

Well, thanks for the solution! It's helpful and clear, thank you so much!

[left rampart]

Is the "Elements (Beta)" the recommended way to do custom widgets now? The Custom Widget docs say "Overlays (old)".

I like the look of what's possible with the Elements system, but I'm having trouble getting Cors/CSP working with the Live Server in VS Code (the environment recommended by the SE Docs). Any tips would be appreciated.

[hardy walrus]

That's about it. The overlay's system isn't getting any updates as Elements is ghr primary focus.

Though the current docs are probably a big lacking ATM (which we are internally trying to update).

As far as to what you'll need to do to hopefully fix your issuei'll leave that to @severe shell since he's about the best bet with this stuff to my knowledge.

[left rampart]

Thanks. To start, I just wanted to determine if it was worth it to bang my head into the wall over something marked beta, so this answered that.

Based on the console errors, I can tell it's related to this requirement, but the Live Server extension (recommended in the docs) doesn't have a way to set those.