dev-chat

[severe shell]

I would ask that in #elements-editor-widgets20, because that channel is specific for Elements and you will find SE dev staff to help you.
(Un)fortunately, I'm still attached to the old Overlays for a while due to the simplicity and ease of use. 😅

[left rampart]

I'm tempted to do that for this one, too, but I've always griped about the Code Editor for overlays, so I love the idea of Elements

Also, I didn't have that channel, so thanks! 😄

[severe shell]

That's true, although there is a code for local development. Not 100% ideal, but it's possible.
https://github.com/tehbasshunter/localdev

[hardy walrus]

Hopefully my changes I just made don't break anything >.<

(Removed the mentions of hosts as we ain't got that anymore.)

This was not fun btw

[plain estuary]

Hello!
I am working on a stream utility that needs to do some things based on chat messages, is there any way to receive those through a socket connection? I know it's possible with the custom widget events, but it needs to interact with some other things running locally.

[severe shell]

Unfortunately, SE socket doesn't have chat messages events.
If you are using Twitch, you can use Twitch EventSub directly with channel.chat.message subscription (https://dev.twitch.tv/docs/eventsub/eventsub-subscription-types/#channelchatmessage)

[plain estuary]

Sadly, I'm using Youtube. Thanks!

[severe shell]

Oh, that's even worse. Youtube doesn't have sockets, even its chat messages are obtained by pooling from time to time

[plain estuary]

Are the chat events still sent through the widget events? I might be able to make something work with that. The lack of a socket youtube API was what led me to streamelements in the first place haha

[severe shell]

Yes.
Also, I can see in the overlay there is a GET request to https://api.streamelements.com/kappa/v2/widgets/<ACCOUNT_ID>/youtube-chat, but as I'm not live, it doesn't work (Youtube chat only exists when you are publicly live).
You can check that request (on browser console, network tab) to create your own and see if you can work on it directly. You can see the chat format here: #dev-chat message

[plain estuary]

Oh that's a huge help, thanks!

[obtuse isle]

Hey look my resource getting used

[rigid dome]

Ive had a few people contact me today saying gifted sub events arent registering with the widget theyre using (after working fine yesterday).

How do you guys generally handle an issue like this?

Is that just a hiccup you wait out? Is it on stream elements end? Twitchs end? My code end?

Any advice would be appreciated. Thanks!

[pulsar willow]

hey i stream on ps5 on twitch and i was wondering how do i do an overlay ?

[potent halo]

Personally, I do a few things and stopping at the first that resolves it.
I first check if it local testing still works (rules out breaking api changes; for widgets this means emulating in se editor)
Then obs testing. Same as above but obs with debug flag. (doing this because obs' chromium sometimes differs)
Since my widgets are not public and the people I share them with are trusted I usually just debug with them at this point.
This sometimes shows actual issues with unexpected data or edge-cases. Though, as you already mentioned, mostly it's just hiccups with some connection.

[potent halo]

There is an article on that from twitch. I suggest you read that.
"Streaming from your PlayStation 5 on Twitch"

[pulsar willow]

ok thanks!

[obtuse isle]

@severe shell do you possibly know if YouTube overlays not receiving events for the message deletes is known issue? Or is it something of "oh we know but we do not care" at all since a long time. I'm asking cause I am implementing deleted messages on twitch end for my custom merged chat but I would like to as well do that for YouTube considering that YouTube people can just redact messages themselves without mod actions. I kind of ignored this before as I did not care but now after seeing that people are actually using that feature I would like to reflect it in my chat.

Migrating to the elements is not an option for me cause I do not like going thought the hassle of hello world and being forced to host stuff or install stuff to just be able to have it run locally

[severe shell]

I have no idea, to be honest, I don't use Youtube live. But I can see the original Youtube LiveChatMessages API has a "messageDeletedDetails" in the JSON response when the type is "messageDeletedEvent". Maybe SE devs just didn't include it, not sure. If that is true, we can forget that option because Overlays won't receive any updates anymore 😦

Honestly, I would try to open a ticket and see if that question can be forwarded to the dev team. Probably they will suggest that you post your question here, but I would try that anyway.

[obtuse isle]

Last time I asked about this I got "left on read" with no response about me not receiving those events.

but please ask. This is something that is weirdly used incredibly often.

[severe shell]

Most of my dev questions have the same results... 😦

[obtuse isle]

I would migrate to elements if they would have options to just have html/css/js editors on the website. Lack of that and being forced to run whole toolkit just for little thing is a big feature killer for me.

[severe shell]

I meant, "if I were you, I would try to open a ticket" 😅

[obtuse isle]

ahh... on the "website"

fine. Yolo.

[hardy walrus]

You can do it here as well. Not just the website.

Albiet you need your AccountID for it but ¯_(ツ)_/¯

[obtuse isle]

First I will try to snoop around https://api.streamelements.com/kappa/v2/widgets/<ACCOUNT_ID>/youtube-chat and see if it by any chance gets the "events" about message deletes. If it does I will just implement events myself. It be pain but worth trying. If that fails... ticket.

Update: No event related to deleted messages is being send over the api endpoint.

[quick harbor]

Does anyone know how much information can be stored in StreamElement storage?
im thinking of making a card game, and would love to retain a list of card id they pulled on the last stream

[lean zealot]

Hey there, running a custom widget to track subs/bits/donos with se-tools from Reboot0.

Since today (or maybe a few day?), the onSubBomb event also triggers for every receiver (Normally only received in onCommunityGift, which I dont even have in my code as I dont care about them), which means Im basically counting every subbomb double.
See screenshot - I save a raw object of everything that I save.

Any idea for a fix? or at least a bandaid? This is during a subathon and we are kinda fucked rn

[rigid dome]

So since yesterday, ive had multiple people having issues with gifted subs. Did something change in stream elements or twitch api or something?

[still juniper]

Not on Twitch's side afaik

[tribal zenith]

this seems to be on SE's end. When replaying subbomb events from the dashboard, the amount says 0 and the isCommunityGift flag is missing.
also it seems like the dashboard keeps on loading the recipients too as it can't match them either
This might be a temporary bug, so I'm afraid there isn't much I can fix now without more info for the cause or live data

[lean zealot]

Alright, thanks for the info

[tribal zenith]

they might be testing a new event format? at least I never saw this structure or event type before

[lean zealot]

If theres any data we can provide from live, tell us how and we can

[tribal zenith]

you could just try logging live events to help analyze the possibly new (?) structure
window.addEventListener('onEventReceived', function(obj) { console.log('onEventReceived: ', JSON.stringify(obj.detail)) })

[lean zealot]

Can I DM you the logs of that? Dont wanna spam logs here, espc if it has usernames etc

[tribal zenith]

yeah, sure

[dark blaze]

https://github.com/StreamElements/elements-sdk-examples/tree/master/subathon
Hey, is there someone who knows how I could change the Code in widget-main, so my Subathon Counter always counts the time for received donations even if the timer is paused? For example: I stop the timer when I am going to sleep, but I want subs and donations to count even if the timer is not running. I already tried editing parts of the code, but my knowledge is way to short to get it to work

[tribal zenith]

line 204 probably. you can comment it out to test

[dark blaze]

I already changed line 204 into this
let state = window.widget.persistentStorage.getValue({ key: "state" });
if (state != "play" && state != "pause") return;
but I think there are more settings, blocking the time to count upwards or I have done something wrong in my code

[tribal zenith]

that logic seems to contradict itself. you can just comment the original line out

[dark blaze]

I even talked to some programmers and tried to fix the line but I cant get it running as it should

[tribal zenith]

from a quick glance, I would say line 204 and lines 291-310 are responsible for checking a state.
Comment out line 204 and lines 300-305. Though you probably can't pause it at all then
Actually there might be more logic in the other files as well. You're probably better off asking that in #elements-editor-widgets20

[dark blaze]

I actually got it running after working for 3 hours with 2 other programmers, that helped me. It was a huge pain but it's working now thank you for your help!

[severe shell]

The staff just posted an information about a change in #announcements
@rigid dome also have a look
@tribal zenith not sure, but maybe will you need to change your lib?

[lean zealot]

I was already in talks with Reboot0 and he did a fix, Im not sure if its pushed into main yet

But thank you

[opal jolt]

Hello ladies

i am fairly new here, and looking for kind of quick answers, are there docs for API endpoints regarding the point / loyalty system?

[opal jolt]

I found something interesting. But now i wonder why i have unauthorized access:

[glass marten]

What's the deal with the new API? I was going to make a custom widget but it seems like they created an entire new API for the update?? I'm assuming that the old API is obsoleted/deprecated since people are posting their issues here? Is it versioned? The documentation for the new one isn't even done yet...

[severe shell]

The issue people were posting were related to gifted subs, that was changed recently and caused some issues. Other than that, the good and old Overlays part is still working.
What you probably saw was the SDK for the new Elements. Both options are working, however, the Overlays won't receive updates (unfortunately)

The Elements is still in beta and have a dedicated channel for that #elements-editor-widgets20

[severe shell]

Probably you didn't add your token on the request.

[severe shell]

https://dev.streamelements.com/docs/api-docs/ae133ffaf8c1a-personal-access-using-jwt-secert-token-to-access-the-api
YOu can check the API endpoints on the left panel

[scarlet thorn]

does anyone know if theres a way to add a live viewer count

[forest fractal]

Anyway to fix this 😐 support hasn’t fixed it either of them

[severe shell]

This is not a dev question. Only support can fix that for you

[forest fractal]

😭😭😭

Will there only so many tickets I can put it

In*^

[regal steppe]

Hi, do the SE APIs, either v2 or v3 ever return a non 200 response? For example for detecting either user or server error? or are the docs correct in saying that 200 is the only response code?

[severe shell]

They do return other than 200.
Here is a 401 response, for example: #dev-chat message

[regal steppe]

ok, the reason for my question, my app is a nodejs app connecting SE api through a https client, reacting to twitch eventsub notifications and firing off a call to the add points endpoint https://dev.streamelements.com/docs/api-docs/28b81292df03d-channel-user-amount which only shows a 200 response. There seems to be something wrong in my code, which i am tracing, but my webclient provides a promise based on response success/error, so if errors return a 200 i need to adjust my logic 🙂

[opal jolt]

I actually did, and somehow the request worked completely fine when doing it trough postman

But I figured it out, so all good

[tribal zenith]

the subbomb changes should be on a new version on main now, but no need to change anything if you're using the hosted script
should you notice any new issues with changed data structures, let me know 😄

[severe shell]

Unfortunately, the API documentation is very incomplete.
My suggestion is that you go to SE dashboard, open browser DevTools and add points manually to an user.
You’ll see the endpoint request in Network tab and how it is structured, so you can replicate it for your case.

[left rampart]

I have a few custom widgets which are no longer appearing when they are loaded. There are no console errors, and weirdly, if I edit any field of the widgets, they appear and work perfectly fine (until you refresh and it disappears again). These are previously working widgets with no changes made to the code.

Any thoughts?

[severe shell]

Ohhh, so it seems to be general... I thought it was a bug with my browser or some extension I was using. Good to know, I'm going to report to the devs

[foggy cloud]

Hi guys is there a way to import / export quotes from the ! command? (hope that is the right channel to ask that question :-))

[hardy walrus]

Unfortunately no and this is a very much desired thing mainly being an outright viewable list.

Atm it's just using the variables to see the list 1 quote at a time.

[foggy cloud]

makes me not want to use it anymore and get this feature somewhere else tbh

[hardy walrus]

I'd need to look for the message somewhere in the server but there is another "quote host" via a custom API that's a bit more open and friendly but requires about an equal amount of work that you'd do "extracting" your current quotes.

#dev-chat message

If you have a streamdeck you can make it a bit more quicker.

[rigid dome]

thanks for pointing out the announcement!

I'm still a bit confused about how to properly implement this.
when i emulate community subs, it works just fine, but people are still reporting that it's not working on real gifted subs?
are the emulated events not set up the same as the live events?

[severe shell]

You have to emulate with "Preview LIVE on stream" option enabled. That way you will see the data more similar to the real ones.

[rigid dome]

I have that option enabled already. Do I have to have stream on, or OBS open or anything else?

[severe shell]

No, no need to be streaming. You can see the object on the browser console during emulation

[rigid dome]

yeah i do, and it still works in the overlay, but people are still having issues with gifted subs 🤔

    console.log(data);
    if(!data.bulkGifted)
    {
      if(!data.tier || data.tier == '1000' || data.tier == 'prime')
      {
      addSubs(1, data.sender? data.sender : user);
      }
      else if (data.tier == '2000')
      {
        addSubs(2, data.sender? data.sender : user);
      }
      else if (data.tier == '3000')
      {
        addSubs(5, data.sender? data.sender : user);
      }
    }
  }

[severe shell]

In this case, I would suggest to monitor the user overlay and wait for a subgift to see how obj is shown

[rigid dome]

that's my code, and it works as intended in overlay.

[obtuse isle]

@rigid dome I learned to not trust the responses from the emulator at all if it comes to writing custom code. If you have a chance try to replay the alerts from the activity feed, this way you get the full on valid object. Emulator likes to lie (I guess cause no one remembers to update the event structure that gets send by emulator)

[mossy charm]

I've been searching High and Low for this solution but I cant find an answer
Im looking for a way for people who tip and cheer to choose which goal they want their donos to goto
This is for an event I want to have multiple options and donos choose which they want to support???

[severe shell]

How would they choose that? There is no option to differentiate any donation or cheer.
Do you have something in mind that could distinct each donation?

[hardy walrus]

LX did something for me I'd need to deep search for that may be of some help.

[severe shell]

The only option I could think of is a message left from the viewer during the donation/cheer

[rigid dome]

So when people get gifted subs, it doesn't register, but when they replay the event, it does register.

What am I missing?

[tribal zenith]

I recently had to learn that replayed events also are different from real events 😅
you can try if (data.gifted && !data.isCommunityGift) to check for gifts

[rigid dome]

I'm so confused. I have some people confirmed its not working and some people confirmed it is working.

I have it set up to read the individual gifted sub events, not the initial gift event.

    console.log(data);
    if(!data.bulkGifted)
    {
      if(!data.tier || data.tier == '1000' || data.tier == 'prime')
      {
      addSubs(1, data.sender? data.sender : user);
      }
      else if (data.tier == '2000')
      {
        addSubs(2, data.sender? data.sender : user);
      }
      else if (data.tier == '3000')
      {
        addSubs(5, data.sender? data.sender : user);
      }
    }
  }

okay scratch that, gifted subs aren't working for anyone. this code works in overlay with emulated or replayed events, but not live events...

[tribal zenith]

maybe you want to take a look at this then: https://reboot0-de.github.io/se-tools/

[rigid dome]

thank you for the extra resources. I'll look into that tonight!

[rare kelp]

Hello everyone. Is possible to use {name} pickying the first name or short name of the viewer? Example: the viewer are "Sir Geralt of Rivia", so the element take only "Sir".

I'm streaming in Youtube, so the names are long, and the Overlays break everytime

[winged jasper]

Did you end up fixing this for yourself? Some update earlier this month broke gifts apparently, I had to come up with a fix myself and a couple other devs did too

[rigid dome]

Yeah, I found a work around that worked for me (so far). I wouldn't mind hearing what others came up with tho, if you're willing to share~

[obtuse isle]

Why not use 4-5 css lines for a better effect? This will convert usernames Sir Geralt of Rivia to Sir Gera... (amount of text will be dependant of width of the element you put name in)

.whateverHoldsUsername {
    width: 100%;
    max-width: YOUR WIDTH HERE; /* If thing you have name in already has width you may not need this property but otherwise its better to figure out max width and set it here */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

[edgy umbra]

Is there a way to go back to older stream labs?

[severe shell]

You would need to ask them.

[edgy umbra]

I mean stream element

sorry

[severe shell]

What do you mean by older Streamelements?

[edgy umbra]

I did updat6e and it does not run well

update does not run well

[severe shell]

SE.Live plugin?

[edgy umbra]

yes

[severe shell]

Hmm, I don't think so. But I recommend that you open a ticket with the staff to be sure.
If that's possible, they can help you on that.

[uneven oxide]

@edgy umbra ⤵️

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!

[edgy umbra]

Thank you

[shut turtle]

My fix for this was to check bulkGifted for a subscriber first, then move onto regular subscribers and only do stuff if isCommunityGift is false 🤔, though this wasn't with the reboot library

[torpid trail]

I have a question how can i get a rotating labels widget for YT? because all of those that i see on google are made for twitch and i kinda want to have a clean overlay and not bombard people.

[severe shell]

Well, you can get a rotating label widget you like and modify the JS code to be based on Youtube events. These are the ones for Youtube, according to the documentation: https://docs.streamelements.com/overlays/custom-widget-events#youtube
Most widgets were made for Twitch because it was the most popular platform.

[severe shell]

I've just received the information that bug is now fixed 🙂

[left rampart]

Glad to hear it! Now I just wish we'd get some level of support responses in the Elements chat. Kinda hard to want to build new things with SE now. 😦

[distant marten]

I'm in the middle of making a new widget and suddenly noticed that upon refresh the entire widget is stretched HUGE horizontally, I go to check my previous widgets that haven't been touched in a while and they are also stretched and broken as if I set the CSS height to no limit...... does anyone know why this might be happening to me 😅 figured I'd ask here before submitting a ticket.

[torpid trail]

I have no idea on how to do that tho lol

[distant marten]

if you're looking for a simple rotating label widget then you probably don't need to implement any JS, if you're just talking png labels or written text im fairly certain streamelements has a simple one under their "static/custom" section in the overlay creator.

[torpid trail]

I tried but couldn't find anything to do it

[distant marten]

this might be what you're talking about (asset rotator)

[torpid trail]

Alright I'll try to see in 5 to 10 mins

[torpid trail]

yeah but this is for images right?

Caue i need the actual data so when someone subs or tips me it changes the name

@distant marten That's an example of what im saying

The image is not important i just need the text to update

and rotate between tips and subscriptions

And instead of latest tip make it only latest

[distant marten]

oooo gotcha. yeah I'm not sure, I've heard that Youtubes API for sharing things like that isn't that great so not a lot of people have made them yet..

[torpid trail]

Yeah cause they can sub anonymously that's why but this works for tips and stuff but i thought so too

Thank's for trying to help tho

[modern citrus]

I feel like I found a pretty serious bug. Seems like there was an update and the position and size aren't actually setting the units on the widget for custom widgets.

[hardy walrus]

If you try to do it in a new overlay does it behave the same way?

[modern citrus]

Yes. Even in the completely new overlay the body is set to values without px at the end of them

[hardy walrus]

Poking people internally.

[severe shell]

So should be the same issue @distant marten was referring to here:
#dev-chat message

[modern citrus]

that makes sense to me looking at her discription. In my case the body is essentially 0 width and 0 height.

[distant marten]

yessss this is exactly why I have been having my issues.... Makes me feel better that it's not just me, I thought it was. hopefully they fix it soon. I frantically changed all of my css already to workaround the bug rip lol

[modern citrus]

yeah I did the same. I've released a lot of widgets to other people so they might not have the same luck.

[hazy furnace]

i think this might be related to the issue above, but this morning, i noticed on stream that one of my custom widgets shifted to the right outside of the bounding box. just testing with this

<style>
  body { text-align: right; } 
</style>
This should be aligned right```
if i use the bounding box to resize, it results in the shift to the right. if i set the widget size using position/size/style menu, save and reload the editor, it appears correctly ![FeelsDankMan](https://cdn.discordapp.com/emojis/796486024112242758.webp?size=128 "FeelsDankMan")

also, resizing via bounding box is behaving a bit strangely

[tough bane]

Hello, let's see if you can help me.

I've had this "tts" for months and it always works correctly, but today it stopped working, the text no longer sounds and I don't know why.

[crisp wagon]

Are anyone else's custom overlays not rendering with a bunch of violates the following Content Security Policy directive errors?

[crisp wagon]

Alright those eventually went away but it's still not rendering--looks like because it's not setting the defined widget height and width as pixels and the browser hates that. Since it's in an iFrame, not sure how I'd override it from OBS.

if I override those css props in chrome to be in px it renders fine

[cerulean basin]

I also have several custom overlays (having a height: 100% container) that got their height misinterpreted (either not filling the iframe or being cut off at the bottom), is this a global change?

Edit: fixed it for now by setting the width and height to 100% for html and body elements.

[pulsar willow]

hey can i play call of duty on a campaign? just wondering because it said no promotion of vulgarity or promotion of violence

[torpid trail]

Does anyone have a rotational label for youtube with the latest subscriber and tipper?

[severe shell]

I've had this "tts" for months and it always works correctly, but today it stopped working, the text no longer sounds and I don't know why.
That doesn't help much, your JS has 300+ lines of code, it will be hard to anyone look into it. The best option would be you check the browser console, run the widget and check for errors, so it can reduce the amount of code to be analysed (sometimes the error is very clear, you can even check by yourself).
At a glance, you don't have the https: in the url. Don't know if that's the issue, though.

[severe shell]

That was reported to the staff, more people are having the same issue

[severe shell]

That was reported to the staff

[crisp wagon]

appreciate it

[tough bane]

You hit the right spot, that was all. I added http: and it works. thank you so much

[hardy walrus]

While our lovely API GURU C4ldas may be the person who would know I'm looking to have a way to call the API to simulate an alert the same way you get clicking the option in the overlay editor.

I currently have a SD plugin that can do calls and using the example of how you can reset goals this is what I have. This particular request type is PUT based on the value but also have GET/PATCH/POST/DELETE as the others.

{"version":"1.0",
"requestType":2,
"url":"https://api.streamelements.com/kappa/v2/sessions/{ACCOUNTID}",
"contentType":"application/json",
"loadFromFiles":false,
"headersFile":"",
"dataFile":"",
"headers":"accept: application/json\nAuthorization: Bearer {JWT TOKEN}",
"data":"{\"tip-goal\":{\"amount\":0}}",
"responseShown":"",
"autorunMinutes":"0",
"autorunType":0,
"titlePrefix":"",
"titleSuffix":"",
"responseFormat":"",
"saveResponseToFile":false,
"responseShownFile":null,
"parseResponse":false,
"responseRegex":"",
"responseRegexFetch":"",
"debugLogging":false,
"treatResponseAsText":true,
"treatResponseAsImage":false,
"showCustomImages":false,
"customImageValue":"",
"matchedImage":"",
"unmatchedImage":"",
"responseImageField":"",
"hideSuccessIndicator":false}```

[jade stump]

In custom widgets, SE is rendering emotes that a sender doesn't have access to, e.g. here someone who has sent no bits is able to type the name of a 100k bit emote, which doesn't show in Twitch chat, but appears rendered in the obj message details:

{
  ...
  "emotes":[{
    "type":"twitch",
    "name":"f1shk1100kBits",
    "id":"emotesv2_4a421d8b668b40d5ae5668fb3eebf938",
    "gif":false,
    "animated":false,
    "urls":{
      "1":"https://static-cdn.jtvnw.net/emoticons/v2/emotesv2_4a421d8b668b40d5ae5668fb3eebf938/static/dark/1.0",
      "2":"https://static-cdn.jtvnw.net/emoticons/v2/emotesv2_4a421d8b668b40d5ae5668fb3eebf938/static/dark/2.0",
      "4":"https://static-cdn.jtvnw.net/emoticons/v2/emotesv2_4a421d8b668b40d5ae5668fb3eebf938/static/dark/3.0"
    },
    "start":0,
    "end":14
  }]
  ...
  "renderedText":"<img src=\"https://static-cdn.jtvnw.net/emoticons/v2/emotesv2_4a421d8b668b40d5ae5668fb3eebf938/static/dark/1.0\" srcset=\"https://static-cdn.jtvnw.net/emoticons/v2/emotesv2_4a421d8b668b40d5ae5668fb3eebf938/static/dark/1.0 1x, https://static-cdn.jtvnw.net/emoticons/v2/emotesv2_4a421d8b668b40d5ae5668fb3eebf938/static/dark/2.0 2x, https://static-cdn.jtvnw.net/emoticons/v2/emotesv2_4a421d8b668b40d5ae5668fb3eebf938/static/dark/3.0 4x\" title=\"f1shk1100kBits\" class=\"emote\">󠀀"
  ...
}

This isn't an isolated issue either, this happens on all channels I've tested, for sub and bit emotes

[dense inlet]

Hello, where do I get paid for the Items Merch I sold at SE? I don't see my items sold any more and didn't get paid

[uneven oxide]

@dense inlet ⤵️

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!

[rare belfry]

hiya
I got several reports of overlay widgets not working properly on some accounts
normally the body tag would have the size with px units, and on the affected accounts there were just numbers on the size

current quick fix is adding this line in css to make them in proper size

html, body
{
      width: 100% !important;
     height: 100% !important; 
}

[distant marten]

this is a bug that came up a few days ago when they updated I guess, hoping they fix it soon but have heard nothing at all from SE ppl about it

[latent valve]

yea also work up to quite a few messages today all related to this issue. Anyone know a way to directly report it to some SE folks ?

[hardy walrus]

Already have but gonna poke a bit harder.

[inner wadi]

already being worked on

[hardy walrus]

@inner wadi @latent valve @distant marten @rare belfry @crisp wagon @cerulean basin @hazy furnace @modern citrus All of you enjoy this lovely ping but issue should be resolved now.

[rare belfry]

thank you!

[latent valve]

sorted now. Thanks

[dim hound]

I'm having some problems with special characters, I haven't made any changes to the widget code lol

[cerulean basin]

Thanks!

[viral patrol]

Charset issues are now fixed. Thanks for report.

[dim hound]

[bold isle]

Hey everyone, seeing issues with most of the widgets and now also alerts. They all give this error in console

Would be nice to have at least some public statement from SE about this btw - many widget developers and their users face this issue so it would be nice to give everyone at least some clarity and calm angry people down a bit

[bold parcel]

Would that have anything to do with this? Been receiving quite a few messages regarding errors during stream:

[severe shell]

If it's related to gifted subs only, an announcement was made here (thecustom code needs to be fixed manually, unfortunatelly):
#announcements message

[bold parcel]

Thank you!! I appreciate that!

[severe shell]

Based on the current code, we just need to change url and data.
Request type is for sure requestType, but I'm not sure which value would represent each request (POST, GET and PUT).

For emulation, these are the things you need:

Request type: POST
URL: https://api.streamelements.com/kappa/v2/channels/{ACCOUNTID}/socket

Data (choose any of them):

Follower:

"{\"event\": \"event:test\",\"data\": {\"listener\": \"follower-latest\",\"event\": {\"name\": \"MrSim\"}}}"

Sub and resub (just change the value of amount):

"{ \"event\":\"event:test\", \"data\":{\"listener\":\"subscriber-latest\" ,\"event\":{\"amount\": 3, \"message\":\"Your message\", \"name\":\"MrSim\" }}}"

Subgift

"{ \"event\": \"event:test\",\"data\":{\"listener\":\"subscriber-latest\", \"event\":{\"amount\":1, \"name\":\"MrSim\", \"sender\":\"MrGifter\", \"gifted\":true }}}"

Community gift

"{ \"event\":\"event:test\", \"data\":{\"listener\":\"subscriber-latest\", \"event\":{\"amount\":10, \"sender\":\"MrGifter\", \"bulkGifted\":true }}}"

Tip

"{ \"event\":\"event:test\", \"data\":{\"listener\":\"tip-latest\", \"event\":{\"amount\":10, \"name\":\"MrTipper\", \"message\":\"Your message\" }}}"

Cheer

"{ \"event\":\"event:test\", \"data\":{\"listener\":\"cheer-latest\", \"event\":{\"amount\":100, \"name\":\"MrCheerer\", \"message\":\"Your message\" }}}"

Raid

"{ \"event\":\"event:test\", \"data\":{\"listener\":\"raid-latest\", \"event\":{\"amount\":3500, \"name\":\"MrRaider\" }}}"

Item store Redemption

"{ \"event\":\"event:test\", \"data\":{\"listener\":\"redemption-latest\", \"event\":{\"item\":\"Some Item\", \"itemId\":\"test\", \"name\":\"MrRaider\", \"message\":\"Your message\" }}}"

Merch redemption

"{ \"event\":\"event:test\", \"data\":{\"listener\":\"merch-latest\", \"event\":{\"amount\":1, \"name\":\"MrRaider\", \"items\": [{\"name\":\"T-Shirt\", \"price"\: 30, \"quantity\":1}] }}}"

Charity

"{ \"event\":\"event:test\", \"data\":{\"listener\":\"charityCampaignDonation-latest\", \"event\":{\"amount\":250, \"name\":\"MrCharitter\", \"message\":\"Your message\" }}}"

It's possible to have some mistypes with quotes and backslash (I was adding them manually), but the keys and values are fine.

[severe shell]

I don't think SE has information of which user has access to which emotes (as Twitch doesn't provide that information in their API), so it will render all emotes in widgets.
But you can check that with a ticket and the support staff can confirm with the devs.

[uneven oxide]

@jade stump ⤵️

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!

[jade stump]

opened an email ticket a few days ago but thanks for your reply!

[hard gazelle]

If I would want to grab the donations made through Streamelements for a Subathon timer, what would be the right way to do it? It would run on a server with no user interaction.

• It sounds like the best way would be to use the realtime websocket endpoint? But this requires OAuth2 authentication, which needs manual approval?
• API polling of /tips/{channel}? Would be less "realtime", but would only require a JWT, right?

Actually, looking at the code snippet in the doc, the line to authenticate via JWT is commented, so should it be possible?
https://dev.streamelements.com/docs/api-docs/5a84cc101a9c5-connecting-via-websocket-using-o-auth2

[hard gazelle]

As realtime doesn't seem to be an actual websocket server, it will probably be hard to connect with anything else than Javascript.
Astro would be a websocket server, do donations come through as "channel activity"?

[severe shell]

You can authenticate to realtime.streamelements.com using the following methods: "jwt", "oauth2" and "apikey" (for apikey you use the overlay token).
Realtime uses socket.io, and there are some languages for client use other than javascript.: https://socket.io/docs/v4/#client-implementations

As for Astro, it doesn't seem it has events triggered for donations at the moment. I would recommend that you use realtime.

[hard gazelle]

Hmm ok, thanks for the response. Unfortunately I try to implement the client in golang and all the modules I found were pretty outdated.

[still juniper]

bear in mind that the socket.io server that SE uses is also very outdated, it's still on v2.2, so you might be lucky in that sense

[hard gazelle]

Oh, that's a good hint, thanks!

[boreal gate]

Hello, I have a problem with the followage command, the following message appears (an error occurred while checking the following period, please try again later)

When I tried to create a custom command, it pings the person entering the entry and the channel, although I cannot find a variable to display the follow time.

[unkempt ferry]

Hello, would anyone here have this chat?

[severe shell]

That is usually solved by the streamer doing a logout and login on Streamelements
https://streamelements.com/logout
If not, I recommend that you open a ticket with the staff

[uneven oxide]

@boreal gate ⤵️

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!

[fiery mica]

Hey everyone! Idk if this is the right area but I’m having an issue with the “Credit Roll” widget by Grot. For some reason it will not allow me to edit the font size of the usernames on the widget. I can change the size in SE but nothing changes physically

[minor elbow]

Hello, I am trying to create a command which makes a query to the Rocket League Tracker Network API, I already have the application created and I have used it in this command: $(urlfetch https://api.tracker.gg/api/v2/ rocket-league/standard/profile/steam/YOURSTEAMID?TRN-Api-Key=YOURAPIKEY), in question the command what I want it to do is tell me the rank of the people who use the command, but I think I'm doing it wrong because this way I would have to make a command for each person and what I want is to know the rank of the people in the chat through the command, can someone give me a hand, someone who has experience in this, what do I want to do?

[severe shell]

You probably got the widget from Overlay Gallery, right? That one seems to have some bugs, try to download this version from #widget-share: #widget-share message
That one will reflect the font size change, I've just tested

[severe shell]

I'm not aware that tracker.gg has a public API for Rocket League, but if that command works for the streamer, probably you just need to change the YOURSTEAMID for the user triggering the command. In this case, the user would need to type their Steam ID on the command.
Let's say the command is called !rank and have this response:

$(urlfetch https://api.tracker.gg/api/v2/rocket-league/standard/profile/steam/${1}?TRN-Api-Key=YOURAPIKEY)

The user would need to type !rank 1234567890

[hardy walrus]

And for those that have no idea how to get said ID https://www.steamidfinder.com/

[fiery mica]

Thank you! I’ll give it a try

[minor elbow]

What if I wanted to for any platform? xbox, playstation, switch, epic games and steam, how would it be? Because I understand that what you told me is for Steam people but for others who don't play on Steam?

[severe shell]

It depends on tracker.gg, if they have support for other platforms

[hardy walrus]

And then it's a matter of getting the respective data (Username/UserID) to use in place.

[minor elbow]

in this $(urlfetch https://api.tracker.gg/api/v2/rocket-league/standard/profile/steam/${1}?TRN-Api-Key=YOURAPIKEY) I have to remove the steam thing and put all other platforms?

[hardy walrus]

That's something you'd need to ask them about since I'm not sure how the API acts or what platforms are supported.

[minor elbow]

In the tracker I know that you can check the ranks of any platform as long as the player plays on that platform

[severe shell]

That's not how an API works... You have to check the exact URL for each thing

[minor elbow]

thank you both very much for helping me a little @severe shell @hardy walrus

[quick sequoia]

Hi guys sorry for being tedious, is gsap compatible with StreamElements?

[broken coyote]

It is

[shrewd flame]

If I have an overlay which uses the SE_API.store API to save/load persistent state, and I have 2 copies of it open - say, one in an OBS browser source, and one in the overlay editor, will they overwrite each other's state?

[severe shell]

Each time it triggers, it will trigger twice, one for each opened copy.
If you want to avoid one of them to run, you can check if the Editor is open and ignore it:

window.addEventListener("onWidgetLoad", async (obj) => {
  // Check if isEditor is true
  isEditor = obj.detail.overlay.isEditorMode // true or false
})
// Put this line anywhere you don't want the code to run when in Overlay editor
if(isEditor) return

That will make the code run on OBS but not on Overlay Editor, preventing conflicts

[spiral phoenix]

Hey, currently i try to listen to all donations on a specific channel (with JWT token available). The docs only describe a way to open a websocket for events with OAuth2, which is not applicable for my usecase as i only use it for one channel. Also the event documentation links to a page with Empty Project.

Has anyone tips for me where i can get all needed information?

[shrewd flame]

OK, so there's no magic separation of SE storage between separate open copies of a widget, or between editor & non-editor copies. Makes sense, and thanks for the tip.

[severe shell]

Probably the same code has a commented line with JWT authentication. Just uncomment it and comment the oAuth2 line. I'm taking into consideration you are checking this page: https://dev.streamelements.com/docs/api-docs/5a84cc101a9c5-connecting-via-websocket-using-o-auth2

The event documentation links from the code should be these ones (same page, just anchored to different parts)
https://dev.streamelements.com/docs/api-docs/775038fd4f4a9-stream-elements-custom-widgets#on-event
https://dev.streamelements.com/docs/api-docs/775038fd4f4a9-stream-elements-custom-widgets#on-session-update

[spiral phoenix]

Thank you! I was unsure if JWT token authentication works here too, as the page was labeled with OAuth2. And thanks for the correct doc links!

[hardy walrus]

Since the bot didn't like what Mira posted....

I try to send a standard socket request to https://realtime.streamelements.com (and also tried with wss://realtime... as https felt weird as socket opener), even with authentication directly in the header, and always receive 503 back.```

What other requirements does the endpoint require?
Connection Logs: <https://pastes.dev/sC4Nf5t4m8>

[spiral phoenix]

Oh thank you

[still juniper]

Socket.io is not a standard ws, it's a wrapper with extra things. You can't use a regular ws implementation/client

[potent halo]

Probably a bit late but.. there are some ways around that limitation.
One I use is to have a hidden field with a unique identifier and just use it as a prefix in persistent storage.
Another and perhaps easier is to take the window url or path, hash it and prepend it. You just need something that differs between two overlays.

[vital wadi]

getting a new error when trying to play audio. It seems to be only in the editor, when used in a browser source it works. Just curious because this is a new error

[potent halo]

obs does something with chromium to allow this. Idk what because I didn't care about it.
If you need to hear it in the editor, reload the page and spam the page with mouse1. This should be enough as "interaction". This is only temporary though

[vital wadi]

okay, thanks

[wheat jackal]

Does someone know what's the endpoint for setting kvstore?

[wheat jackal]

Found it #dev-chat message

[vital wadi]

is this enough to listen for channel point redemptions? Obviously changing out the 'Reward Title' to see if it's the one I want, but is that all I need? I'm not partnered/affiliated so I have no way of testing is my main issue

[severe shell]

Nope, unless the redemption has a text input

Also, reward redemption title doesn't exist. The only information that shows it is a redemption is obj.detail.event.data.tags["custom-reward-id"]

[severe shell]

SE really doesn't have a native way of reading channel points redemptions. You can use this custom widget and it will trigger an event once a custom widget is redeemed, that way you check it it using if (obj.detail.event.type == "channelPoints")
https://streamelements.com/dashboard/overlays/share/6485fdee73031689652625b5

Instructions here:
https://github.com/c4ldas/streamelements-widgets/tree/main/twitch-channel-points#preview-and-instructions

[vital wadi]

Interesting. So when it says "Add the widget to an overlay you use", that means add it as a layer in my custom widget, and when I do that it'll just live there and give me the ability to listen for "channelPoints" events in my custom widget?

[severe shell]

Exactly! Add it as a new layer (or a separated overlay) and forget about it.
As long as that overlay is loaded (added to OBS, for example), channel points events will be sent and available to listen in any widget/overlay from that account.

[vital wadi]

Nice, very cool widget. Thank you

[severe shell]

I have just added an option to emulate, so you can test even if you don't have access to an affiliated channel. Just install it again from the same link if you want.

[vital wadi]

ahh fantastic, thats perfect

[vital wadi]

Works great, thanks

[broken coyote]

This does not work (anymore) AFAIK

[terse axle]

Hi, I'm trying to set up bits alert, but as soon as I try to even inject the message data, the alert just doesn't appear. Does anyone know what's causing that?

const name = '{{name}}';
const amount = '{{amount}}';
const message = '{{message}}';

const userNameContainer = document.querySelector('#username-container');
const titleContainer = document.querySelector('#title');
const main = document.querySelector('#main');
const messageContainer = document.querySelector('#message-container');

setTimeout(() => {
    main.style.opacity = 1;
}, 300)
userNameContainer.innerHTML = `
  <span class="font-bold text-3xl text-white text-start">
{name}
    <span class="text-[#ec1e97]"> x</span>{amount}
  </span>
`;
titleContainer.innerHTML = `<p class="text-md text-white font-black"><span class="text-[#ec1e97]">/</span> CHEER</p>`

const textTimeline = gsap.timeline();
const video = document.querySelector('video');




video.addEventListener('loadedmetadata', () => {
  const alertDuration = video.duration; 
  const textAppearDelay = 0.4; 
  const textFadeInDuration = 0.4; 
  const textFadeOutDuration = 0.4; 
  const textDisappearTime = alertDuration - textFadeOutDuration - 0.5; 


  textTimeline.from([userNameContainer, titleContainer, messageContainer], {
    autoAlpha: 0,
    y: 0,
    scale: 0,
    opacity: 0,
    duration: textFadeInDuration,
    ease: 'power2.out',
    delay: textAppearDelay,
  });

  textTimeline.to([userNameContainer, titleContainer, messageContainer], {
    autoAlpha: 0,
    y: 0,
    scale: 0,
    opacity: 0,
    duration: textFadeOutDuration,
    ease: 'power2.in',
    delay: textDisappearTime - textAppearDelay - textFadeInDuration,
  });
});

[broken coyote]

inject message in html rather than js. (atleast thats how i've always done it)

<span id="message-container">{{userMessage}}</span>

[potent halo]

Fair enough. Here's a workaround.
Start chrome (or chromium based browser) with the flag --autoplay-policy=no-user-gesture-required
Also @vital wadi

[terse axle]

Yeah, I did it this way for the time being, but I wanted to use the message length in javascript. It's odd though, I'm pondering why I have to inject it directly into html

All right I think I figured it out. I have to wrap it in backticks as dynamic string (I don't know why though) ```javascript
const msg = {{message}} //instead of
const msg = '{{message}}'

[broken coyote]

ah interested. when i use gsap, i always just grab it from html. Honestly never had tried or knew you could get it from js that way

[broken coyote]

Yea i knew about that one. Im not sure if it was a SE change or Chrome. But recently been a new thing with not playing sound on widgets. I've just been telling users to use obs to test with. Don't want to have to tell every customer that asks that they need to add flags to chrome

[wooden basin]

Hello there,
I developed a widget which register the name of the one who triggered the stream event. It works perfectly when tested in the StreamElements overlay editor, with the event emulation (also tested with SE.live event emulation). But somehow, it doesn't work with live events, the names being registered as "NULL".. Leading me to think it has to face a different data structure?

Does the event emulation =! real live events ? What would be the best way to reproduce live events and test my features accurately?
Thank you

[severe shell]

Does the event emulation =! real live events ? What would be the best way to reproduce live events and test my features accurately?
It is different. I don't know how emulation on SE.Live works, but you can try to go to the Activity Feed and replay an event. Or go to Overlay Editor, Emulate and check the option "Preview LIVE on stream". It won't be perfectly the same event, but it should be similar.

[hybrid pewter]

Hello, I'm wondering if it is possible to trigger a widget I have with a channel point redemption rather than a chat command. Is this possible with streamelements?

[obtuse isle]

I guess you can read this #dev-chat message

[hybrid pewter]

Thank you! Didnt see that

[rigid dome]

What would be the easiest way to output SE saved data that my widget saves while active?

[severe shell]

Not sure if I understood correctly, but you can do a GET request to the endpoint below to have all SE_API stored data:
https://kvstore.streamelements.com/v2/channel/ACCOUNT_ID/customWidget
Authorization is apikey apiToken or Bearer jwt

[quick sequoia]

Guys i have made my animations with gsap, but i dont know how i can connect them correctly in streamelements. I being using a CDN how i can do it?

Idk if anyone have a functional example to give me

[severe shell]

Hmm, maybe just add this to HTML tab?

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

Or are you referring to another thing?

[quick sequoia]

Like im referring for example: gsap.from('.message', {...})... Okay when it renders two messages the animation restart in both

Like that is kind buggy

Idk why

[severe shell]

Share the piece of the code you have, so we can understand it and try to help.

[potent halo]

sounds intended. You're referencing a css class. Multiple dom objects can have the same class. If each "message" has the message class and you animate .message each time a "message" comes in, you will in fact play the animation on previous "messages" too

If you're adding the dom objects programmatically, you can add an id tag and fill it with some random string.
For example.. <div class="message" id="msg-674328">Hello World!</div>
Then animate it using #msg-674328 instead of .message

[wheat jackal]

Is there global variable for strings, like counter but for strings? I want to access overlay variables using chatbot, is that possible?

[rigid dome]

are there issues going on with stream elements the last few days? I have some people saying their widgets are working perfectly fine, and some saying like fonts aren't working, widgets aren't loading, all sorts of weird stuff and the code hasnt changed

[hardy walrus]

You want 3 ticks

Not 1

The `

[stoic relic]

Could anyone steer me in the right direction in being able to learn how to do this for chat widgets for twitch?

Im not finding anything for using images guide wise or anything helpful for me as a very new person to Css, searches just go to etsy lol

Im trying to learn how to use images not copy this persons

[potent halo]

css has the background and background-image properties. Use with url(...) function to put an image.
html has the <img/> tag. Use the parameter src like <img src='example.png'/> to put an image.
js can set both, html and css, dynamically.
Use html if you only need an image.
Use css if you want to put something on top of the image.

[stoic relic]

Oook, so in this example I could mainly use css to get something like this with how the assets are positioned.

Do I have to have the images in the same folder as the css file?

I appreciate your help!

If I wanted to go through the JS route how would I got about doing that or looking it up?

@potent halo

[potent halo]

Do I have to have the images in the same folder as the css file?
Folders are not really possible in the context of widgets
If I wanted to go through the JS route how would I got about doing that or looking it up?

const elem = document.getElementById("element");
elem.src = "YOUR IMAGE URL"; // Set in HTML
elem.style.backgroundImage = "url(YOUR URL HERE)"; // Or set in CSS

[stoic relic]

ok thats what i thought about the folder because i was having issues finding anything lol and i thought that might have been the case.

so to use the JS route, would i need to add anything in the HTML or CSS tabs on streamelements?

i havent looked at the JS section at all so im not quite sure where to even add them XD

[potent halo]

so to use the JS route, would i need to add anything in the HTML or CSS tabs on streamelements?
Technically not, but static stuff can be done easier and more efficient in html + css.
Please only use js for dynamic stuff like filling out a username, tip amount, etc.

[stoic relic]

ok so what im looking for is more the html and css route for still images, and i could just upload an image to like deviant art and use the images direct url?

[hardy walrus]

You can do it with SE uploads as well

[stoic relic]

oh? im not sure what you mean, i assume i do lol but im also brand new to starting thist LOL so i dont wanna assume, do you have a guide/video/or an explanation that could help me?

Searching for info on this specific project has been challenging lol

[hardy walrus]

Use the overlay editor to upload images/audio files and get the direct link via dev console.

[stoic relic]

ooohhh i see what youre saying for the links ok see im glad i asked

i assumed something different lol

I guess my next question would be, lets say i wanna add a background to fit the border, or an image ontop i want to like be on the left, and centered vertically, where would i put it in these 2? i assume in the actually message row correct?

i appreciate this lol, i was close to just saying screw XD and keep what i have.

Gotta brb, if yall reply ill be able to check later, again thank you

[stoic relic]

To use html, with images on top of the message box, how would I go about adding sections that call strictly to like the message box, or the the username text section.

[potent halo]

What a loaded "question". Please learn to google eventually.

background to fit the border
background-size: cover;
But you don't have a border defined.
an image ontop i want to like be on the left
what image, ontop of what, left of what. Basiclly dafuq do you mean?
centered vertically
if you still talk about background.. background-position: 50% 0%;
sections that call strictly to like the message box
Second "dafuq do you mean?"-moment

[stoic relic]

Sorry if I'm asking loaded questions. I've explained I've been at an impass with searching for days.

Every time I looked something up for this. It wouldn't show anything helpful.

THIS is my introduction to css lol. So my knowledge is not there. I'm learning.

I assure you I'll be googling more considering you've already been helpful bridging the gaps with some information.

My question where you're asking dafuq, was more general I understand that. It was in reference to the example image I shared earlier, looking at the different image assets being used in different locations and how they were placed.

I'm sorry if I'm starting to annoy you with helping me lol.

[potent halo]

There are many ways of overlaying images.
If they always move the same relative to each other, just using gimp would easily work.
If there should be some layer depended movement, you could use multiple divs and layer them with z-index.
With position: absolute you can get any position relative to the parent.
Everything in all..
For example the lower sub box might have been made by making a gradient background
background: linear-gradient(90deg, rgba(255,230,161,1) 0%, rgba(248,201,121,1) 100%);
round the corners,
border-radius: 10px;
putting a moon svg over it with a set custom color (svg's are just html so you can style them),
do the same with other shapes,
position every element using position absolute, top left right bottom,
add a "glow" using a box shadow
box-shadow: 0px 0px 60px 0px rgba(227,46,255,0.41);

[stoic relic]

thank you so much for all the help, ill try a lot of this out and see where i can take it, youve been a big help!

[orchid bough]

Hi, I'm currently working on a custom widget. I noticed that SE_API.store is shared between widgets. What's the best way to store data on a per-widget basis? People might want to add multiples of this widget, and I don't want them to start overwriting eachother's persistent data.

[orchid bough]

for now, I've added a widgetId field that users can enter a value for, and it adds that ID as a suffix to the SE_API store key. The downside of that is that users might run into weird glitchiness before they know it's important to set unique IDs for their widgets. Do widgets have anything by default that uniquely identifies them?

[obtuse isle]

You could make an use of "hidden" field for Id and a "button" type field for generation of Id.

I would first make some sort of "element" in the widget that would be displayed if the id is empty. For example you do a check for the widget-id fielddata value and if its empty you just make that "warning" element visible with the JS so user knows thay have to do something in the editor.

Then with this you create a onEventReceiver that looks for widget-button in obj.detail.listener (I do not remember structure of data of this one so you have to play around) and if its the button you wanted to trigger you set some sort of unique id (I recommend using uuid) into the widgetId field with SE_API.setField('widgetId', 'value');

If I recall this should retrigger the onWidgetLoad event that once again check for the widgetId cause it would be the same code loop it would not show it (I for safety would remove it from the element tree with JS).

And with that you have your special ID that is bound to the widget that you can use for the store

Take in mind this is super rough explanation but it should give you enough details what to do. Its little bit late for me to whip out a code example.

[orchid bough]

No worries, that's very helpful. Thank you!

[obtuse isle]

One more thing you possilby should do is to make sure that people do not retrigger the id generation so you add a check to the "button listener" to see if id exists.

[obtuse isle]

@orchid bough it did not let me sit in peace so here you go, have a demo.

HTML

<div class="widget-warning">GO TO OVERLAY EDITOR AND PRESS GENERATE ID BUTTON</div>
<div class="main-container">YIPPEE</div>

CSS

.widget-warning {
    display: none;
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    color: black;
}

.widget-warning.active {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

JS

let widgetId = '';
const warning = document.querySelector('.widget-warning');

// Id Check
window.addEventListener('onWidgetLoad', function (obj) {
    const fieldData = obj.detail.fieldData;
      widgetId = fieldData.widgetId;
  
      if (widgetId) {
        warning.classList.remove('active');
    } else {
        warning.classList.add('active');
    }
});

// Generate id
window.addEventListener('onEventReceived', function (obj) {
    const event = obj.detail.event;
  
      if (event.listener !== 'widget-button') {
        return;
    }
  
      if (event.field === 'generateIdButton' && !widgetId) {
        SE_API.setField('widgetId', window.crypto.randomUUID());
    }
});

window.addEventListener('onEventReceived', function (obj) {
      // We stop code execution if widgetId is not defined so no matter what happends there is no need to worry that trash data gets saved.
    if (!widgetId) {
        return;
    }

    // Rest of your code goes here
});

FIELDS

{
  "generateIdButton": {
    "type": "button",
    "label": "Generate ID"
  },
  "widgetId": {
    "type": "hidden",
    "value": ""
  }
}

[orchid bough]

Thanks a lot, that's really helpful

[sullen cedar]

hello! Does anybody know of any goal bar widget that combines donations, bits, subs, & gift subs into a single bar? 🙂

[orchid bough]

Actually, I think the button might not be necessary. I can just generate a new widgetId automatically if there isn't one and we're in the editor, and set it using SE_API.setField. Warn if there isn't one and we're not in the editor, but I am not sure that's even possible since you have to be in the editor to add it to an overlay in the first place.

[obtuse isle]

Yep, SE_API.setField works only from the editor level. This is why I prefer using the button method. Cause it makes sure everything is set up.

I do not like and not trust checking if we are in editor. Caused me issues in the past.

In the end of day as long as you get it running whatever works.

[obtuse isle]

I feel like I seen something like this before but not sure where... but it should be a simple enough to write, thou... just to let you know. Twitch has regional pricing on the subs and does not return information about how much sub costed so its kind of impossible to convert sub to "money" (well you can just consider that every sub is 5 usd but that kind of beats the point of the whole bar, which is the same reason why I think subathons are dead as a concept), bits go easy cause they kind of go 100 bits = 1 usd. I can write something simple tomorrow morning.

[unkempt skiff]

I would like the time of the song being played through media request to be displayed on this Winamp styled widget here.

Is there a tag I can use in the nowplaying widget to show the time passed on the playing song?

[sullen cedar]

I think the average twitchsub pays out $2.50. So I would equate 1 Twitch sub point to $2.50 if that's possible!

[obtuse isle]

Sure. I will just make an input for this then in the overlay fields then so it can be customised. I poke you tomorrow when I be done.

[sullen cedar]

okay thanks so much for taking a swing at creating this!

I just set up a 3 bar system that keeps track of them seperate. but having just 1 bar would be way less confusing than 3 different ones

[obtuse isle]

Hmmm... Is the "roll the dice" some sort of mechanic you do manually? Do you have chat notify you that it is reached? Do you reset the bars after it gets "completed"?

Cause I think I could make some sort of counter for rolls and auto reset the bar when its full with reacting to chat commands to remove roll from counter just mass reset counter if needed after whatever "roll the dice" so you do not have to worry about "being in dept" or forgetting about them.

But for now simple "combo bar" version will suffice.

[sullen cedar]

Oh! So I did a marathon a few months ago, and over that marathon we made a big game board out of all the game requests that I played.
Now, I'm going to be streaming, and every time I raise $200, I will be spinning a 10 sided dice like Mario Party. I'll move my piece and whatever I land on, I will play that game

[obtuse isle]

ok, I will make the "advanced" version as well in addiction to the "basic one" that auto resets bar to 0 and increments "rolls left" counter. If you would want to use it it be up to you.

So it be treated as a "progress" bar of sorts.

[sullen cedar]

Here's the gameboard I'm using.

And yeah! It would be cool if everytime it hit $200, it would add a # to a counter and reset.

So say somebody donates $250, it would add 1 to the counter and the progress bar would have $50

[obtuse isle]

👍

[sullen cedar]

If you can create a widget that can do this, I will definitely pay for your time 🙏

[obtuse isle]

I poke you (eider here but most possibly in dms) after I get it into some sort of “running” state, mostly math wise so it calculates correctly. Then we can tweak up some details. Like sizes, fonts, what should be customizable, etc, etc, etc)

[sullen cedar]

cool! yeah feel free to DM me

[potent halo]

What wito answered is a good solution.
Here's another one. SE already assigns an id for the overlay. It's inside the url. So just getting window.location splitting at '/' and getting the second entry would be enough for an identifier. Though this only works for when each widget is in its own overlay.

[vital wadi]

not exactly a dev question, but getting a blank page when trying to get to my dashboard. Been like that for the last 12hrs. My widgets are still working, which is great, but im worried about losing access to them. i got a lot of time and code in there

[proud spade]

Ongoing issue.

[vital wadi]

just being locked out is no big deal, im afraid of losing all the widgets. that's not an ongoing issue is it?

[proud spade]

Not that I am aware of

[hardy walrus]

Everything will exist but just be the worst kind of "locked out" regarding accessing things.

Though if push comes to shove you can go the PiTA way of pushing changes via the API

[vital wadi]

alright, thanks. Fingers crossed

[analog kelp]

There's an API for making overlay changes?

[hardy walrus]

"yes"

Actually looking back at things I may be wrong but it would be something for @severe shell to answer since he's the more knowledgeable one and the person I poked partially.

I was at least looking at the simulating of the editor.

Not really seeing anything indicating you can change the same things.

[severe shell]

#dev-chat message

[analog kelp]

Ah yeah, I'm not sure I'd go quiiiiiite as far as calling that an API, but that's useful nonetheless, thanks!

[severe shell]

By the way, those codes for the SD plugin worked for you?

[hardy walrus]

Actually fixing to test one right now. Just been a bit preoccupied the last few days and forgot.

IT WORKS

Granted I only tested one but it went off as desired.

[severe shell]

That's enough... The others follow the same structure, probably just need to fix some mistype

[hardy walrus]

That as is worked
{"event":"event:test", "data":{"listener":"subscriber-latest" ,"event":{"amount": 3, "message":"Your message", "name":"MrSim"}}}

Just adjust for the proper events and simulator without needing the editor open

Not only can you reset goals easily you can now simulate without having the editor open

Now if we can just get it for elements

[severe shell]

I'm not that used to Elements, didn't catch my attention, to be honest

[hardy walrus]

That was more sarcasm given nobody understands it

[quartz dirge]

Hello. Anyone here knows how to setup a chat overlay that only shows your own chat and replies (excluding others)? I can't find any tutorials about it. It will be very helpful if someone has existing overlay in streamelements 🥲

[obtuse isle]

I guess you are trying to make something of a manner of speech bubble? All you have to do is to the possibly already existing custom chat widget add a check inside the onEventReceived that handels the messages.

it should go something like this

window.addEventListener('onEventReceived', function (obj) {
  const listener = obj.detail.listener.split("-")[0];
  const event = obj.detail.event;
  
  if (listener !== 'message') {
    return;
  }

  if (event.data.nick.toLowerCase() !== event.data.channel.toLowerCase()) {
    return
  }

  // Here you will have code that executes only if its a message from broadcaster. 
  console.log(event.data.text);
});

[quartz dirge]

i pm you here. could you check the screenshot i sent? thank youuu

[obtuse isle]

Help given, solution provided in dms.

[full pasture]

Hi, can someone help me with one thing? I am looking for widget thats making a sub/follow counter, but the goal is increse by one everytime when some follow or sub me

all time the goal have to be +1

i was trying on streamelements, but i cant find that

[red canopy]

hello i have question,
im using session api for get latest subscriber is that possible to get provider / platform or use them both

[obtuse isle]

Hmmm... Fellow jebaited api users, do we know if the getActivities endpoint supports the multiplatform stuff? Aka if its able to return things for every platform.

[hardy walrus]

@viral patrol ^^^

[viral patrol]

Hi. Jebaited supports only the channel you authed with.

[obtuse isle]

Then maybe there is a bug cause I am unable to auth with any other account. It always points at the twitch one no matter what I chose on stremelements login.

I went into incognito, went to jebaitednet, pressed the login button selected youtube, logged in, and got welcomed on jebaited dashboard where in tokens tab was a token I generated on the twitch account.

For reference my twitch and youtube accounts are both on streamelements connected via the "Add Channels" thing

[hardy walrus]

For those of you that would like to use the simulate feature without needing to go to the overlay editor you can now do it with your Streamdeck!

Just follow the instructions in the readme and grab any of the templates from the included zip https://github.com/tehbasshunter/SE-Misc

Just did a quick update and uploaded individual files if preferred.

BTW thanks @severe shell

[edgy jackal]

Hello, recently I decided to level up my twitch overlays and alerts. So I decided to simplify my alerts by removing some of the details and include the profile picture of my follower. I thought I did all the things correct but it doesn't work. Thanks in advance!

If anyone doesn't mind helping me out, please DM me

[severe shell]

There was one here in this discord, but I cannot find it anymore. I have it here in my overlays, got it from pjonp long ago.
Custom Goal:
https://streamelements.com/dashboard/overlays/share/60e1a82a4e3e3bbf9b651685

[old chasm]

is there a way for if you submit a media request video thru the SE api that it could put it in the "pending approval" tab?

[minor elbow]

There is an option for moderators to approve or not the videos requested in the media request

[minor elbow]

The second option that is disabled in this image (sorry for having it in Spanish) but it is called queue moderation

[old chasm]

yeah i have that on and it still goes to the queue lol

[severe shell]

Unfortunately, there is no way to set the song to go to pending queue using the API. I tried some flags, parameters, endpoints... tried to request that via socket, but none of them worked.

[old chasm]

ah damn alright. thanks

[chilly agate]

Hello I was prompted to come here to see if I can get answered or a solution

I want to add wins and eliminations in one command
Example
User won 3 games with 5 elims and 12 elims how would I go about doing so for the commands
I have addwin and wins as a command already
Is this possible??

[potent halo]

Not a lot of info. You can just make another counter for eliminations, make another command (smth like addelim) to add eliminations that uses the new counter. (addwin already does that, so just copy that and replace the counter name)
Lastly edit the wins command. Look at the part that mentions the win counter, copy and paste that then again replace the win counter name with your new elim counter name

[jolly hornet]

Someone know if there's a Marathon Timer that reads both Twitch and TikTok gifts? (Ping me)

[hardy walrus]

We do not have tiktok integration atm.

[swift tapir]

Is there a quick and easy way for us to access our top sub gifters and bit donators of a particular month?

[simple relic]

Hi, im trying to find api that adds to counter, but i only can see that u can list counters through api.. so its not possible to add to a counter through api?

[severe shell]

It is the same one that checks the counter value, but using a PUT request and the body { "count": 2 }. That adds 2 to the current value, using a negative value reduces the counter. It also creates the counter in case it doesn't exist.
To remove the counter, do a DELETE request with no body.

https://api.streamelements.com/kappa/v2/bot/ACCOUNT_ID/counters/COUNTER_NAME

[severe shell]

Unfortunately, no

[austere ridge]

Anyone know why the app is not login in?

[severe shell]

Which app?

[austere ridge]

the StreamElements app

on mobile

Everytime you hit "Connect with Twitch" throws Error logging you in, please try again

[severe shell]

I suggest that you open a ticket to check that with the staff, so they can try to help you

[uneven oxide]

@austere ridge ⤵️

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!

[simple relic]

oh cool, thank you

[frozen barn]

hey guys, couldnt find anything around this idea, but since more follower bots are happening lately i am looking into solution that enables/disables new follower alerts in chat AND overlay (NOT shield mode) via command, if possible through an API call withing streamelements. other alternatives like sery do not offer that and i wondered if this is even possible, havent looked into the API yet. maybe one of you has an idea or already knows a proven method to do this

[weary nova]

algun programador en español?

[severe shell]

There is no easy way for disable the overlay alert only for follower, unfortunately. You would need to get the overlay ID, edit the part of the overlay that has the alert widget notification, update the overlay sending the full body (with the follower alert disabled) and reload the overlay. That would be around 3 API calls. I mean, it's not very complicated, but you will need to take some time to configure it first.
It's way easier just creating a separated overlay and having only the follower notification. When the spam-following starts, you just disable that overlay on OBS using a hotkey.

As regards the chat alert, you can do it via API. Here is the info you need:
URL: https://api.streamelements.com/kappa/v2/bot/modules/ACCOUNT_ID/chatalerts
Method: PUT
Headers:
accept: application/json
content-type: application/json
authorization: Bearer JWT_TOKEN
Body:

{
  "chatalerts": {
    "follow": {
      "enabled": false
    }
  }
}

You can also add other types of alerts to enable/disable them, like below:

{
  "chatalerts": {
    "follow": {
      "enabled": false
    },
    "subscriber": {
      "enabled": false
    }
  }
}

The keys available are: follow, adbreak, polls, predictions, hypetrain, charity, tip, subscriber, cheer, redemption, merch, raid, campaignGoals, host.

In case you want to disable chat alerts at all, add enabled: false inside chatalerts directly. That won't change the current values of each category, so when you enable it again, the ones that had it as "enabled" will remain, which is good.

{
  "chatalerts": {
    "enabled": false,
    "follow": {
      "enabled": false
    }
  }
}

[weary nova]

Hello, a question for a CSS programmer, I would like to remove the space that remains under the name when the line goes down, which is a long message. Could someone help me and tell me what I should modify in the CSS code?

[frozen barn]

Thanks so much for the quick answer and all the helpful information, I’ll look into it!

The sad news regarding ob’s Hotkey is that we‘re mainly streaming irl over a server with obs running so there’s no option to quickly disable it unless a mod is around with quick access to the dashboard. That’s why I thought of a workaround with a command in the first place

[severe shell]

Not that I can help as my CSS knowledge is very limited, but it would be useful if you had posted what you already have in your current CSS, so others could look into and gave suggestions.

[severe shell]

Well, if you want, you can go through the route of getting the overlay and editing it.
#dev-chat message
#dev-chat message

And to reload the overlays:
https://dev.streamelements.com/docs/api-docs/e8fbde6ebad51-channel-action-action
PUT request to https://api.streamelements.com/kappa/v2/overlays/ACCOUNT_ID/action/reload

[mental kite]

Hi, I can't find the streamelement purchase alert api

Please help me

[tawdry flint]

hello

does anyone can save custon widgets? cause i can't

it seems like html isnt loading correctly

[bold tundra]

Hey there ^^

I just bought a new chat widget to make my chat look a bit more space themed, but I'm running into issues with it.
It doesn't seem to want to make a new line when it reaches a certain point, so it just goes on and on until it goes off screen in the editor, or gets cut off in OBS

Anything that I can do to fix this?
Thanks

[mental kite]

Is anyone there?

[obtuse isle]

So outside if this looking like issue with the chat code itself make sure that your browser source matches your widget size from overlay editor (or reverse, depending what size is correct)

For the chat code fix itself... I think if you hunt down what contains the message just adding word-break: break-all; should fix it. You can read about this property here https://developer.mozilla.org/en-US/docs/Web/CSS/word-break But like I said, you need to find what html element contains the text and add that property to related css styles.

[broken coyote]

I personally try to avoid using break-all.

So
welcome
Doesnt turn into
wel
come

[obtuse isle]

Yes but it solves all weird cases. Sadly its eider A or B cause of fixed widths and long strings.

[broken coyote]

my 2 cents is. which happens more? Thats why i never do break-all

You can use a combo of word-wrap: break-word on the div for the message and word-break: all on the div which holds the message div

This snippet is from one of my person widgets

.innerChat {
  margin: 0px;
  padding: 10px 20px;
  word-break: break-all;
  position: relative;
}

#log .message {
  word-wrap: break-word;
  position: relative;
  z-index: 99;
  font-weight: var(--messageWeight);
}

[obtuse isle]

In long term its whatever. Chat on screen is just a "addiction". If you want to be fancy just use text-wrap: pretty; then. Cause widgets anyway run in chromium so it has a support.

[broken coyote]

As long as its 117+. But yeah

[bold tundra]

Thank you ^^

[amber wave]

Hey guys. This is my first time here. Just wanted to say thank you for this great option. I currently have a sponsorship going for Call of Dragons but am not sure I have done anything right so far, lol. I do have a hard time getting people to click on my link to join me. Any suggestions? Also it is against the rules if I make a video about streamelements? I love this as an option and thought it might be a way to get some support for my sponsorship. I don't want to do it if it is against the rules.

[ruby nebula]

hi there, in onwidgetload, when i do obj["detail"]["channel"]["apiToken"], what kind of token is this?

can i use this token to access the media request api?

okay its the overlay token, i deduced that so far

[severe shell]

That token is also known as "Overlay Token" and can be used for some GET requests that have some relation with overlays. Some endpoints work with it, others don't. Best way it testing.
Instead of "Bearer", you use "apikey" on the authorization header.

[ruby nebula]

is it possible to just fetch the bearer token from the obj?

id understand if its not

[severe shell]

Nope

[ruby nebula]

so id have to make a custom field for the custom widget for that then?

im just fiddling around trying to access the media request stuff in a custom thing

[severe shell]

It isn't recommended that you put the JWT token in a custom widget, but it is up to you. If it's only used by you, it's fine

[ruby nebula]

so theres no recommended way to access the entire api? im trying to make something for someone, but im getting a bit confused about getting the correct authorization

i know there's SE_API but not everything seems to be there

[severe shell]

Not inside a custom widget. You should setup your own server on that (or even using Google apps script). Think that a custom widget is nothing more than a front end application (so you wouldn't put private keys in there).

But I would be lying if I say I don't have any JWT in some of my custom widgets.

[ruby nebula]

hmmm alright, might just end up doing it in a local file instead then with a hardcoded token and tell him to edit the token

thanks for the help

ah one more thing, i cant find any info on rate limits

is polling once a second too much?

[severe shell]

Not at all, if I''m not mistaken it's 1000 a min, you can check the headers for that request.
#dev-chat message

[ruby nebula]

thanks again 🫡

[mental kite]

Hello
Hi, I can't find the streamelement purchase alert api
Please help me

[hardy walrus]

Which endpoint are you looking for exactly?

[ruby nebula]

can i report an api bug somewhere? :p

songrequest/:channel/playing always reports a duration of 0 with songs that are on the backup list

[severe shell]

You can always open a ticket to inform that to the staff

[uneven oxide]

@ruby nebula ⤵️

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!

[ruby nebula]

thanks for the help earlier, this little winamp styled song widget works now

[severe shell]

Oh that's nice!

[ruby nebula]

yea the digits change and the progress bar moves 😛

[mental kite]

"activity endpoint" is used to display notifications

[hardy walrus]

I mean contextually what exactly are you looking for.

[broken coyote]

Noice! I have a widget i made like that

[wicked dawn]

oh man same here

[clever swift]

Yo can anyone here help me out with making the text of a Alert bold because whenever I try doing it the bold is on the inside and not the outside

[clever swift]

Here let me say that again

So, I'm having trouble with making the text stroke on my alerts not be inside the text but be outside the text, and every time I add a stroke, the stroke appears inside the text and not outside of the text like it usually is. Does anyone know how to fix this?

[potent halo]

You could try paint-order: stroke fill;

Or instead of using litteral stroke, use text-shadow which renders behind text by default

[mental kite]

I want to use StreamElement's api so that when someone makes a purchase on my website, there will be a notification on livestream. I learned that it is an "activity endpoint", but I can't find its full documentation.

[severe shell]

It says it needs oAuth, but I'm not sure about it. You can test it and let us know if that works for you with JWT.
#dev-chat message

[mental kite]

I use oAuth, I will register the app, then use authorization to get the token. I just can't find the doc of that api.

I have registered for the app but have not received any response or notification. I don't know how long I have to wait.

[severe shell]

Welcome to the world of bad API documentation 😅
My suggestion: Take a similar endpoint as an example, use the same headers, authorization, etc, and change where needed, like the URL and the body (to match the post I mentioned before)

You can check this endpoint and use it as an example: https://dev.streamelements.com/docs/api-docs/81a0174632320-channel-activity-id1

[mental kite]

Why is it bad 😆

I think it's not right, my api needs to send product information, price, and message. But as in the doc, I don't see it, because I have referenced this api before.

[hardy walrus]

Because there is no documentation at all

That bad.

[mental kite]

i test api post with https://api.streamelements.com/kappa/v2/activities/${accountId}'
using with JWT, not sure if it works with oAuth, because i haven't approved the registration yet

the data is transmitted as
{ "type": "purchase", "provider": "twitch", "data":{something} }

[surreal agate]

if i wanted to access the SE API for leaderboards for a different twitch streamer, would I be able to do so? or would I only be able to do so with my twitch account through my oath tokens?

[severe shell]

SE leaderboard is public, so you can access it even without any token
https://api.streamelements.com/kappa/v2/points/ACCOUNT_ID/alltime
https://api.streamelements.com/kappa/v2/points/ACCOUNT_ID/top

[surreal agate]

appreciate you, i was searching "leaderboard" on the api docs, didn't think to look for "points"

[severe shell]

My tip: Instead of looking at the docs (which is incomplete and outdated), open the browser devTools > Network and reload the page that has the information you want. You will see the request there (select Fetch/XHR)

[surreal agate]

that works perfectly too!

[clever swift]

How do I do that?

[rose garnet]

Question for yall. I have a sub counter that is counting everything correctly, besides community gifted from twitch. It is counting them as +1 whatever the amount is, aka 5 gifted subs counts as 6 on the counter.

Any idea why?

[rose garnet]

Ok, also, question, how come when I go to emulate -> subscriber event -> custom the field "amount" starts out at -1?

Is this a known bug or?

[potent halo]

@rose garnet

1. Community gifted subs emit two event types. They mainly differ in one field bulkGifted. If it is a bulk the amount is the amount of gift subs. If not it is one of the gift subs. Effectively a gift of 5 emits 6 events. My guess is that your counter does not account for that.
2. Don't use the emulator. It's flawed at multiple points. You sound like an active streamer. Use the activity feed to replay past events. Much more accurate.

[rose garnet]

Ye, im currently just trying to figure out why my counter is accounting for that 6th event.. sadly I cant figure it out. it accounts for everything besides that.

[hardy walrus]

Please keep your questions to your ticket you've already got open.

[rose garnet]

Sucks, because my counter auto updates and everything else, it just doesnt account for that sixth event which is causing the counter to be one more than it needs to be

[potent halo]

Not your counter?

[rose garnet]

Hmm? Its a custom widget Ive created.

[potent halo]

Then just check for bulkGifted

Only handle a sub when
if (!bulkGifted)

[rose garnet]

Ahhhh, makes sense. I just have to figure out where to put it as right now I have a listener for subscribers, then the count is parsed + 1. So might have to redo a lot of this

[potent halo]

If you rework this, maybe look at Reboot's work. His api plugin makes stuff like this ALOT simpler.

https://reboot0-de.github.io/se-tools/

[rose garnet]

I will definitely have to! Just annoyed at my code lol. Had it all figured out until the last lil bit, looks so good and works like a charm. But theres always something with code LOL. Thank you!

[potent halo]

Did some explaining AWHILE ago. Maybe it could help ya #dev-chat message

[rose garnet]

Yeee, I see that. I am just going to have to keep messing around with it. Might just have to chalk it up and restart it all cause anything I add seems to break the output for some reason. I appreciate the help!

[wicked dawn]

any chance the SE mobile app gets screen recording soon

[edgy jackal]

Any help making this to display my current viewers, subs and total followers

[severe shell]

For current viewers, you can fetch this endpoint: https://decapi.me/twitch/viewercount/CHANNEL_NAME
For subscribers, you can go to Labels > Subscribers > Total & All-time > Total subscribers
For followers, do the same Labels > Followers > Total & All-time > Total followers

[rose garnet]

Appreciate you! Ended up working and getting it all fixed!

[old sparrow]

Can someone give me a quick hint on what the origin parameter is when requesting the activities API (https://dev.streamelements.com/docs/api-docs/861a5d5450bbb-channel) ?
I did trigger some events that I could see via the websocket, but I just can't get anything via the according API endpoint. I'm always getting an empty list as result and it is likely that I'm just misconfiguring the parameters. I guess all parameters are explained in the API doc, but I just don't get what origin is.

An minimal working example code looks like this (Of course without the JWT token and Account ID):

    import httpx
 
    url = f"https://api.streamelements.com/kappa/v2/activities/{os.environ.get('GUID')}"
    headers = {"Accept": "application/json; charset=utf-8",
               "Authorization": f"Bearer {os.environ.get('JWT')}"}

    params = {
        "after": '2024-10-01T00:00:00+02:00',
        "before": '2024-10-21T00:22:54.218061+02:00',
        "limit": 500,
        "mincheer": 0,
        "minhost": 0,
        "minsub": 0,
        "mintip": 0,
        "origin": "????",
        "types": "[follow,tip,sponsor,superchat,host,raid,subscriber,cheer,redemption,merch]"
    }

    response = httpx.get(url, headers=headers, params=params)
    print(response.text)

[severe shell]

To be honest, I believe that doesn't make anything and you can just delete that... Or put any string that will work anyway. I think it was used long ago, but now it's there just for compatibility, maybe.

Also, types is not an array (as it says in the documentaion). They are also query strings, like "after" and "before", for example. So the final URL would be like this:

https://api.streamelements.com/kappa/v2/activities/ACCOUNT_ID?limit=50&before=2024-10-20T22%3A59%3A33.233Z&after=2016-01-01T00%3A00%3A00.000Z&types=tip&types=merch&types=purchase&types=event&types=giveaway&mincommunitygiftamount=2&types=cheer&types=host&types=raid&types=subscriber&types=communityGiftPurchase&types=follow&types=redemption&mintip=0&mincheer=0&minhost=0&minsub=0

#dev-chat message

[old sparrow]

Thanks for your help... The problem was the fact that I was using an array of types

[severe shell]

Yeah, it took me a while to figure that out first time. 😅

[obtuse isle]

Same, I wasted like 3h before on the same problem.

I made a custom credits roll widget based around that api actually (that I moved to jebaited api to simplify it cause of stupid limit stuff and issues with jwt reseting) This example is using custom range but real one pulls the current session "creation time" aka when it got reset last and pulls all since that datetime.

[old sparrow]

So basically the solution is to switch from something like

{
"types": "[cheer,tip]"
}

to

{
"types": ["cheer", "tip"]
}

At least for httpx

[severe shell]

Oohh, good to know, that really worked!
https://api.streamelements.com/kappa/v2/activities/ACCOUNT_ID?before=2024-10-20&types=["follow", "tip", "purchase"]

[old sparrow]

Sorry for the confusion. Having an array in the url does not work for me, but passing a python list of str inside the params to the httpx.get call, does produce the url as you proposed ...&types=cheer&types=host&types...

[old sparrow]

But thank you so much for your help. you have saved me from many more hours of searching for problems. I did spent way too much time due to bad documentation already xD

[lost sinew]

hello everyone~
i have a basic question, i just wanna know if that is possible in the first place (a how to would be nice as well, in case someone knows, but im also fine with just knowing IF it is possible)
i would like an overlay that does react to channelpoints, i know how to do that already, BUT is it possible to only show the channel point redemption when the custom code tells twitch so? or can you tell a channel point redemption within twitch itself to only appear like for 5mins every idk, 15min? and maybe even dissapear once someone else has used it? so that channel point redemption can only be "bought" once every 15min in a timespan of idk 2min or so?

is that basiclly possible? within the custom code OR twitch itself? or is that something that would be cool but my brain just made it up?

[hardy walrus]

The only thing we have at the moment working with channel points requires user input at minimum.

[severe shell]

is it possible to only show the channel point redemption when the custom code tells twitch so?
It is, but there's a catch. Twitch channel redemptions (aka custom rewards) need to be created with the same token that will be used to hide it. You will need to use Twitch API directly for that.

First, you would need to create (or recreate) the custom reward:
https://dev.twitch.tv/docs/api/reference/#create-custom-rewards

And then, you can use the Update Custom Reward endpoint to hide it (marking is_enabled to false) or appear again:
https://dev.twitch.tv/docs/api/reference/#update-custom-reward

For both situations, they need to use the same access token.

or can you tell a channel point redemption within twitch itself to only appear like for 5mins every idk, 15min?
That can be done by code, using the same Update Custom Reward endpoint.

[lost sinew]

holy, thats more than i have espected, thanks alot! i will look into it and read up

thanks alot, both of you @hardy walrus @severe shell

[severe shell]

I believe you know how to work with Twitch API (based on your previous messages). But if you have questions, we are here to help 🙂

[hardy walrus]

👆 him more than me.

I'm a when it comes to API fun

[lost sinew]

i know a bit of it, yeah... rather new to it^^ and i struggle with reading documentary cuz im not just dislexic but also have ADHD but yeah, im a fulltime python dev, so mostly i get stuff when i at least see a coding example

just started out with twitch codeing stuff 😄 i can show stuff on channel redemptions, anything that has webdev stuff as a base, but thats about it so far

[mossy charm]

Need help with alerts having the same values
i have alerts for a certain persons name and a certain amount but when the person donates the certain amount they get their personal name alert instead of the amount

any idea on how to fix this please?

[severe shell]

You mean variations? If so, just recheck the variation and see if the message is correct. It is hard to give any suggestion other than that as we don't have any screenshot or anything

[mossy charm]

i believe i have fixed it

is it the alert on the bottom that takes priority

[halcyon pilot]

Do chatbot commands trigger an event that a custom widget can listen for? I don't seem to have a way to test this, because I cannot seem to send a test chat in a YouTube overlay.

[severe shell]

The normal onEventReceived, and you can check if the message is the command you are looking for. Chat commands are just chat messages

[halcyon pilot]

So when the chatbot triggers and event and it is picked up by onEventReceived, what is the name of the event? event.name?

or perhaps obj.detail.listener "<what is here>-<and here>"

[severe shell]

You can look for obj.detail.listener == mesage

https://dev.streamelements.com/docs/widgets-old/6707a030af0b9-custom-widget-events#on-event

[halcyon pilot]

If I could just fire a test chat, I could strigify the object and see what is in it.

[severe shell]

Check the pinned messages, there is an example of youtube chat data

[halcyon pilot]

Looking for it. Is it a way to force a youtube chat message to a YouTube overlay without being in a public livestream?? That's what I would LOVE.

[severe shell]

Not sure, maybe you can get some of the chat widgets from #widget-share and check the test message. Then you modify it to use the Youtube object chat to test

[halcyon pilot]

OH! I See the message event! Well, that's awesome. Thank you! Now I just have to figure out how to get a message event to fire without being on a public livestream so I can develop against it. THANKS so much!!!

[halcyon pilot]

Found a good one by FabioZubi12. Kinda confirms my suspicion that there is no built in test event to fire to simulate a chat message, but I see what he's doing. He's creating a new CustomEvent object and using the message object pattern. Think I'll hijack his code. Honestly can't understand why StreamElements doesn't include this obvious functionality. At any rate, you have been extremely helpful.

[static grove]

I'm working on a custom widget, a goal that fills with donations, bits and subs. I managed to do it but the problem is the persistence. Is there a way to get the donos, bits and subs since certain date in the context of a custom widget?

[severe shell]

No

[minor elbow]

How can I make a link like this to share overlays created/edited by me to someone else?

[static grove]

F

[severe shell]

You don't unless you already had shared widgets in widget-share when that was a thing.
But some options here:
#dev-chat message

[minor elbow]

https://github.com/c4ldas/seapi#how-to-use-it I have just been impressed with this, I think it is a tool that has a great future, and to share resources it will be very useful

@severe shell After authorizing the streamelements account I get this message

[severe shell]

Hmm, can you try again so I can view the logs on the server side?
I have just tested here and it worked fine, but maybe there is something wrong

[minor elbow]

I tried again, and I got the same error, I updated the browser in case that was what it was.

@severe shell I have tried with another browser (edge) and it works but with Google Chrome it does not work for me

[severe shell]

Hmm, strange... I tried with Chrome, Edge and Firefox, all of them worked with no issues.
But based on the error information, check the browser console and see what error it triggers. You can send it to me in private if you want.

[minor elbow]

I already wrote to you and explained what problems I have.

[minor elbow]

Is there any way to know which overlays are for YouTube #widget-share

I'm looking for some meta subscribers, I know I can create it myself, but I wanted to see some design by someone with much more experience than me and that would be nicer

[hardy walrus]

Unless they specifically mention it in the post details you can assume it's only twitch.

[halcyon pilot]

should widgets be able to receive events that are dispatched from other widgets on the same overlay? Or is that restricted somehow? I don't mean from a button in the fields, I mean from a window.dispatchEvent(objEvent);

[buoyant vigil]

My Twitch chat works but Youtube wont

[halcyon pilot]

I'm trying to update field data in a custom widget with the results of an API call in the onWidgetLoad event. I tried updating the obj.detail.fieldData.<myField> directly. Of course that doesn't work. But is there any way to manipulate those fields directly in the onWidgetLoad event so that I can have dynamic options in the field editor?

OH! NM. I see it. It's through the SE_API.

[halcyon pilot]

Frustratingly YouTube chat won't show up unless you are on a PUBLIC (not private, not unlisted) stream. I actually had to go and start a livestream in order to test some chatbox stuff, which annoyed a couple of my subscribers when they got the announcement. You can simulate a chat message with a bit of code if you are in a customizable widget. But I don't think you can dispatch an event from one widget and have it trigger the listener in another. This seems to be locked down somehow. At least I haven't gotten it to work, and my question about it has been met with stony silence. So, as far as I can tell, the only way to really test chat functionality in youtube is to go live for god and everybody to see.

Does anyone know how to make the canvas interactive in editor mode, so I can, for example, click an HTML button it? I know I can preview it which is interactive, but I'm hoping there is a way to make the HTML on the canvas interactive while in the editor, because chrome won't let me configure a sight to "allow autoplay" the way edge will, so I have to interact with the page before my custom widget will play any sound.

[tranquil plinth]

Guys, help me! I would like to know if there is any possibility of making a widget similar to Doneite, using Twitch's own points to show the progress of community challenges. Is it possible?

[covert flint]

Hey folks, my custom widget is visible in the URL but not in the browser, for some reason.

could it be because I'm using http to host my widget? does it require https in obs?

[buoyant vigil]

Thank you very much! Thats the conclusion I came too. I only stream on Twitch and YouTube so I settled with have both chats side by side in OBS. Works good enough.

[halcyon pilot]

If you do figure something out, let me know, because I find the inability to test actual chat events from youtube natively on the streamelements platform to be very inconvenient.

[shut arrow]

does anyone know how to make a custom cmd for SE tht, like !duel, if u don't mention another user, it will just respond w/u not being able to do tht and requiring the user to input another user's name other than their own? >.>

ex.: !fight -> You can't fight yourself.
!fight @shut arrow -> Nice try. You can't fight yourself.
!fight @other user -> You started a fight w/@other user!

Ping once responded to, plz and thx <3

[halcyon pilot]

Does anyone know how to place fields from a custom widget side by side in a two column format in the editor's sidebar?

Does it feel like this channel gets little to no visibility?

[severe shell]

That's not possible on SE chat.

[severe shell]

Unfortunately, no. Fields in custom widgets are always on top of each other in a single column

[hardy walrus]

It's a combination of things.

This channel is primarily geared towards the legacy overlay system which is not the focus of the Devs atm and those that are the when it comes to the API/overlays are few in between.

[shut arrow]

Oh, I would’ve thought it was b/c !duel gives a similar response

[severe shell]

Yeah, but !duel is a default command, and we don't have enough chat variables to mimic that. I mean, you could create a similar thing using customapi and a server, but that would need some coding.
You can use Google Apps Script (https://script.google.com), here's an example:

New project
Remove the code in the page and replace with:

function doGet(e){
  const path = e.parameter.path;
  const sender = path.split("/")[1];
  const touser = path.split("/")[2].toLowerCase().replace("@", "");

  if(!touser || touser == sender) return ContentService.createTextOutput("You cannot fight yourself");

  return ContentService.createTextOutput(`You started a fight with @${touser}`);
}

Go to Deploy > New deployment
Click on the gear icon on "Select type" and choose "Web app".
Description: Put any description you want
Execute as: me ([e-mail])
Who has access: Anyone
Click on Deploy
The URL will appear, copy it and create your command like below replacing YOUR_WEB_APP_URL for your respective URL:

${customapi.YOUR_WEB_APP_URL?path=/$(sender)/$(1)}

[halcyon pilot]

The legacy overlay system as opposed to elements? Somehow it didn't click that overlays were "legacy" and elements were "the new way". I think I was thinking that they could work together. I haven't really looked into elements. Having heard, that now I'm feeling some remorse over the many house over the last few days that I've spent learning and developing custom widgets. I saw that elements were in beta so I wasn't using them. Should I be focused on elements do you think? Will overlays be deprecated in lieu of elements?

[hardy walrus]

Correct on the first part.

Unfortunately if/when is not something we know but am curious given its not exactly 1:1 ATM.

[severe shell]

Overlay Editor doesn't have plans to be deprecated, but won't receive any new features (sadly).
I (and many others) still use and develop for Overlays (and custom widgets).

[severe shell]

The documentation shows how to use it:
https://docs.streamelements.com/chatbot/commands/default/bet

It is basically !bet option value
The contest is created on SE dashboard > Loyalty > Contests. You can add up to 10 options.

To create a widget, open your overlay, click on + buton > Engagement > Contest

[minor elbow]

Where do I find the betting?

[severe shell]

click on + buton > Engagement > Contest

[minor elbow]

@severe shell https://seapi.c4ldas.com.br/ I just tried it with a friend, the sharing overlay with code and everything was perfect, the only thing is that the drag option when we went to obs in the sources window did not let him paste what we had dragged, we executed the obs in administrator it has What to see something like that? or we should have dropped on the screen directly and not in the font window

[severe shell]

Oh, I think I haven't finished that button, I completely forgot that 🤦‍♂️
Let me update it and fix that button

[minor elbow]

Sorry, I thought I was doing something wrong and I just wanted to tell you about it in case I was doing things wrong.

[severe shell]

The button is now fixed and working as expected. Thanks!

[minor elbow]

Thank you! to you for making this possible 😇

[thick zealot]

Hi I know Trovo is in beta but can i please have alerts for Mana. You have the elixir one there but not mana.

[severe shell]

Since Mana on Trovo is similar to Channel Points on Twitch and SE still doesn't support Twitch Channel Points, I wouldn't expect it to be supported anytime soon.

[shut arrow]

and this works for SE custom cmds? >.>

or would this only work if it's outside SE?

[severe shell]

The steps I provided will make you use the command like below on chat:

!fight @c4ldas
You cannot fight yourself

!fight @otheruser
You started a fight with @otheruser

[shut arrow]

ok, thx :p

[shut arrow]

just tried it
doesn't seem to work but am unsure if maybe i did it wrong?

[severe shell]

Hard to say... Maybe yes, maybe no

[shut arrow]

it does the fight @user right, but not telling me tht i cant do it to myself :/

[severe shell]

Probably it's because of the @. Go to Google Apps Script again, and open the project if isn't opened already.

With the code open, replace the sender line (3rd line) with this one:

const sender = path.split("/")[1].toLowerCase().replace("@", "");

• Go to Deploy > New deployment
• Description: Put any description you want
• Execute as: me ([e-mail])
• Who has access: Anyone
• Click on Deploy

The URL will appear, copy it and create your command like below replacing YOUR_WEB_APP_URL for your respective URL:
${customapi.YOUR_WEB_APP_URL?path=/$(sender)/$(1)}

[shut arrow]

Will do once I’m home

[jade oracle]

i'm sure this comes up often, but I'm trying to set up my chat to have bubble boxes for the messages and I'd like to be able to customize the size of emotes that appear. has someone already set up a widgt that allows for that?

[severe shell]

You can look for chat widgets in #widget-share and install some of them to check if any has what you need.

[jade oracle]

ty

[minor elbow]

I have used that chat, did you find it?

[jade oracle]

yea I found one, chat bubbles by Zaytri

[severe shell]

That one is amazing!

[jade oracle]

seems to do everything I want so far, will still need some adjustment but its all pretty well laid out

[minor elbow]

You can even add sound so that when someone sends a message it sounds, I put the sound of a dock and people went crazy because they didn't know what that was.

[jade oracle]

any widgets you might recommend that will cycle on screen between "last tipper, new sub, sub goal, follow goal, etc"?

[minor elbow]

a follower counter widget, subscribers etc.?

[jade oracle]

yea something that might cycle through different metrics like that

i had one a long time ago but it broke, something happened in the db it ran off of and then it never cycled properly ever again and redoing it from scratch never fixed it

[minor elbow]

What I do is look at an overlay that I like about followers, subscribers, etc... and then in the same overlay I duplicate it in the main overlay that I have, I don't know if I can explain myself

[minor elbow]

You can create a complete overlay using several overlays, just choose the things you like from each one and create a whole one with bits of others

@jade oracle If you like the camera frame of one and the other one you like the alerts it has, then you can make one with those two things.

[jade oracle]

that does give me an idea, thanks for the advice

[minor elbow]

If you have any questions, you can ping me and I will be happy to help you.

[jade oracle]

cool, ty

[split glade]

Hello, I am seeking assistance with a twitch command, I am trying to create a custom twitch command that generates a link for example someone types the command !buildmultistream https://decapi.me/twitch/multi/$(queryencode $(i:)) and the command generates the link, but with the $(1:) instead of adding the spaces, it adds "+" but if I can switch it to be "/" or " " it works

[severe shell]

Just remove the queryencode, you don't need it:
${customapi.https://decapi.me/twitch/multi/$(1:)}

[split glade]

Thanks, I tried this earlier but it wasnt working 😦 but now it does!

[split glade]

just out of curiosity if someone used @username to reference who they want to add to the link, how could I handle removing the "@"

[minor elbow]

@split glade Out of curiosity, what does the command do and for what purpose would it be used?

[severe shell]

You can use ${user} instead

[split glade]

That only shows the first user in the series, for example !buildmultistream @user1 @user2 @user3 for example returns: only $(user) for "@user1"

[severe shell]

It generates a multi stream link:
https://docs.decapi.me/twitch?endpoint=multi%2F%3Astreams

[split glade]

Correct, it does.

But with $(user) this is what it creates with "${customapi.https://decapi.me/twitch/multi/$(user)}" >> Someone types !buildmultistream @user1 @user2 @user3 >> https://multistre.am/user1/layout3/

[severe shell]

Yeah, there are some caveats... That's a good question, indeed. ${arg:} will add the @, ${user} won't, but only adds the first parameter.
Unfortunately, there is no way to filter out some characters... You would need to create a custom script for that and host it on some server (or Google Apps Script, for example).

[split glade]

😦 where's Regex when you need it? lol There's a Regex section in the advanced section of custom commands but I dont believe it does anything to fix this lol

[severe shell]

Yeah, that regex doesn't filter the command sent, it is more like a search. It will look for that regex on the chat message to trigger the command.

[split glade]

Ahh, too bad lol wish there was a $(regex $(1:) "@" "") that would be sweet lol

But all good, I'll just make sure people don't type the @ and use $(1:) that is easy enough to do 🙂

The @ just makes it fast rather than typing the name fully they can tab select the name

[severe shell]

That would be the easiest option. But if you want, I can try to create a script and you can host it on Google Apps Script, so if the user types the @, it would just ignore it.
It would be something like this (just the instructions on how to do it, the code would be different, obviously):
#dev-chat message

[split glade]

That would be amazing!

[severe shell]

Ok, give me some time, I will try to write the code and do some tests before sending it to you

[severe shell]

• Go to Google Apps Scripts (https://script.google.com) and login with your Google account
• New project
• On top left, where it says "Untitled project", rename it to anything more meaningful, like Multi Stream script
• Replace the code in the page with this one:

function doGet(e) {
  const decapi = "https://decapi.me/twitch/multi";
  const users = e.parameter.users.replaceAll("@", "");  

  const request = UrlFetchApp.fetch(`${decapi}/${users}`);
  const response = request.getContentText();

  return ContentService.createTextOutput(`${response}`).setMimeType(ContentService.MimeType.TEXT);
}

• Go to Deploy > New deployment
• Where it says "Select type" (top left), click on the gear and select Web app
• Description: Put any description i.e.: "1st deployment"
• Execute as: Me ([e-mail])
• Who has access: Anyone
• Click on deploy and probably will ask you to authorize the application. If so, go through the authorization process:
  -- Click on Authorize Access button
  -- Select your account
  -- Click on Advanced
  -- Go to Multi Stream script (unsafe)
  -- Allow
• Next screen will show the script link. click on Copy and Done

You can now create the command like below, replacing YOUR_WEB_APP_URL for your respective copied URL:

${customapi.YOUR_WEB_APP_URL?users=$(1:)}

Let me know if that works for you.

[split glade]

I think I fixed it, I added error handling: function doGet(e) {
const decapi = "https://decapi.me/twitch/multi";
const users = e.parameter.users.replaceAll("@", "");

if (!e.parameter.users) {
return ContentService.createTextOutput("No users specified").setMimeType(ContentService.MimeType.TEXT);
}
try {
const request = UrlFetchApp.fetch(${decapi}/${users});
const response = request.getContentText();
return ContentService.createTextOutput(response).setMimeType(ContentService.MimeType.TEXT);
} catch (error) {
return ContentService.createTextOutput("Error fetching data").setMimeType(ContentService.MimeType.TEXT);
}
}

[exotic brook]

I'm following the setup guide, but on step 8 of testing your element I don't see the "Hello world" option. I downloaded the hello_world package and made no changes. What should I double check?
Edit: Never mind I don't need it anymore.

[exotic brook]

A bit of feedback: Because the title of this says Connecting via Websocket using OAuth2 I missed that it was also possible to connect like this using JWT, leaving me with a frustrating search. https://dev.streamelements.com/docs/api-docs/5a84cc101a9c5-connecting-via-websocket-using-o-auth2

[low musk]

Hello everyone,

I'm trying to create a bar that allows for a duality, with the progress bar moving from left to right based on viewer votes. However, I'm still having trouble retrieving my values in JavaScript to display them. I'm attempting to use the fields for this.

I hope someone can help me out. Thanks in advance!

Minystos

here's my command to increase the counter

my field

{
    "sparte": {
        "label": "sparte",
        "type": "textfield",
        "value": "New"
    },
      "athene": {
        "label": "athene",
        "type": "textfield",
        "value": "New"
    }
}

// Récupérer les valeurs des champs
let atheneVotes = parseInt(getVariable('{athene}')) || 0; // Assurez-vous que la valeur est un nombre
let sparteVotes = parseInt(getVariable('{sparte}')) || 0; // Assurez-vous que la valeur est un nombre

// Calculer le pourcentage
let totalVotes = atheneVotes + sparteVotes;
let athenePercentage = totalVotes ? (atheneVotes / totalVotes) * 100 : 0;
let spartePercentage = totalVotes ? (sparteVotes / totalVotes) * 100 : 0;

// Mettre à jour la barre de progression
let progressBar = document.getElementById('progress-bar');
progressBar.style.width = athenePercentage + '%'; // Mettre à jour la largeur
progressBar.innerText = Math.round(athenePercentage) + '% pour Athènes'; // Afficher le pourcentage```

[potent halo]

window.addEventListener('onEventReceived', function (obj) {
    const listener = obj.detail.listener;
    const event = obj.detail.event;
    if (listener === 'bot:counter' && event.counter === "YOUR COUNTER NAME") {
        console.log(event.value);
    }
});
window.addEventListener('onWidgetLoad', function (obj) {
      SE_API.counters.get('YOUR COUNTER NAME').then(counter => {
      console.log(counter.count)
    });
});

onWidgetLoad for initial value, when your widget loads up;
onEventReceived for each time any counter gets updated.
Extract your percent calculation and setting of the progressbar to a seperate function and just call that function from both event receivers

Note that SE_API.counters.get is asynchronous and could take a few seconds to finish.
If the rest of your widget heavily relies on data from this call, things might break if this delay is not accounted for.
Shouldn't be of concern for your usecase tho.

[low musk]

Thank you so much !

[obtuse isle]

Hmmmm.... Would there be a reason why custom widget in the onEventReceived would not receive a gift subs events on one account but on another it would under the event listener?

ps: Yes I need to use event cause compare to the other type it returns information about being a "mock".

ps ps: Code on both is the same but on one gift subs are not received.

[terse axle]

Hi! I got a custom widget that basically displayed images/videos and played sounds based on the incoming chat messages. It worked fine yesterday, but suddenly it stopped working today.

[hardy walrus]

To save you from retyping that

window.addEventListener('onWidgetLoad', function(obj) {
    console.log("Widget loaded");
});

window.addEventListener('onEventReceived', function(obj) {
    // Handle chat messages
    if (obj.detail.listener === "message") {
        let eventData = obj.detail.event.data;
        if (eventData.displayName.toLowerCase() === dazi) {
            return
        }

        if (eventData && eventData.text) {
            let message = eventData.text.toLowerCase();
          
                  if (message.includes("!stop") && isPlaying) {
                  sound3.pause();
            }
            // Check if the message includes "test"
            if (message.includes("test")) {
                // Remove existing video if any
                let existingVideo = document.getElementById('dupaVideo');
                if (existingVideo) {
                    existingVideo.remove();
                }

                let videoElement = document.createElement('video');
                videoElement.id = 'dupaVideo';
                videoElement.src = 'https://datsa.link/video.mp4';
                videoElement.autoplay = true;
                videoElement.controls = false;
                videoElement.muted = false; nd
                videoElement.playsInline = true;
                videoElement.style.width = '300px';
                videoElement.style.position = 'absolute';
                videoElement.style.bottom = '10px';
                videoElement.style.right = '10px';

                cont.appendChild(videoElement);
                videoElement.onended = function() {
                    videoElement.remove();
                };

                videoElement.play().then(function() {
                    console.log('Video is playing with sound');
                }).catch(function(error) {
                    console.error('Error playing video:', error);
                });

                console.log(`Played video for message: ${message}`);
            }```

Not sure why the bot bonked you that hard for the link.

[severe shell]

Probably just a bug in that account. Do you have the Account ID of that one? I can try to refresh the webhooks for that user.

[obtuse isle]

Sec. I do not think I have editor rights still. I will see if I can snoop it out from requests of the widget url. Do you need provider one or the "internal id"?

[severe shell]

Well, a lot of things are missing in that code.

dazi is supposed to be a string? If so, it needs to be quoted;
isPlaying and sound3 are not declared anywhere;
There is an "nd" at the end of this line: videoElement.muted = false; nd;

You are missing 3 closing curl brackets } and a closing parenthesis at the end of the code )

[severe shell]

https://api.streamelements.com/kappa/v2/channels/<USERNAME>

[hardy walrus]

That might be partial oopsie with my copy but

[severe shell]

I don't think so, the deleted message is the same

[hardy walrus]

Discord do be funny sometimes with copying.

the letters though at least aren't me.

[obtuse isle]

"_id":"6110172f31f0934c3dd3add7",
"providerId":"598403800",

oh its the same thing that is in the widget url. I did not know that. Fun

[severe shell]

That account has some issue with SE, it failed to refresh the webhooks, ask them to logout and login again.
https://streamelements.com/logout

[obtuse isle]

ok. I will pass the info!

[severe shell]

If still having issues after logout/login, let us know and I will try to refresh the webhooks again

If that doesn't work, they will need to open a ticket with the staff

[obtuse isle]

I think closest we will be able to full on test will be monday cause she is out of town for the weekend from what I know. But I will poke in case of further issues.

[eager umbra]

Hi everyone! I'm new here and just getting started with the new SE SDK. I'm experimenting with Node and Webpack to have a bit more control over my project, but l'm running into some errors (probably related to how the loader handles modules) when I try to control elements in the SE Editor.
Has anyone else tried something like this? Am I attempting something impossible?

[severe shell]

I would recommend that you ask that here for questions related to the SDK as it's still in beta phase: #elements-editor-widgets20

[eager umbra]

Thank you

[eager umbra]

Talking about custom widget instead. Is the online editor the only supported development method? For example. Can I develop the widget on my local machine and host the code outside stream element?

[severe shell]

Is it possible, it isn't 100% compatible, but it works. You can use this:
https://github.com/tehbasshunter/localdev

[eager umbra]

This seems great.

Little bit better if I can work using WebStorm

[old sparrow]

Is there a simple way to count subscribers for a specificied period of time that is not Session, Week, Month or Total?
Basically I want to count subs starting from now, till I reset it or e.g. 45 days

[potent halo]

Simple? No.
There is a way, tho. You can pull activities.

Without oAuth or JWT (aka in a widget) you'll need jebaited

[old sparrow]

I was hoping to have a simple way as a widget.

I'm already reading the Websocket and writing the according event data to a MongoDB, but getting it back into an overlay can be a little annoying.

[potent halo]

Then try to use that i guess?
Make a jebaited token for "getActivities".
Then it's basiclly just a GET to
https://api.jebaited.net/getActivities/{TOKEN}?types=subscriber&limit=100&before={START_DATE}&after={END_DATE}

TOKEN is your jebaited token (duh)
START_DATE is where the page starts at.
END_DATE is where the page ends (or after 100 entries which is the limit)
Both dates are just js new Date() objects

[old sparrow]

Thank you for the response!
I'll look into jebaited. Haven't had any contact with it yet

[potent halo]

Pagination is a bit tricky here tho. Normally you'd have a token for the next page, right? Not here. The only way to get the next page is to set the start date to the latest end date of the last response

[inland scroll]

Hi ! I made a custom widget, a subgoal that automatically calculate and add a new goal when a a sub is added / removed. It works well in the code editor on my account, with the emulation, but when I give the code to the twitch streamer that'll use it, it doesn't work, it's like the event onSessionUpdate is not triggered. Can't we see how the basic subgoal of stream elements is coded to have a base ? (I'm only the dev, not the streamer, so I have 0 subscribers on my account, if that can be a reason)

Here is the JS part, the onWidgetLoad works well

let title = "!SUB",
    step = 25;

let totalSubs = 0;

window.addEventListener('onWidgetLoad', function (obj) {
  const {fieldData} = obj.detail;

  step = fieldData.step;
  title = fieldData.title;

  totalSubs = obj["detail"]["session"]["data"]["subscriber-total"]["count"];

  $("#title").html(title);
  $("#goal-text").html(totalSubs + ' / ' + getNextGoal());
});

window.addEventListener('onSessionUpdate', function (obj) {
  oldTotalSubs = totalSubs;
  totalSubs = obj["detail"]["session"]["subscriber-count"]["amount"];

  if(totalSubs > oldTotalSubs) {
    goalUpdate();
  }
  else {
    $("#goal-text").html(totalSubs + ' / ' + getNextGoal());
  }
});


function goalUpdate()
{
  $("#goal-transition").addClass('animate');

  setTimeout(function(){
    $("#goal-text").html(totalSubs + ' / ' + getNextGoal());
  }, 1000);

  setTimeout(function(){
    $("#goal-transition").removeClass('animate');
  }, 2000);
}

function getNextGoal()
{
  return Math.ceil((totalSubs + 1) / step) * step;
}

[severe shell]

subscriber-count isn't a valid key.

totalSubs = obj["detail"]["session"]["subscriber-count"]["amount"];

[inland scroll]

So which one am I suppose to use ? When I console log obj["detail"]["session"] I got all of these

[severe shell]

You're probably not checking the option "Preview LIVE on stream". Without that option checked, you get just the alert, the data isn't real.

Check the option on the Emulate and you will see the correct values to use.

Preferably, reload the page first

[sick oyster]

I got a question about this, how would I start trying to do the dev stuff on StreamElements?

I have no clue where to start

[inland scroll]

Alright, I suppose the streamer have to do that ? Is there a way that I can code the widget but on his account without logging in with his credentials ? So I can test with the real sub count

[hardy walrus]

They can send you an invite and you "roleplay" as theirs.

[uneven oxide]

Follow these steps to grant managers/moderators access to your dashboard:

1. Click on your channel name at the top of the dashboard
2. Create a new invite at one of three access levels (Bot Supervisor, Editor, Full Control)
3. Send this invite to a mod/manager to give them access to your dashboard. The link is one-time-use and expires after 72 hours if not accepted

Video tutorial: https://youtu.be/zl_h-ttZDF0

[severe shell]

Considering you know HTML, CSS and JS, you can start here.
https://docs.streamelements.com/

And here (not very updated, but you can understand something):
https://dev.streamelements.com/

[sick oyster]

I dont think you can I think you have to log into the account you are using but I think you can download the overlay

[hardy walrus]

For context you need editor invite.

[sick oyster]

cool thank you

[severe shell]

No, you can do it yourself. When I mean "real data" I wanted to say "real object" values

So you can check on console what is being used... But you can also have access to the streamer account as sudo suggested.
But don't use the "LIVE preview" while they are streaming, otherwise the alert will appear on the stream

[inland scroll]

Alright thanks

[fiery mica]

Hi all! Anyone having trouble with the "!followage" command not working with twitch lately? When my chat uses it i gives an error now

[quiet sentinel]

Hi, I've been looking and I don't know how to do it and if it's possible:
I want to put a list of current subscribers with (name and months subscribed) and make them appear 1 by 1 (1 appears for 2 seconds and then another appears).

[wintry oracle]

Hey there, does someone know how i can display the top10 viewers by watchtime and also display how much hours they have by an command?

[graceful herald]

I am not a dev, but hope someone can answer a question I have. I purchased a widget from Etsy for a streamathon I did. It was supposed to track time and had a point system for subs, bits, tips. These parts of the widget did not work and when I reached out to the seller they said StreamElements recently had an API update. I tried using the Google machine to find when the last update was, but I'm not familiar enough with API lingo to find this information. Can someone tell me when the last API update in reference to subs, bits, or tips happened?

[severe shell]

There wasn't an API update. The only change that happened recently was related to gifted subs in beginning of September. Bits, tips and normal subs didn't have any change.
#announcements message

Also, (most of) widgets don't use Streamelements API directly, so changes in the API wouldn't impact them.

I don't know how Etsy works, but if you buy something, I think it would be expected to receive the product in a working state, right? The dev saying "They changed their API and I'm unable to fix the widget" doesn't look correct, in my opinion.

[graceful herald]

Thank you for this. I agree completely, which is why I wanted to reach out to someone who could give me a truthful and unbiased response. Appreciate it!

[severe shell]

You can use !top online for watchtime and !top points for points

If you need some customization, you can use this customapi command for watchtime leaderboard:
${customapi.https://seapi.c4ldas.com.br/api/watchtime/$(channel)?amount=5&minutes=true}

You can specify the amount of users in amount=NUMBER. If you don't want to see the minutes, just remove the minutes=true (it will also remove the position number)

[wintry oracle]

It says "unable to make request"

[severe shell]

Which one?

[wintry oracle]

The customapi

[severe shell]

I've just edited the command, can you try again with this one:
${customapi.https://seapi.c4ldas.com.br/api/watchtime/$(channel)?amount=10&minutes=true}

[wintry oracle]

Works now thanks

[latent shard]

Hello! I've set myself the ambitious first project of making one of those reactive stream pet elements, and I want to make sure I've correctly wrapped my head around the structure of the widgets SDK.
I think everything collectively should be the pet widget, and it doesn't all get stuffed into a custom composite field. Instead, the custom composite field would be a single, unique pet reaction. It could store the configuration for the animation or image, positional data, bark text, etc. Then the streamer would add the composite field to each trigger and variant they wanted. Does that sound right?

[minor elbow]

#creative-chat

[latent shard]

Sorry, I'm not clear; are you saying my question should go in the creative-chat channel? If so, I'm a little confused, because my intention was to write code to make this project happen.

[minor elbow]

Excuse me, I thought it was information about something creative that you were saying, as if you were asking if people would like it, but you can ask your question in #dev-chat

[latent shard]

Ah, I see, thanks. My question is whether my understanding of the intended architecture for the widgets SDK is correct with respect to what I want to make.

[severe shell]

There is a specific channel related to Elements and the new SDK, which is #elements-editor-widgets20. As it is in beta, staff usually go there to answer questions related to that. Most people here in this channel are still using the old overlays.

[latent shard]

Ooh, I didn't see that channel existed, thanks. I'll move there.

[minor elbow]

Is there a way to start a timer with a command? I imagine they refer to a countdown counter. #community-helpdesk message

[severe shell]

It depends on the widget

[minor elbow]

@polar imp It depends on the widget, it could or could not be done.

[polar imp]

I'm not using a widget, though. It's just a command.

[severe shell]

The command doesn't exist as default

[polar imp]

I see. So, I was lied to, then.

[minor elbow]

You could look for a counter in #widget-share , which when using a command will activate a countdown

[proud spade]

Where did you see documentation that the command existed?

[polar imp]

That's the thing. No where.

[proud spade]

You asked if the !starttimer command still existed, I don't think I've ever seen documentation that referenced it.

[visual gyro]

Is there a way I can make multiple alerts for twitch channel point redemptions? I have tried triggerfyre but it is unreliable, as it works sometimes and doesnt work sometimes

[rugged solstice]

Hi guys, I was really hoping to find someone who can help me. I’ve been searching the internet for the past few days and can’t seem to get closer to what I need.

[proud spade]

Which is?

[rugged solstice]

I have a custom animated overlay, and I’ve been trying to sync up most recent sub/follower/donation but the timings always off. I was wondering if someone could help me to get it matched?

I have messaged around so much with the timings on the left but no matter what I can’t get it to match correctly

[potent halo]

How could anyone help you? You provided way to little info.

1. We can see "Alpha Rotating Feed V2.2" to which you could have provided a link.
2. The background is not part of that widget. Without being able to look up those timings, there is no way to sync up perfectly.
   And also because of your first message, an obligatory.. Don't ask to ask, just ask!

If the background is a widget, go to the css and look for the timing of the animation. It should be in seconds and you need ms for the rotator, so times 1000

[hardy walrus]

It's this widget https://streamelements.com/dashboard/overlays/share/5de9a01f0a74c326b5fa6c68 (From Harris Heller/Senpai Gaming)

Or so I'd like to think.

[potent halo]

And the background?

[hardy walrus]

You know widgets and the api beter than me

I just happen to be sure what it is.

[potent halo]

Yeah but idc enough to search for a single widget, based on a "screenshot"

Let's wait until he get's back to it

[rugged solstice]

Sorry for not giving enough information, I appreciate what you’re saying but I’ve never asked for help before so being rude just isn’t the way to help people.

Forget the help, I don’t want to inconvenience you anymore. You need to learn how to actually talk to people.

[potent halo]

Okay? Wasn't trying to be rude tho. Told you that you provided little info, provided reasons why I think so, gave to hints on how to improve your question and provided a way for you to resolve it using the limited info.

[severe shell]

I don't see where he was rude. He said you gave no info and even suggested what to look in the CSS as a way to help based on what you showed.
Maybe you could just provided more info in your next message so he (and anyone else) could provide more info to troubleshoot.

Asking for help just saying something like "can someone help me, I cannot solve a problem" doesn't make anyone appear and say "I can". Especially in a channel where people are always helping others.

[potent halo]

Is Stackoverflow blocked here? They have a nice article on that

[severe shell]

Don't think so, but if the message is blocked, we can ask to add it to the exception urls

[potent halo]

https://stackoverflow.com/help/how-to-ask

[rugged solstice]

Ok no problem, clearly I’m not suited to this kind of channel, I’ll see myself out

[potent halo]

https://tenor.com/view/peace-out-gif-22295199

[severe shell]

Man, just show the code you have and what you did...

[topaz bough]

Hey there. I am completely new to OBS and StreamElements. One of my clients from my company asked us to build a connection between Shopify and OBS. Whenever a order is placed, the timer of the subathon will go up and an animation will be shown. As I see the website of Streamelements, those animations and timers is something that SE can do. But can we build something with webhooks or something, to also be able to fire these animations somehow?

[severe shell]

Well, it depends on the subathon widget you have, if it reacts with tips or purchases. You have some options.

1 - You can do a POST request to "tips" endpoint, which will create a new tip on Streamelements and generate an alert like a normal tip/donation.
https://dev.streamelements.com/docs/api-docs/7e632a4cecfe1-channel

2 - You can do a POST request to Activities endpoint, using "purchase" as a type, which will generate an alert for a purchase (this seems more like your case). There is no documentation for that specific endpoint, but you can use the info below:
URL: https://api.streamelements.com/kappa/v2/activities/ACCOUNT_ID
Method: POST
Headers:
content-type: application/json
authorization: Bearer JWT_TOKEN

Body:

{
  "channel":"YOUR_ACCOUNT_ID",
  "provider": "PROVIDER",
  "type": "purchase",
  "data":{
    "username": "USER_WHO_ORDER_ITEM",
    "avatar": "https://user/avatar/image/url.png",
    "items": [{
      "name": "ITEM_NAME",
      "image": "https://item/image/url.png",
      "price": 123,
      "quantity": 2,
    }]
  }
}

ACCOUNT_ID and JWT_TOKEN can be found here:
https://streamelements.com/dashboard/account/channels

PROVIDERshould be one of twitch, youtube, facebook, mixer, trovo, displate, xsolla, represent, patreon, fourthwall, lunar, x

If successful, the response of the request is just a plain text response "Created" with status 201 and the default alert for purchase will appear.

SE doesn't have webhooks

[half plover]

Can anyone here help?
Admin, MODs or employees of StreamElements?! has there been any update to the leaderboard configure issue? Please can someone at least reply to the message, every time I ask it just gets lost in other chats (At least I hope that's what is happening) If this is not the correct place please point me in the right direction, i have tried a ticket etc. someone must have some sort of idea, is it being looked at?

[proud spade]

#community-helpdesk or #submit-support-ticket

[gusty otter]

is there anyway to have a custom goal bar that isn't Subs, tips, and cheers individually but combined all together?
like i noticed that in the widget data it keeps track of all 3 but can i combine the money gained into one goal bar? like someone subs and the bar goes up $6/$600 then someone gifts 100bits and it goes to $7/$600 someone donates on paypal and now it's $17/$600

[severe shell]

It seems to be a job of "One Bar To Rule Them All":
#widget-share message

[gusty otter]

ty sm! will test this out tonight!

[proud spade]

Was looking for that and couldn't find it.

[hollow harbor]

hey, I'm working on a custom widget where I get events and do different stuff, i got to subscription events and i wanted to do different things depending if it a bulk gift or if it's a single gift, but in my current code a bulk gift happens and then however amount was gifted happens as a single event one after the other, could i get some help on how i could fix this? i tried a lot and nothing worked so far 😣

[topaz bough]

The activities endpoint seems like a great solution. I haven't worked with Streamelements that much.
Can activities be different from eachother, so have different animations?
A purchase will have a different animation than a tip or subscription.
But also there will be difference between purchases, that all have their own animations.
Is it possible to have different things?

[severe shell]

You can create variations on the alert box, but I don’t know which variations a purchase can accept.
Another option is creating your own custom widget, so you can do whatever you want.
Check the overlays part in https://docs.streamelements.com

[strong glacier]

Hi, how are you? Sorry for my English background, I speak Portuguese and I'm using a translator.

Two years ago, I had created a !bonus command in my live stream where people could come once a day to get 300 points.

The Streamelements bot automatically executed the command with the variable.

!addpoints ${user} 300

I went live again and the command doesn't work. I've tried everything and could I have forgotten something?

[severe shell]

There are some conversations here in this channel about that.
Check this one here, for example:
#dev-chat message

[severe shell]

Well, we don’t know what you tried (I’m sure it’s not everything), but you can check the options below:

• is the command enabled in Streamelements commands?
• usually !addpoints are used by moderators, check if the userlevel is set to everyone or just moderators
• how is the cooldown period for user and globally for that command?
• If the last time you went live was two years ago, try to logout and login again on streamelements website, so it can refresh your token.

One more thing, you created a !bonus command and that command makes the bot run !addpoints? If so, probably you are using another bot, because it isn’t possible to run a command and the SE bot run another one inside the command.

[hollow harbor]

ohh! i'll look, thanks!

[fierce bluff]

Hello. I've had a follower counter for several months and suddenly it's stopped working. At the time there was others who were experiencing the same thing so I simply waited for a fix but its been 2 months now. Is there a fix for the follower counter?

[severe shell]

What is that follower counter exactly? A widget, a chat command, a plugin on Streamdeck?

[fierce bluff]

Squires of The Ayated: {count}/50
Labels>followers>alltime>followercount

[severe shell]

Ok, so it's one of the default widgets. Well, the total from there is fetched from Twitch directly, but if it's not being updated in your case, I suggest that you reset your session data, so the Twitch data can be re-fetched.
From your activity feed, click on the cog icon > Reset session.

[fierce bluff]

did that, still not working. someone in general chat did something (not sure the details of what exactly) and said it should fix next time i go live. i'll try that and submit a ticket if its still not working

[severe shell]

Yeah, opening a ticket would be the next suggestion 🙂

[frank dust]

Hey i would like to switch to the streamlabs bot, but no command, custom or not, works. What can i do to fix it?

[minor elbow]

streamlabs? streamelements? 🤨

[frank dust]

obs

[minor elbow]

Which bot are you referring to, the one from streamlabs or the one from streamelements?

[frank dust]

Streamelements, I think

[frank dust]

some commands are always active

[minor elbow]

do you have the bot as a moderator? Is the bot inside the channel?

[frank dust]

yes, if this the name

[hardy walrus]

That's not ours.

[frank dust]

oh ok, what is the correct name?

[hardy walrus]

Streamelements.

[frank dust]

oh bro i am so lost

sry

my bad

thx

[minor elbow]

@frank dust type /moderator streamelements in your twitch chat and then go to the control panel to enter your channel https://streamelements.com/dashboard

[frank dust]

everything went well

Thank you

[topaz bough]

Hi, how does this work with variations in the alert box?
I've set up a alertbox in the overlay for purchases. I want to have different variations based on the purchase.
How is that done?

[severe shell]

Well, go to the Purchase alert > Variation settings, add a new variation and check what are the possible variations you can have.
If the ones in there are not related to what you want, then you will need to create a custom widget manually.
https://docs.streamelements.com/overlays

[topaz bough]

Yeah, I saw that one of the varations is 'amount'.
But that isn't something that is send with the API. Only price and quantity, which doesn't seem to be amount (already tested).
For now I will go with creating a tip. With a high amount (100006 for example) to fire specific varation (no one will tip that eventually, so that's safe but not the best lol)

Do you have any suggestions for a subathon timer? Is that something that Streamelements already has? Otherwise I will create simple app for that

Thanks for the help by the way, your suggestions really made it lot easier for me. Happy these communities exists 🙂

[severe shell]

There are some created by the community here:
#widget-share message

#widget-share message

There are some other widgets in #widget-share, it's a good start to check how custom widgets are created and the code itself

[tranquil spruce]

can anyoen help with the (random.chatter) command not workign

Moderator14-Month Subscriber (1-Year Badge)VerifiedStreamElements: ThatLadFromTheUK is fucking <no chatters> Getting married to <no chatters> And kiss <no chatters>

please

[severe shell]

It's kinda tricky, because we don't know exactly what causes the bot not being able to read the user list and replies <no chatters> from $(random.chater) command. This is what I usually suggest doing:

• Perform a logout/login on Streamelements (https://streamelements.com/logout).
• After that, part the bot and join it again (https://streamelements.com/dashboard/bot/settings).
• Try the command again after some minutes, so the bot can read the chat user list.

[tranquil spruce]

BRILLIANT , thank you so much for your reply , this has worked a treat

[silver olive]

I have an idea of a sound command that plays random sounds anytime its used. How do I do that?

[severe shell]

You would need to write a custom widget for that.
https://docs.streamelements.com/overlays/custom-widget

You can find some examples in #widget-share, so you can look at the code and understand how it works.
"Sound on command" seems to be the most similar to what you look for: #widget-share message

[white ember]

Hello. I’m trying to get my chat box work, but no matter how many times I have look up for tutorials, it’s still not working. How do i fix it or something?

[severe shell]

What chatbox are you talking about and what do you mean by still not working? There isn't much to do with chatboxes

[white ember]

Word is not showing up when I text

On my obs

[astral spoke]

Hi, I saw that one of your moderators talks in pt-br, so I'm going to send it in this language, hope is not a problem:
@severe shell pelo o que eu vi você fala português então vou mandar a dúvida assim
Eu já entrei em contato com o suporte, criei um ticket e falaram que ia mandar para os Devs para ver o que podia fazer, mas queria ver aqui se alguém tem a solução
Basicamente desde o dia 13 de novembro o StreamElements parou de registrar os eventos recentes referente ao meu canal do YouTube. Com a conta da twitch está tudo certo, mas no YouTube, ele só registrou até essa data e todo membro, superchat ou até mesmo inscrição não é registrado, e assim, o alerta não toca. Já tentei relogar, tirar a permissão do SE e colocar de novo, fiz de tudo mas nada... alguma outra solução/ideia?

[severe shell]

Bom, se você já entrou em contato com o suporte via ticket, removeu o bot e relogou, então realmente não tem muito o que a gente possa fazer aqui.
Se o suporte disse que ia enviar para os devs, então provavelmente tem alguma coisa interna na sua conta que eles não conseguem resolver, nesse caso, só esperando mesmo.

[severe shell]

Well, the only options here are logout/login from Streamelements, remove the bot and add it again, like here:
#dev-chat message

If that doesn't work for you, then you maybe should open a ticket so support can investigate.

[uneven oxide]

@white ember ⤵️

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!

[astral spoke]

Entendi, mas assim, você tem alguma outra ideia de algo "genérico" que geralmente a galera faz e resolve? Vai que tentando isso dá uahuahuhuahu mas obrigado mesmo assim!

[white ember]

Already did

[severe shell]

O que se normalmente se faz é logout/login (https://streamelements.com/logout) e remover o bot e adicionar novamente (https://streamelements.com/dashboard/bot/settings ). Fora isso não tem muito o que possa ser feito.
Bom, posso ver se dando refresh no webhooks resolve, mas acredito que o suporte já tenha tentado isso. Qual o Account ID do seu usuário do Youtube? Você pode verificar isso aqui:
https://streamelements.com/dashboard/account/channels

[astral spoke]

Mando a ID por aqui mesmo?

[severe shell]

Pode mandar

[astral spoke]

654dc7bdb2b8a137974cb0b0

[severe shell]

Tentei aqui e deu falha, disse que talvez você precise refazer o login no Streamelements novamente. Mas realmente pode ser algum problema interno na sua conta e aí só os devs que vão poder resolver mesmo.

[astral spoke]

que estranho, vou tentar mais uma vez retirar e colocar o SE na conta, mas acho que o que resta é esperar. Obrigado!

[white ember]

sorry? what?

[severe shell]

I was talking to Caprio

[white ember]

oh

hey! my chat box works!

[silver olive]

how do i set the command up to make it pick one of the randoms sounds that I have in the video and sound on command widget?

[severe shell]

In the left panel, there is a part where you say the command to trigger each command. I suggested that widget so you could have a look and create your own using Javascript. That one doesn't have a single command to trigger random sounds

[native raven]

Hello everyone, just trying to access the API.

I'm hitting from postman

const options = {
method: 'GET',
headers: {'Content-Type': 'application/json', Authorization: 'Bearer <my_jwt>'}
};

fetch('https://api.streamelements.com/kappa/v2/activities/channel', options)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));

I got

{
"statusCode": 403,
"error": "Forbidden",
"message": "Not allowed to perform this operation"
}

What am i doing wrong?

Thank you guys.

[severe shell]

"channel" is your Account ID, actually. You can find it here: https://streamelements.com/dashboard/account/channels

[native raven]

Okay that did work partially

{
"statusCode": 401,
"error": "Unauthorized",
"message": "No authorization token was found"
}

[severe shell]

Your put your jwt wrongly, probably

[native raven]

Copy pasting jwt token to jwt.io giving me invalid signature

[severe shell]

That's normal, because you don't have the secret to decode the JWT.
As for POSTMAN, put the JWT in the Authorization tab, not in the Params tab

[native raven]

Oh my.... of course that make sense (back to school 😄 )

How can i get the keys?

[severe shell]

You can't, it's internal, you don't need that.

[native raven]

So i dont need clientid & clientsecret to access the api from NodeJS or any other kind of framework?

I just saw the github repo that you have created authentication-samples, if i need to use it in a live webapp i dont need different keys?

[severe shell]

@robust pollen I'm not sure why your message is gone, but answeringit: OBS has issues with some CSS options, so maybe you need to find alternatives for those CSS options. Maybe chatgpt or other AI chat assistant can give some results that work to achieve something similar (that's what I usually do with CSS things I don't know) 😅

[robust pollen]

I removed it thinking I was in the wrong chat for it.

I tried adding custom css in the OBS Studio browser source properties area to no avail

[severe shell]

You are mixing things... You can use JWT directly for personal projects, so you can grab it from your account page. However, if you want a Client ID and Client Secret, you are going for oAuth. Then you need to apply for that. There is a link on this page for that:
https://dev.streamelements.com/docs/api-docs/cd02cda5171ea-o-auth2

[native raven]

Okay, i've already apply to that, thank you for your patient.

[severe shell]

Yeah, some values are not interpreted well by OBS, not sure why. I initially thought it was because of the Chromium version, but I'm not sure about that anymore. I would suggest that you look for other CSS properties that can do the same and are compatible to OBS.

We have some similar discussion here, where paint-order: stroke fill was not working correctly on OBS:
#community-helpdesk message

[robust pollen]

Thank you 🙂

[astral marsh]

Hello everyone,
i'm a bit confused about the correct websocket to use for my usecase.
If i have understood it correctly, i have https://realtime.streamelements.com using socket.io from here: https://dev.streamelements.com/docs/api-docs/5a84cc101a9c5-connecting-via-websocket-using-o-auth2
And there is wss://astro.streamelements.com using the basic websocket from here: https://docs.streamelements.com/websockets

I would like to receive the same events as in the overlay editor.
Like when someone writes a message in chat (twitch, youtube, facebook) i want the event via streamelements.
What is the correct websocket?

I managed to connect to https://realtime.streamelements.com via socketio and authenticate but I'm not receiving any events. Do i have to subscribe? Sadly the link to the examples are broken

Has anyone done this before?

[severe shell]

Chat messages are not captured by Streamelements websockets or socket.io. For that you would need to use Twitch API directly.

[hardy walrus]

And to add onto that: YouTube chat is atrocious for a dev pov as it updates SLOWER than hell compared to twitch.

[astral marsh]

Ah okay, I guess I will then have to emulate messages for now. Will this be considered in the future or is it out of the current scope?

Luckily there is a emulated one from twitch here: https://github.com/StreamElements/widgets/blob/master/CustomChat/widget.js

[severe shell]

I don't think that will ever be. You have the Twitch API to do that directly using EventSub
https://dev.twitch.tv/docs/chat/send-receive-messages/#receiving-chat-messages
https://dev.twitch.tv/docs/eventsub/handling-websocket-events/

[pure lake]

Hello. Thanks for taking a look, I am creating a custom widget for Overlay. I want to debug the code, but in Chrome's DevTool, where is the js source I have set up?

[severe shell]

Easiest way to find it is just doing a console.log("Starts here") on the beginning of your JS code. Then, in console it will give you the link to the part of the code..
Or if your console is full of info, you can highlight it with a bigger font:

console.log("%c Starts here", "font-size: 3rem; color: white")

[pure lake]

Thanks! I appreciate the quick reply, I was able to verify the js source!
However, a new question has arisen.
The name of my code translates to the file name “ef23100c-fb69-4950-859c-a281dcee667b”, which is not in the directory listing in the middle of the image.
Is there any way to find out where the file is located?
You don't have to answer this question as it is just a concern and not information I need right now.

[severe shell]

It is in blob:https://streamelements.com directory > streamelements.com > and then you will find the file in there

[pure lake]

Found. Thank you so much! I appreciate it.🥰 🙏

[glacial pumice]

Weird, I'm getting a 404 error with https://api.streamelements.com/kappa/v2/bot/{channel}/levels using my own channel ID and JWT. I can hit without /levels with that JWT successfully so I have auth correct, but it 404s otherwise.

[glacial pumice]

I'm trying to update a copy of the Credits overlay/widget to include my moderators in it, automatically pulled, but testing with Bruno leads to that 404 for that URL =/

https://dev.streamelements.com/docs/api-docs/d0a1ab561c0e7-channel-levels

[severe shell]

Yeah, that endpoint doesn't exist (outdated documentation, unfortunately).
Try https://api.streamelements.com/kappa/v2/bot/ACCOUNT_ID/users instead

[glacial pumice]

Ah cool, thank you!

Ah, technically only for the bot, but I realize now that makes sense. Weh; I was hoping the /users/current would but it shows empty, guessing it means logged-in users. Not sure I want to try and set the API token stuff up to do that with Twitch yet, but I can at least do a comma split on a text field.

[upper lichen]

Looking for some guidance OR sample code to update/edit counter using javascript code in a custom widget... thanks in advance for your help

[severe shell]

#dev-chat message
The bad news is that it only works with JWT

For a custom widget, an option would be using SE_API.store.set() / .get(), instead
https://docs.streamelements.com/overlays/custom-widget#se-api

[upper lichen]

Thanks for your response… I did play with SE_API too.. but it didn’t store the data across sessions when I tested…
Session 1: I stored and retrieved data
Session 2: when I tried to retrieve data it came back blank as object

[severe shell]

It saves the data permanently. Check if you are trying to get the correct key you saved.
You can see all keys you have stored with this, check the browser console:

window.addEventListener('onWidgetLoad', async (obj) => {
  apiToken = obj.detail.channel.apiToken;
  id = obj.detail.channel.id;
  const request = await fetch(`https://kvstore.streamelements.com/v2/channel/${id}/customWidget`, {
    method: "GET",
    headers: { "Authorization": `apikey ${apiToken}` }
  });
  const response = await request.json();
  console.log(response);
});

[upper lichen]

Thanks will retest

[upper lichen]

hey i was successful... thanks for the help Much appreciated

[scarlet agate]

hello, I'm trying to create a custom chat command using the time_online field on ${user}.
My idea is to have a command that gives the ratio between the time I've spent streaming and the user watchtime. Any hints on how to accomplish this? This is my current approach:

/me ${user} has watched $math{ ${user.time_online} / ${user.time_online jpstudytime} * 100 } % of every minute streamed by JP

[severe shell]

Well, there are some issues.
The math variable would be ${math} and not $math{}, like you did.
${user.time_online} does not give a number, but a string, like 9 days 18 hours, so math is not possible to calculate that.

So, no, that won't work with Streamelements variables. You would need to setup a server (or a script) that could read the values and convert to you.

[scarlet agate]

thank you for pointing out the ${math} error. As for the values being a string, I imagined that was going to be an issue, but I was hoping someone would provide a way to obtain the raw numeric value in minutes or whatever unit of time the bot uses internally. So that's impossible?

edit: Seeing my response now, how do you make the code block be just a part of the line and not the whole line?

[severe shell]

There isn't any way to get the watchtime value in hours/minutes/seconds or whatever as a number on Streamelements directly. 😦
As regards the inline code, use just a single ` at the beginning and another at the end.

[scarlet agate]

thank you @severe shell !

[outer sage]

Is there a way to access the TTS api through something like Godot to have it read messages through something like chat messages?

[severe shell]

If Godot has support for REST API requests (don't see why not), that is possible.
But in order to read chat messages, you would need to use the Twitch API using EventSub: #dev-chat message

[lunar beacon]

hello.. I was trying to fetch a simple response through a custom API on SE. But I'm getting the CORS Policy error - Access to fetch at '(https-url)' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I'm not sure but maybe the response is being blocked by SE. Is there anything I could do to fix it.

Thanks for the help. 🙂

[potent halo]

Unless I misunderstood, you have a few errors in your understanding of cors. I'd suggest reading up on that topic.

TL;DR below
CORS is not something SE puts in place. It's your browser. It's a way for any website to limit the usage of content to specific websites.
Imagine if you will you making a cool art website and some random guy just writes code that displays your website on his own with ads. Un-Fun, right? But you can set a strict cors policy (+ few others) that limits usage to your domain, disabling any js/html that fetches your website dynamically.

Short: If you have control over the "custom API" you can set the response header Access-Control-Allow-Origin: * to just allow all. If you have no control, there technically is nothing you can do about it. Try asking the api provider instead.

[lunar beacon]

Thanks for your response Lucas! I do have the control of Custom API and allowed access control origin. Now I ran into another error though.. 😅
My response is not what's expected. Let me play around w this and come back if I get stuck. Thanks for the help though, really appreciate it.

[hexed stone]

All I'm tryna do is link a single action between a streamers overlay and my bot. Do I really needa fill out an entire application for an OAuth token? Also, it's just a bot, so I dont have a website, logo, any of that jazz, so what am I supposed to put for the required fields?

[twilit flume]

Hi all,

I want to create a community counter called !train where anyone can come and use that command and it adds to their training total.

I have set up the counter and I have a command called !train with "${sender} has trained today!
You've trained ${count train_${sender}} times.
Keep pushing for greatness!"

but this is what I'm getting back:
ModeratorVerifiedStreamElements: NickYeomansOfficial has trained today! You've trained times. Keep pushing for greatness!

So it seems that the count isn't actually being counted and for all my online searching I can't find the fix to this.

I want the count to be specific to the user, so a global count wouldn't work.

Any help would be greatly appreciated

[hardy walrus]

@twilit flume This might help

[twilit flume]

Wow! Thanks very much.
It works

If I put a negative command cost, does it give point when people activate the command?

[hardy walrus]

There's something somewhere that subtracts iirc but would need to do some digging

[severe shell]

You could simply try...

[whole crag]

Hey everyone,

I’ve created a custom widget in StreamElements, focused on YouTube integration.

The widget displays names and images of my members in the following categories:

• Newest Ultra: The most recent paid member on my channel.
• Latest Superchat: The most recent superchat on my channel.
• Most Superchats: The user who has sent the highest quantity of superchats this month (not the total value).
• Biggest Superchat: The largest superchat this month.
• Top Superchatter: The user who has donated the most total money through superchats this month.

I need help accurately fetching the data for each of these categories.

Here’s what I’ve tried so far:

• I’ve read the events documentation (https://docs.streamelements.com/overlays/custom-widget-events#on-widget-load). However, the data doesn’t seem to be accurate. For instance, the data["superchat-latest"] event, which should trigger for superchats, also gets triggered for tip events.
• Currently, I’m using the onWidgetLoad and onSessionUpdate events to fetch data. Is this the correct approach, or should I use an API instead?

For each category, I need the following data:

• Name
• Avatar
• Amount (if applicable)

Any guidance on how to fetch accurate data for these categories would be greatly appreciated.

Thanks in advance!

[potent halo]

There are many ways to execute code remotely. An example for bidirectional communication is the websocket protocol. In this case you can open a websocket server on the bot side (server) and the consumer in the overlay code (client)

I'm also not quite sure why you'd think you need OAuth for this

[severe shell]

onWidgetLoad will run only when your widget is started or refreshed. It will show all session data SE has for the account. This is only useful when you want to show info at the start.
For new events, onEventReceived and onSessionUpdate are the suitable ones. You can see all the data in browser console with a console.log(obj) in each of the listener functions. For your case, onSessionUpdate works better

window.addEventListener('onSessionUpdate', async (obj) => {
  console.log(obj);
})

Tip events and Superchats are totally different from each other . Tips are the ones sent from Streamelements tipping page (https://streamelements.com/USERNAME/tip), whereas superchats are the ones directly from Youtube livestream.

For a widget, you don't need to use the Streamelements API (unless you need some specific information). Also, pay attention that the data from onWidgetLoad and onSessionUpdate are in different locations.

onWidgetLoad - obj.detail.session.data["sponsor-latest"]
onSessionUpdate - obj.detail.session["sponsor-latest"]

Every one of them can be found in browser console with a console.log(obj), but making some work for you:

The most recent paid member on my channel - obj.detail.session["sponsor-latest"]
The most recent superchat on my channel - obj.detail.session["superchat-latest"]
The user who has sent the highest quantity of superchats this month - Not available
The largest superchat this month - obj.detail.session["superchat-monthly-top-donation"]
The user who has donated the most total money through superchats this month - obj.detail.session["superchat-monthly-top-donator"]

For each one, you can check if the name, amount and avatar is available.

[whole crag]

Thank you so much for the response, everything is in place now except for the images. The image link isn't showing up alongside the name and amount. Is there a setting I’m missing on my end that needs to be enabled in order to fetch the images?

Also, one more thing—currently, the currency is displayed in US dollars. I would like it to show in Euros instead. Here's how I’m currently getting the currency—do you know if there's a way to update this to Euros?

window.addEventListener('onWidgetLoad', function (obj) {
userCurrency = obj.detail.currency;
globalSessionData = obj.detail.session.data || {}; // Initialize global data
console.log('onWidgetLoad data : ', globalSessionData);
updateCarousel(); // Populate initial carousel data
});

Appreciate your help!

[severe shell]

Not all items have avatar image, and there is nothing that can be done, unfortunately. I think only *-latest and *-recentwill have an avatar, but I'm not totally sure.
As regards the currency, go to Tipping Settings page (https://streamelements.com/dashboard/tipping-settings) > Page Settings and change the currency to EUR. That will update the values of currency property object.

[whole crag]

The currency fix worked like a charm, thanks so much!

Unfortunately, it seems like the images aren’t available even for the *-recent categories. Is there any other way we can fetch image data? Maybe through an extension, API, or something we can link with StreamElements to retrieve the images?

Thanks again for all the help so far! Everything is resolved except for the image issue.

[severe shell]

Hmm, I'm not used with Youtube custom widgets, so I don't know what you can get from superchats or sponsor (member).
Based on your screenshot, there is no info you could use in an API request, as you only have the display name, amount and message. There isn't any form of id, channel name, handle, or anything useful. So I don't believe you will be able to have that easily.

[whole crag]

Well i do get channel name and everything in the 'obj'. Right now i just go into 'obj->detail'. But i can get the channel info and api key from the 'obj'.
Is there anything i can get with that info?

[severe shell]

I meant the id/channel name/handle from the user who sent the superchat or became a member. Without any info that is individual to the user it's impossible to retrieve the avatar image from any existing API (if that exists).

[whole crag]

Oh i get it now, that totally makes sense. Thanks for all the help.
Appreciate it brother 🙌

[merry roost]

Hey, I'm trying to get the stream from my Xbox onto my Macbook so i can get it on the OBS for my stream i feel like I've tried everything can you help

[minor elbow]

This question has been asked In #community-helpdesk, basically you have to connect your Mac with a capture card or open the Xbox app and then link the console with the Xbox app and click on stream to watch the game on your Mac and then capture screen from obs, from the experience I am already telling you that the most comfortable and easy thing is to buy a capture card, It saves you problems and everything is simpler

[whole crag]

Hey everyone, I'm trying to get my channel data using streamelements API, but it gives error of Forbidden, any idea why is that?

  apiToken = obj.detail.channel.apiToken;
  channel = obj.detail.channel.id;
  const request = await fetch(`https://api.streamelements.com/kappa/v2/stats/{channel}`, {
    method: "GET",
    headers: { "Authorization": `apikey ${apiToken}` }
  });
  const response = await request.json();
  console.log(response);
});

[severe shell]

You cannot use apikey for that endpoint. It only works with JWT

[whole crag]

Can you guide me in the right direction for that?

[severe shell]

You can find the JWT here (JWT Token):
https://streamelements.com/dashboard/account/channels

In the header, you will use:
"Authorization": `bearer YOUR_TOKEN`

[hexed stone]

Are there onEventReceived's for Youtube superchats/tips/subs? If so, what are they?

[severe shell]

Probably superchat-latest, subscriber-latest and tip-latest

[whole crag]

Still getting the Forbidden error, am i doing something wrong here?

window.addEventListener('onWidgetLoad', async (obj) => {
  apiToken = "MY_TOKEN";
  channel = obj.detail.channel.id;
  const request = await fetch(`https://api.streamelements.com/kappa/v2/bot/filters/{channel}`, {
    method: "GET",
    headers: { "Authorization": `Bearer ${apiToken}` }
  });
  const response = await request.json();
  console.log(obj.detail.channel);
  console.log(response);
});

[severe shell]

Your URL is invalid. It should be ${channel}

[whole crag]

Dang it, the small things. Thanks for the help brother 🙌

[hexed stone]

Tryna have a widget fetch information from my bot, does self-signed certificate not work or do I need to modify something to allow it to work?

Otherwise, is there a way to just push a custom event to the widget that causes OnEventReceived to run?

[severe shell]

I didn't get your first question, are you having any error message, are you trying to reach any endpoint or what?

To send an event from external source to your overlay, you can send a POST request to socket endpoint:
https://api.streamelements.com/kappa/v2/channels/ACCOUNT_ID/socket

headers:
content-type: application/json
accept: application/json
authorization: bearer JWT_TOKEN or apikey OVERLAY_TOKEN

body:

{
  event: 'event:test',
  data: {
    message: 'Abracadabra',
    title: 'Nice!',
    username: 'any person'
  }
}

event: event:test will trigger "onEventReceived"
The content of data can be anything you want.

Account ID, JWT token and Overlay token can be found here:
https://streamelements.com/dashboard/account/channels

[hexed stone]

Much appreciated. My first question was that I have an HTTPS express server hosted on my website but it has a self-signed certificate. When I tried to have a Widget fetch information from it, it responded with the error ERR_CERT_AUTHORITY_INVALID, though when I fetch from my personal computer it seems to work properly, despite the code being the same. Regardless, the second option works far better so the first question is irrelavent, I appreciate the response!

[hexed stone]

Doesn't seem to allow me to send anything as an event besides 'event:test'. Is there restrictions to this or is it solely event:test?

[severe shell]

Do you want to send something more specific? You could send other type of events, but the one you can customize as you want is event:test.

[hexed stone]

No, this is fine. I was just seeing if I could name it something more custom such as tiktok:subscribe or something

[severe shell]

Well, you can add anything in data object, so you can create a specific property for that. The "message", "title" and "username" were just examples, you can create a whole object in there

[hexed stone]

Last question! From the Youtube version of StreamElements, are superchats displayed solely in one currency type, or do they appear as whatever type youtube says they are. Is there any automatic conversion for this, or do I have to find something else that converts it for me?

[severe shell]

That's a good question, and I don't know the answer because I don't manage Youtube channels (yet) to check. If you find the answer some day, you can post it here 🙂

But, if you need, SE has an endpoint for currency conversion, so you can use it in case you need to convert anything:
https://api.streamelements.com/kappa/v2/tipping/rates

As I could understand, the conversion is based on US Dollar. Not sure how precise or updated that endpoint is, but I found it and could help with the conversion if needed.

[potent halo]

You sort of answered your own question there ^^
You signed the contract with the website yourself (self-signed-certificate)
Anyone other than you does not have that certificate. Therefore the signature could not be verified by anyone other than you.
2 options to solve this:

1. Don't use SSL. Only do this if the communication has no personal information or otherwise critical data in it.
2. Use free CAs. One way would be using "certbot".

[hexed stone]

Any way to make custom event:test posts with 'subscriber-latest' to socket be displayed in the actual activity feed?

[severe shell]

No

[viscid matrix]

hi i am very new to coding, and the code works for everything else but the change of font, and i have no clue how to get it to work, like the settings menu has the font types and they´re loaded but if you press one it doesn´t change it in the widget, please help

[severe shell]

Please post the text of each tab here instead. It is hard to help with images, because we cannot test it.
You can wrap each code sent with three backticks ( ```)
``` Your code here ```

The first thing I can see it that you can remove everything in HTML tab starting from line 4
You can also remove the lines 38 to 43 in CSS tab

[viscid matrix]

<div id="counter1" class="counter">0</div>
<div id="counter2" class="counter">0</div>```

```/* Grundlegende Stile für die Zähler */
#counter1 {
    font-family: {{fontfamily1}}, serif; /* Stelle sicher, dass die Font-Family aus dem Field kommt */
    color: {{fontcolor1}}; /* Benutze die Benutzerdefinierte Farbe für Counter 1 */
    font-size: {{fontsize1}}px; /* Stelle sicher, dass die Einheit 'px' hinzugefügt wird */
    text-align: center;
    margin: 10px 0;
}

#counter2 {
    font-family: {{fontfamily2}}, serif; /* Stelle sicher, dass die Font-Family aus dem Field kommt */
    color: {{fontcolor2}}; /* Benutze die Benutzerdefinierte Farbe für Counter 2 */
    font-size: {{fontsize2}}px; /* Stelle sicher, dass die Einheit 'px' hinzugefügt wird */
    text-align: center;
    margin: 10px 0;
}

/* Beispiel für unterschiedliche Schriftgrößen - optional, wenn nicht verwendet */
.large {
    font-size: 64px; /* Größere Schriftgröße */
}

.small {
    font-size: 32px; /* Kleinere Schriftgröße */
}

/* Beispiel für unterschiedliche Farben - optional, wenn nicht verwendet */
.red {
    color: #FF0000; /* Rote Schriftfarbe */
}

.green {
    color: #00FF00; /* Grüne Schriftfarbe */
}

.blue {
    color: #0000FF; /* Blaue Schriftfarbe */
}```

let count2 = 0;

function updateCounters() {
    document.getElementById('counter1').innerText = count1;
    document.getElementById('counter2').innerText = count2;
}

// Funktion zum Steuern der Zähler über Chat-Befehle
function processCommand(command) {
    const args = command.split(" ");
    const action = args[0].toLowerCase();
    const counter = args[1];

    if (counter === "1") {
        if (action === "!increment") {
            count1++;
        } else if (action === "!decrement") {
            count1--;
        }
    } else if (counter === "2") {
        if (action === "!increment") {
            count2++;
        } else if (action === "!decrement") {
            count2--;
        }
    }
    updateCounters();
}```

    "fontcolor1": {
        "type": "colorpicker",
        "label": "Counter 1 Farbe",
        "default": "rgb(0,0,0)"
    },
    "fontcolor2": {
        "type": "colorpicker",
        "label": "Counter 2 Farbe",
        "default": "rgb(0,0,0)"
    },
    "fontfamily1": {
        "type": "googleFont",
        "label": "Counter 1 Schriftart",
        "default": "Roboto"
    },
    "fontfamily2": {
        "type": "googleFont",
        "label": "Counter 2 Schriftart",
        "default": "Roboto"
    },
    "fontsize1": {
        "type": "number",
        "label": "Schriftgröße Counter 1 (px)",
        "default": "16"
    },
    "fontsize2": {
        "type": "number",
        "label": "Schriftgröße Counter 2 (px)",
        "default": "16"
    }
}```

[viscid matrix]

i hope i sent it right ? 🥺

[severe shell]

Yep!
You just forgot to import the fonts from Google fonts. Add these lines on top of your CSS tab and the fonts should change correctly:

@import url('https://fonts.googleapis.com/css?family={fontfamily1}');
@import url('https://fonts.googleapis.com/css?family={fontfamily2}');

[viscid matrix]

oh my gosh thanks 🎉 maybe i should not try stuff i never did at 2 am 😂

[hexed stone]

took a bit but looks like it does automatically convert which is great

[visual sundial]

hi i need help i cant see New OverLay > Settings > Open Editor

any clue how to enable the Dev Tools? for Open Editor?

[severe shell]

You have to create a custom widget first to see the Settings > Open editor

[severe shell]

This is a chat, you don't have that option.

That option is only available in custom widgets

[visual sundial]

ah i see sry for the noob question found it thanks

[severe shell]

No worries, that's not a noob question 🙂

[visual sundial]

is there a docs for this if i wanna link to chat api?

i only found this https://docs.streamelements.com/overlays/widget-structure

or if i can buy template online?

[severe shell]

That's the documentation indeed.
You can find other chat boxes created by the community in #widget-share. They are free and you can check the code and modify the way you want for you

[visual sundial]

thanks mate is a lovely suggestion

[visual sundial]

last question how to get more scale resolution for the widget in obs?

[vernal geyser]

[wind epoch]

const goalAmount = 70000; // Set the goal amount
let currentAmount = localStorage.getItem('currentAmount') ? parseInt(localStorage.getItem('currentAmount')) : 100;
// Initialize the widget with the current amount
window.addEventListener('load', function() {
updateWidget(currentAmount); // Update widget when page loads with ₹100 or the stored amount
});

function updateWidget(amount) {
// Ensure the received amount is parsed as a number
amount = Number(amount);

if (isNaN(amount)) {
    console.error("Invalid superchat amount:", amount);
    return;
}

// Update the current amount
currentAmount += amount;

// Save the updated amount in localStorage
localStorage.setItem('currentAmount', currentAmount);

// Calculate progress percentage
const progressPercentage = Math.min((currentAmount / goalAmount) * 100, 100);

// Update progress bar width
const progressBar = document.getElementById('progress-bar');
progressBar.style.width = `${progressPercentage}%`;

// Update stats display
const goalStats = document.getElementById('goal-stats');
goalStats.textContent = `₹${currentAmount.toLocaleString()} / ₹${goalAmount.toLocaleString()} (${progressPercentage.toFixed(2)}%)`;

}

// StreamElements Integration
window.addEventListener('onEventReceived', function (event) {
const data = event.detail.event;

// Handle SuperChat events
if (data.type === "superchat" && data.amount) {
    updateWidget(data.amount);
} else {
    console.warn("Received unsupported event type or missing amount:", data);
}

});

can anyone help me yesterday i have received the 100 rs so the bar is not starting from 100 it is starting from 0

[hardy walrus]

@viscid matrix that link isn't supposed to be publicly shared. Share the code itself.

[viscid matrix]

discord says its to long 🥺

[hardy walrus]

Break it into chunks.

[viscid matrix]

i will try

[hardy walrus]

Or use pastebin/gist

[viscid matrix]

what is that ? 🥺

[hardy walrus]

https://gist.github.com/

[viscid matrix]

i will try to split it and sorry i didnt know i wasnt allowed to share that link 🥺

<div>
    <h1 id="counter1">0</h1>
    <h1 id="counter2">0</h1>
    
</div>```
```@import url('https://fonts.googleapis.com/css?family={{fontfamily1}}');
@import url('https://fonts.googleapis.com/css?family={{fontfamily2}}');

/* Grundlegende Stile für die Zähler */
#counter1 {
    font-family: "{{fontfamily1}}", serif; /* Schriftart für Counter 1 */
    color: {{fontcolor1}}; /* Schriftfarbe für Counter 1 */
    font-size: {{fontsize1}}px; /* Schriftgröße für Counter 1 */
    text-align: center;
    margin: 10px 0;
    text-shadow: {{textshadowWidthX1}}px {{textshadowWidthY1}}px 4px {{textshadowColor1}}; /* Textschatten für Counter 1 */
    -webkit-text-stroke: {{textstrokeWidth1}}px {{textstrokeColor1}}; /* Textrandfarbe und -breite */
}

#counter2 {
    font-family: "{{fontfamily2}}", serif; /* Schriftart für Counter 2 */
    color: {{fontcolor2}}; /* Schriftfarbe für Counter 2 */
    font-size: {{fontsize2}}px; /* Schriftgröße für Counter 2 */
    text-align: center;
    margin: 10px 0;
    text-shadow: {{textshadowWidthX2}}px {{textshadowWidthY2}}px 4px {{textshadowColor2}}; /* Textschatten für Counter 2 */
    -webkit-text-stroke: {{textstrokeWidth2}}px {{textstrokeColor2}}; /* Textrandfarbe und -breite */
}

/* Beispiel für unterschiedliche Schriftgrößen - optional, wenn nicht verwendet */
.large {
    font-size: 64px; /* Größere Schriftgröße */
}

.small {
    font-size: 32px; /* Kleinere Schriftgröße */
}

/* Beispiel für unterschiedliche Farben - optional, wenn nicht verwendet */
.red {
    color: #FF0000; /* Rote Schriftfarbe */
}

.green {
    color: #00FF00; /* Grüne Schriftfarbe */
}

.blue {
    color: #0000FF; /* Blaue Schriftfarbe */
}

let count1 = 0;
let count2 = 0;

// Funktion zum Aktualisieren der Zähler
function updateCounters() {
    // Zähler 1 aktualisieren
    const counter1Element = document.getElementById('counter1');
    counter1Element.innerText = count1;

    // Textschatten und Textumrandung für Counter 1
    const enableTextShadow1 = document.getElementById('enableTextShadow1').checked;
    const textshadowColor1 = document.getElementById('textshadowColor1').value;
    const textshadowWidthX1 = parseInt(document.getElementById('textshadowWidthX1').value);
    const textshadowWidthY1 = parseInt(document.getElementById('textshadowWidthY1').value);
    const textStroke1 = document.getElementById('textStroke1').checked;
    const textStrokeColor1 = document.getElementById('textstrokeColor1').value;
    const textStrokeWidth1 = parseInt(document.getElementById('textstrokeWidth1').value);

    // Setze die CSS-Eigenschaften für Counter 1
    if (enableTextShadow1) {
        counter1Element.style.textShadow = `${textshadowWidthX1}px ${textshadowWidthY1}px 4px ${textshadowColor1}`;
    } else {
        counter1Element.style.textShadow = 'none'; // Unsichtbar
    }

    if (textStroke1) {
        counter1Element.style.textShadow += `, ${textStrokeColor1} ${textStrokeWidth1}px 0px 0px`;
    }

    const counter2Element = document.getElementById('counter2');
    counter2Element.innerText = count2;

    // Textschatten und Textumrandung für Counter 2
    const enableTextShadow2 = document.getElementById('enableTextShadow2').checked;
    const textshadowColor2 = document.getElementById('textshadowColor2').value;
    const textshadowWidthX2 = parseInt(document.getElementById('textshadowWidthX2').value);
    const textshadowWidthY2 = parseInt(document.getElementById('textshadowWidthY2').value);
    const textStroke2 = document.getElementById('textStroke2').checked;
    const textStrokeColor2 = document.getElementById('textstrokeColor2').value;
    const textStrokeWidth2 = parseInt(document.getElementById('textstrokeWidth2').value);

    // Setze die CSS-Eigenschaften für Counter 2
    if (enableTextShadow2) {
        counter2Element.style.textShadow = `${textshadowWidthX2}px ${textshadowWidthY2}px 4px ${textshadowColor2}`;
    } else {
        counter2Element.style.textShadow = 'none'; // Unsichtbar
    }

    if (textStroke2) {
        counter2Element.style.textShadow += `, ${textStrokeColor2} ${textStrokeWidth2}px 0px 0px`;
    }
}

// Beispiel für das Verarbeiten von Chat-Befehlen
function processCommand(command) {
    const args = command.split(" ");
    const action = args[0].toLowerCase();
    const counter = args[1];

    if (counter === "1") {
        if (action === "!increment") {
            count1++;
        } else if (action === "!decrement") {
            count1--;
        }
    } else if (counter === "2") {
        if (action === "!increment") {
            count2++;
        } else if (action === "!decrement") {
            count2--;
        }
    }
    updateCounters();
}


document.body.addEventListener('change', function(e) {
    if (e.target.matches('input[type="checkbox"], input[type="color"], input[type="number"]')) {
        updateCounters();
    }
});


updateCounters();```

    "fontcolor1": {
        "type": "colorpicker",
        "label": "Counter 1 Farbe",
        "default": "rgb(0,0,0)",
        "group": "Counter 1"
    },
    "fontfamily1": {
        "type": "googleFont",
        "label": "Counter 1 Schriftart",
        "default": "Roboto",
        "group": "Counter 1"
    },
    "fontsize1": {
        "type": "number",
        "label": "Schriftgröße Counter 1 (px)",
        "default": 20,
        "group": "Counter 1"
    },
    "textStroke1": {
        "type": "checkbox",
        "label": "enable text outline",
        "group": "Counter 1"
    },
    "textstrokeColor1": {
        "type": "colorpicker",
        "label": "Counter 1 Randfarbe",
        "default": "rgb(0,0,0)",
        "group": "Counter 1"
    },
    "textstrokeWidth1": {
        "type": "number",
        "label": "Counter 1 Randbreite (px)",
        "default": 0,
        "group": "Counter 1"
    },
    "enableTextShadow1": {
        "type": "checkbox",
        "label": "Textschatten aktivieren",
        "default": false,
        "group": "Counter 1"
    },
    "textshadowColor1": {
        "type": "colorpicker",
        "label": "Textschattenfarbe für Counter 1",
        "default": "rgb(0,0,0)",
        "group": "Counter 1"
    },
    "textshadowWidthX1": {
        "type": "number",
        "label": "Textschattenbreite X für Counter 1 (px)",
        "default": 0,
        "group": "Counter 1"
    },
    "textshadowWidthY1": {
        "type": "number",
        "label": "Textschattenbreite Y für Counter 1 (px)",
        "default": 0,
        "group": "Counter 1"
    },
    ```

        "type": "colorpicker",
        "label": "Counter 2 Farbe",
        "default": "rgb(0,0,0)",
        "group": "Counter 2"
    },
    "fontfamily2": {
        "type": "googleFont",
        "label": "Counter 2 Schriftart",
        "default": "Roboto",
        "group": "Counter 2"
    },
    "fontsize2": {
        "type": "number",
        "label": "Schriftgröße Counter 2 (px)",
        "default": 20,
        "group": "Counter 2"
    },
    "textStroke2": {
        "type": "checkbox",
        "label": "enable text outline",
        "group": "Counter 2"
    },
    "textstrokeColor2": {
        "type": "colorpicker",
        "label": "Counter 2 Randfarbe",
        "default": "rgb(0,0,0)",
        "group": "Counter 2"
    },
    "textstrokeWidth2": {
        "type": "number",
        "label": "Counter 2 Randbreite (px)",
        "default": 0,
        "group": "Counter 2"
    },
    "enableTextShadow2": {
        "type": "checkbox",
        "label": "Textschatten aktivieren",
        "default": false,
        "group": "Counter 2"
    },
    "textshadowColor2": {
        "type": "colorpicker",
        "label": "Textschattenfarbe für Counter 2",
        "default": "rgb(0,0,0)",
        "group": "Counter 2"
    },
    "textshadowWidthX2": {
        "type": "number",
        "label": "Textschattenbreite X für Counter 2 (px)",
        "default": 0,
        "group": "Counter 2"
    },
    "textshadowWidthY2": {
        "type": "number",
        "label": "Textschattenbreite Y für Counter 2 (px)",
        "default": 0,
        "group": "Counter 2"
    }
}```

I had to split javaskript and fields into 2 sorry

i got the checkboxes in the option menu but they just dont influence anything

[celest sable]

hey guys! i'm making my own alerts using streamelements websocket api and i was wondering how can we display emotes using it? i believe it's got a system in place to detect them but i can't find anything about it on the documentation

[celest sable]

also is there a way to listen to the queue status? i know we can detect updates through websockets but can we ask it the state?

[strange coral]

in my custom sub goal widget i am unable to get the sub count from SE's output to match the one from my twitch dashboard. I tried about 20 modifications with Claude because I am not proficient at coding. anyone able and willing to take a quick look at the code?

[urban ore]

Inquiring if something is a bug or user error 😅:

I’ve noticed that sometimes when a group gifted twitch sub alert gets triggered (more than 1 user gifted at once) sometimes instead of SE treating it as the total number of gifted subs (example: plays alert as 5 gifted) it will instead treat the alert one by one (example: plays the single gifted alert 5 times in a row).

I’ve had this happen when I’ve had my variation settings set to 100% chance and with 2 variations of the same criteria with 51%/49% chance for each

[celest sable]

are you using code or are you struggling with the overlay maker?

just make sure you have variations with conditions and you should be fine, for example 'When total gifts number is at least 5'

[urban ore]

No custom code for this, just the native alertbox overlay. I am using conditons for all variations like you mentioned. The behaivor I see is not a constant, its a rare occurance which makes me consider it may be a bug or some type of lag. In most cases the alert plays correctly recognizing the condition right, however, sometimes (maybe like once every month or two) instead of playing the '5 gifted subs' variation it instead plays a single gifted sub alert 5 times in a row.

Overall i'm wondering if there is any known issue as in some type of lag in interpretation on SE's end that may result in this behaivor. It's very very rare but it's happened a few times the past couple of years so I figured I just ask about it.

[visual sundial]

Questions is there anyway to get viewer id token => profile picture and show in html anything like base64 or src will do

If there an api docs I would happy to check it out

[celest sable]

Make sure that even if you have variations for the same alert, you always have a base one with 100% chance under that condition.

What you’re experiencing is the 5 subs event being triggered, streamelements checking for what to trigger and not finding it.

I see in your first comment you’ve said you have this done but if this continues to happen on this circumstances then yeah it’s definitely a bug

[urban ore]

OK thanks, will keep them at 100% then

[wicked sapphire]

Redirected from #community-helpdesk message

Is there a way to make a manual Twitch API call (requiring authentication) from within a custom widget?

[severe shell]

1 - You don't have access to browser storage like localStorage, cookies or indexedDB on custom widgets.
2 - It is better to use onWidgetLoad instead of load during initial loading. It makes sure the widget is loaded correctly and also gives you some useful data, like superchat amount, for example.
3 - For goal widgets, is it way better to work using onSessionUpdate over onEventReceived. onEventReceived is triggered on every message, chat command or stream events whereas onSessionUpdate will only be triggered for events that changes session values (subscribers, superchat, new member, etc). Also, onSessionUpdate do the calcs for you and gives you the total.

const goalAmount = 70000; // Set the goal amount
let currentAmount;

// Initialize the widget with the current amount
window.addEventListener('onWidgetLoad', function(obj) {
  console.log("onWidgetLoad:", obj); // useful if you want to check the data on browser console
  
  // if the value is not set, 100 is set as the initial value
  currentAmount = obj.detail.session.data["superchat-goal"].amount || 100;
  updateWidget(currentAmount); 
});

// Loads when you receive superchat, subscriber, membership, tip, or merch 
window.addEventListener('onSessionUpdate', function (event) {
  const amount = event.detail.session["superchat-goal"].amount;
  updateWidget(amount);
})

// Update widget when page loads with ₹100 or the stored amount
function updateWidget(amount) {
  // Ensure the received amount is parsed as a number. 
  // Not really needed as Streamelements already takes care of that
  amount = Number(amount);
  if (isNaN(amount)) {
    console.error("Invalid superchat amount:", amount);
    return;
  }
  
  // Calculate progress percentage
  const progressPercentage = Math.min((amount / goalAmount) * 100, 100);
  
  // Update progress bar width
  const progressBar = document.getElementById('progress-bar');
  progressBar.style.width = `${progressPercentage}%`;
  
  // Update stats display
  const goalStats = document.getElementById('goal-stats');
  goalStats.textContent = `₹${amount.toLocaleString()} / ₹${goalAmount.toLocaleString()} (${progressPercentage.toFixed(2)}%)`;
}

[severe shell]

What you are trying to do exactly and what is the issue? I believe the message you explained the problem was deleted with the link

[severe shell]

You can use the /:channel/emotes endpoint

URL: https://api.streamelements.com/kappa/v2/channels/ACCOUNT_ID/emotes
Method: GET
Headers:
Authorization: bearer JWT / apikey OVERLAY_TOKEN / oauth2 OAUTH_TOKEN
Accept: application/json

More details here:
https://dev.streamelements.com/docs/api-docs/45a6254fd23e3-channel-emotes

[severe shell]

I don't think so, never seen any

[severe shell]

If you don't know how to code, AI won't help much, especially with custom widgets as they are not very popular (and unfortunately not very well documented). The best thing to do is checking #widget-share for some goal widgets that is similar to what you want (and maybe try to modify it)

[severe shell]

From Twitch, you can get the profile picture from these endpoints: https://decapi.me/twitch/avatar/USERNAME or https://api.streamelements.com/kappa/v2/channels/USERNAME

[severe shell]

No

Unless you already have the token. If so, you can do a normal javascript fetch to the endpoint

[wicked sapphire]

So SE doesn't give access to their token for my channel. Great. Now I need yet another service for the simplest thing. Anyway, thanks for the help.

[wind epoch]

Ok boss got it

[celest sable]

holyyy comes in and answers everyone's questions. thank you so much!

Do you know if v3 is working? v2 seems to work perfectly but no 7tv emotes are being fetched

(and when I try to fetch from v3 it's not working)

[celest sable]

i guess for the time being i'm better off just using 7tv's api

[severe shell]

v3 is only for a few endpoints, most of them uses v2

[whole crag]

Hey everyone. I am having a problem while creating a custom overlay for Youtube, if anyone can help in this will be a huge help.
I am creating a custom widget for Youtube streaming, i have 5 categories i.e.,

• Newest Ultra (meaning most recent member on my channel);
• Latest Superchat (meaning most recent superchat on my channel);
• Most Superchats (meaning the user who has done the highest quantity of superchats in the month, not the total value of the superchats);
• Biggest Superchat (meaning biggest superchat this month);
• Top Superchatter (meaning the superchatter who has donated the most total money through superchats in that month).

I get the names and amount of each category, the problem i am facing is that i don't get the profile image url's for the categories.
I do get the images url when a new member is added by onEvent but for the superchat-alltime-top-donator and superchat-alltime-top-donation i don't get the image url's. I have attached the image of data object i get when the widget loads and on session update.

My code looks like this:-

window.addEventListener('onWidgetLoad', function (obj) {
    userCurrency = obj.detail.currency;
    globalSessionData = obj.detail.session.data || {}; // Initialize global data
    console.log('onWidgetLoad data : ', globalSessionData);
    updateCarousel(); // Populate initial carousel data
});

// Event: On Session Update
window.addEventListener('onSessionUpdate', function (obj) {
    globalSessionData = obj.detail.session || {}; // Update global session data
    console.log('onSessionUpdate data : ', globalSessionData);
});

Basically i store the object on onWidgetLoad and onSessionUpdate and then get the relative data from it but right now i am not getting the image url which is a big issue. I also don't get the users id or username by which i can fetch the image from some API. Is there a workaround for it that i am missing?

Thanks in advance

[fleet herald]

Any reason why when a no English display name gifts community subs, instead of triggering the group gifted sub alert it instead reads out all the alerts as individual gifts

[gritty jetty]

is there a way to integrate the tiltify integration with a custom widget? ive had a look in the docs and there doesnt seem to be any mention of tiltify

[gritty jetty]

also, does the 'charity' seciton on the chatbot 'chat alerts' include tiltify if its linked?

[hollow harbor]

question, if i make a custom chat widget, is it possible to make it work for multistreams? so i can get chat messages from Twitch and Youtube chats? rn i have a chat widget that only gets twitch, but I don't know how i'd go about adding more platform support to it

[tough quest]

Hey everyone, I’m new here and trying to start creating custom elements for the public. I’m unsure how to access the developer editor or share to public (not sure what the right word is) for SE. Could anyone guide me?

[manic vortex]

Hello I am new to SE widget and I'm currently making a custom widget, I understand that we are able to get "channel point redeem event" if the reward allows chat to send a message with it. And the reward name will be under "msg-id" under tags.

My question is: Is there a way to get channel point redeem event, without requiring user to send a message along with it

[severe shell]

Well, not natively, as each platform is independent, even if you have linked accounts.
But there is request Streamelements do every 15 seconds to get the Youtube chat messages (as Youtube uses API polling to retrieve chat messages)

URI: https://api.streamelements.com/kappa/v2/widgets/ACCOUNT_ID/youtube-chat
Method: GET
Headers:
Authorization: bearer JWT_TOKEN or apikey OVERLAY_TOKEN

[severe shell]

What do you mean by "developer editor"? You are expected to use any IDE on your computer, like Visual Studio Code, for example.
The documentation for Elements is here: https://dev.streamelements.com/docs/widgets-elements-sdk/9do3bhwlp2fdt-introduction

[severe shell]

Quick answer: Not natively.
However, there is a way, using a custom widget designed for that. It will generate the events like if it was native from Streamelements.
https://github.com/c4ldas/streamelements-widgets/tree/main/twitch-channel-points

Check the section "how to use it", it's very easy (basically, install it and forget it)

[manic vortex]

Gotcha, thank you so much

[hollow harbor]

ohhh i see, thank you!

[severe shell]

From what I could see and test, Streamelements doesn't trigger custom events for Tiltify, it only works for its own widgets (Charity & Seasonal > Charity > Tiltify Donation Alertbox / Tiltify donation tracker).

However, there is another way. After you integrate it with Streamelements, you can use this endpoint to check the Tiltify access token:
URI: https://api.streamelements.com/kappa/v2/integrations/ACCOUNT_ID/tiltify
Method: GET
Headers:
Authorization: apikey OVERLAY_TOKEN (recommended as you can obtain it from custom widget directly) or bearer JWT_TOKEN

The response will give you the Tiltify ID (profile.id) and access token (accessToken). It seems the access token expires in 2 hours, and I believe SE refreshes it automatically for you, but I couldn't test that, I will leave it to you.

With that info, you can use Tiltify API (https://developers.tiltify.com/api-reference/)

[severe shell]

It doesn't, it's linked to Twitch charity donations that you setup here https://dashboard.twitch.tv/u/USERNAME/charity.
I even think it's not working correctly for that one, as I received a donation for the charity setup there, it showed up in Activity feed, but not in the chat (which has the option enabled).

[severe shell]

Well, as explained before:

Basically i store the object on onWidgetLoad and onSessionUpdate and then get the relative data from it but right now i am not getting the image url which is a big issue.
You don't store it, actually. That is only saved in temp memory. Once the widget is refreshed, that info is wiped out. If you want to save data between reloads, you should use SE_API.store.get() and SE_API.store.set()
https://dev.streamelements.com/docs/widgets-old/186263f447d1d-custom-widget#se-api

[tough nimbus]

Hello !
Is there a way to create a widget and then use an instance of it in all overlays ? So when we modify this widget, it will update in all overlays ?
I tried using iFrame to embed an overlay only containing this widget into others, but SE doesn't allow-same-origin
To explain my case, i'm helping a streamer who want an overlay for IRL streams (chat, alerts, sponsors...) but want everything in one overlay to add on her phone.
She has a sponsors rotator SE widget and she wants the changes made to it to be reflected in this "all in one" overlay she wants for IRL (and wants everything on SE. I already suggested a custom rotator fetching images from an external host so when she updates images there it changes everywhere, but she doesn't want to manage something outside SE)

[tough plover]

Look at a plugin called downstream keyer. More people need to know it tbh, it's a game changer.

[tough nimbus]

Thx !