dev-chat

[tribal zenith]

you can expand them and have separate options for each

[next remnant]

and this?

[tribal zenith]

variations no, dropdowns and buttons yes

[next remnant]

uhh 🤔

so can variations be created from dropdowns and buttons?

[tribal zenith]

not dynamically. You shouldn't try to recreate the whole AlertBox. That is too complex for fields and already exists

[next remnant]

ah I see yes...

I want to force stop an alert queue

to apply a custom tts

and preserve all the features of AlertBox

But it seems not to offer, that simple queue thing, I'm looking for.

however custom widgets are not isolated? but use the same style of JS window

that probably is nested inside a "execute this as ReactJS", not sure is it?

while the alertbox one, just does "execute as own JavaScript"

would it not be possible, to give it the possibilities, to interact with ReactJS aswell?

I don't think custom widgets can control alertbox widgets either, can it?
but I probably can't send stuff to the custom widget either so

[tribal zenith]

AlertBoxes already have options for TTS

[next remnant]

Wait does one say? "Custom TTS", "Yes, you heard right, here you can use a TTS from a different API and you can control when the requests are done and then, the next alert should appear."

Did I miss see that?

[tribal zenith]

wrong tone for support questions. You have AlertBoxes and custom widgets with a lot of freedom available. Take it or leave it.

[next remnant]

I thought I missed that, but my issue is, it doesn't exist. Except alerts in custom widgets, but it doesn't have variations. Well, maybe in a way it can be added with conditions.
Nor, did I ment to sound rude, I'm sorry if it did.

I'm just looking for such an option that allows me to do that. And feature requests, is an option, but takes time. But I can't add it myself either with all I have available with the widgets, so

[tribal zenith]

TTS services cost money. If the AlertBox options are not good enough, then no there is no other way.
You would have to pay and set up your own service for that

[next remnant]

I know TTS services. I'm not asking for StreamElements to add more voices. I was asking for a queue time interaction function, so someone that has their own API or something, can add their TTS into the alertbox, very simply and have a lot of more options available.

[tribal zenith]

No, AlertBoxes can't do that. Custom widgets might, but they require more work

[next remnant]

Do custom widgets actually allow the usage of the TTS that StreamElements provides?

[pulsar willow]

Is there a way to escape a trailing point in a StreamElements-bot-response? 😅

follow me on https://this.random.website/123.
the point is part of the link ... and therefore the link is broken.

[next remnant]

the trailing point?

[tribal zenith]

just add a space between both

[pulsar willow]

k, I thought there might be a more sophisticated way to achieve that. sry 😶

[tribal zenith]

the link parsing here comes from twitch. The SE bot just posts text and you can't really escape things in plain text

[next remnant]

I see what he ment now. I guess? Maybe, not.

So what I see could be possible with alertboxes based on the console logs, is that it switches things

Like the TTS its is own thing, that seems to get ran separately 🤔
from what the html thingy is

so if there would be a tab, that allows adding like a custom widget, within an alertbox, that might would be possible

wait a second, that gave an idea 🤔

widgets appear in links

[tribal zenith]

No, they are different things

[next remnant]

what if I iframe it and 🤔
can I so control the timings?

hm oh no wait

all that would be left is client stuff

but vise versa

locking a alertbox URL in a custom widget, would allow me to display the AlertBox idefinitely long... wait I think it breaks queues
nah, I'm out of ideas

can custom widgets, fetch pieces of the AlertBox? Similar on how the server reads AlertBox variations and appearance?

[next remnant]

Made a feature request. Hm
Thanks for all the help, btw. 🙂

[pulsar willow]

Could anyone here still help me getting the Slick theme from streamlabs in my StreamElements event list?

[pulsar willow]

I would also love for the eventlist to say "Rukaya gifted x24 subs" and not have the 24 gifted subs separatly in the eventlist.. just the gifted x one

[granite niche]

hello,
I'm looking for a solution to make a command that would give a random preset redeems. Can anybody help me?

[pulsar willow]

well ... I guess, it can't hurt? 🤔

[granite niche]

Sorry English isn't my native language, i'll try to make myself clearer. I want to make a command ( !hello ) that would send on live different sounds (for example: a hello form Obama, then a hello form an artist etc...). I have different ways to make people say hi on live but i'd like to group them under the same command.

[solemn viper]

i got a fun game but i need some help to make i have the part just need help with api

[solemn viper]

try to get this to work $(customapi.https://api.jebaited.net/addPoints/TOKEN/${1}/$(customapi.http://api.mathjs.org/v4/?expr=round(random(-50,100)))

[solemn viper]

trying do this

you tripped trying to open the chest lost one token
you found one token
you got attacked by a cannabox you lost 1~25 token
you found 1~25 token

there more part but if get work then i am good

[solemn viper]

if know plz ping

[west jetty]

You can filter out gifted subs by adding a condition in the widget’s code:

Near case "subscriber":,
Replace if (includeSubs) {
By if (includeSubs && event.isCommunityGift !== true) {

This won’t filter out the gift events, just the resulting subs.

[pulsar willow]

Cool, thanks! Do you know how to ge the css of the slick theme?

[pulsar willow]

@solemn viper to put all those options (+ logic to change loyalty points) in one command might get a bit confusing when it comes to the structure. 🤔

There is a Custom-Widget called "Bank Heist chat game" made by lx, which does something similar.
Perhaps you could use it as basis for your game idea? 👍

Custom-Widgets can be cound in #widget-share.
#widget-share message

[west jetty]

No idea if the default themes are editable. It seems like a relatively simple widget, you could try inspecting it and copy-pasting its style in StreamElements (and make the HTML similar):

[pulsar willow]

I tried inspecting it but I’m doing something wrong I have an overlay with it and it is showing the preview from streamlabs I might’ve copied the wrong things

I’ll try that in a bit! From your screenshot on the right

[rose crown]

If I want to create a widget in VS Code, is there a way to connect to streamElements so I can listen to events? Instead of editing via the Editor UI inside streamelements

[viral patrol]

@rose crown #dev-chat message

[west jetty]

Is there a way I can trigger custom code in overlays from my computer? Like sending a specific HTTP call that would generate a specific event code in the onEventReceived handler? Or anything?

Ideally I’d want to trigger an animation in a custom widget by pressing a key on my Stream Deck, I have no idea if that’s possible?

[solemn viper]

if can get this api to work then be ok $(customapi.https://api.jebaited.net/addPoints/TOKEN/${1}/$(customapi.http://api.mathjs.org/v4/?expr=round(random(-50,100))))"

1. $(customapi.https://api.jebaited.net/addPoints/TOKEN/USER/AMOUNT)
2. $(customapi.http://api.mathjs.org/v4/?expr=round(random(-50,100)))

If !somecommand has the above definition, would !somecommand user1 ...

• add up to 100 points to 'user1', or
• reduce the points of 'user1' for up to 50 points?

as long as I can get this part to work I'm be good

[solemn viper]

how get the Bank Heist chat game to work

[solemn viper]

it a go

got it

[pulsar willow]

@solemn viper
I've modified lx's "Bank Heist chat game"-widget into a prototype:
https://jsfiddle.net/86ejtyp2/
https://pastebin.com/4rZKiatx

To test it I would suggest the following steps:

1. Get the original widget
You can find it in #widget-share (posted 2020-05-25) or use the link:
#widget-share message

2. Edit the widget
After you added the original widget, you should have been redirected to https://streamelements.com/dashboard/overlays.
Click on the "Edit button".

3. Modify the code
Select "Bank Heist game" in the lefthanded navigation.
Open the Editor under Settings -> Open Editor

Copy the jsfiddle Code in the corresponding sections.
The pastebin text goes into Fields.
Data can be replaced with "{}".

4. Get a jebaited.net token
Widgets need that to post messages in the chat and to modify the loyalty points.
lx made a great little tutorial how to get it (https://streamable.com/o3amrn).

Copy it in the textfield "jebaited.net API token" (in General Settings of the widget).

5. Save and test it
Should work?

is triggered by !treasurequest (can be changed in General Settings of widget).

Please note, that I did not test it extensively. It's just a prototype.

---

you could also extend the options if you mimic the "optionX_" stuff (in Fields)
for example:

    "type": "text",
    "label": "message ({0}=user, {1}=amount, {2}=unit):",
    "value": "{0} has alot of luck and finds {1} {2}!",
    "group": "Option #5"
  },
  "option5_mode": {
    "type": "dropdown",
    "label": "Affects points through:",
    "options": {
      "add": "Addition",
      "sub": "Subtraction"
    },
    "value": "add",
    "group": "Option #5"
  },
  "option5_min": {
    "type": "number",
    "label": "Min amount:",
    "min": 0,
    "step": 1,
    "value": 100,
    "group": "Option #5"
  },
  "option5_max": {
    "type": "number",
    "label": "Max amount:",
    "min": 0,
    "step": 1,
    "value": 200,
    "group": "Option #5"
  },```

and add the new prefix ("option5_" in this case) to the `optionPrefixes` variable in the JavaScript section.

[karmic cedar]

Hello everyone, would you like to learn how to share my overlays with others? Style the NerdOrDie website.

I would like to send a link to my clients and that way they have access to the overlay on their account, as a system of sharing through links.
Can someone help me?

[hardy walrus]

@karmic cedar You're not able to do it the way NoD does as they have an exception.

[mortal knot]

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

[hardy walrus]

You'd want them to send an editor invite.

[karmic cedar]

Yes, I understand that possibility.

But I would like to just send a link and the client gets access to the overlay, without needing me to create an invitation link.

Sorry as I'm saying, I'm from Brazil and I don't know English. I'm using google translator.

[hardy walrus]

Isso, como eu disse, não é possível. Somente certas pessoas como NoD estão autorizadas a fazer isso. Não está aberto para todos.

[karmic cedar]

I understand @hardy walrus , I am creating an overlays store for Brazilians and I would like to use the StreamElements editor.
Would it be possible for me to have an exception like NoD?

[hardy walrus]

No

[karmic cedar]

Ok, thanks.

[rose crown]

Is it possible to update field data via the widget js? Or is it read-only?

[blazing patio]

Is there a way I can make a donation goal for a current stream with GoFundMe?

[mild cipher]

read only

[solemn viper]

I think game working well

@pulsar willow. Ty I just need make longer like 8 more spaces of the multiple-choice and it be good

[pulsar willow]

Anyone using the shoutout widget?

[lofty gale]

Hi, I hope this is the right channel to place this

I'm looking to see if I can create on overlay that displays to current live "stream goat"

Something that can calculate and celebrate the most generous viewer in a stream at any given time. I would want it to calculate bits, donos, resubs and gifted.

This would auto update - so at the start of the stream it would be vacant but as soon as someone contribute/donates, their name would appear as the current stream goat. However is someone else was to "out perform" them, it would switch to their name. Of course there are labels that I can use currently for individual activites but I'm hoping to find something that can mix all activities into one, which would involve converting the value of bits to dono to gifted subs etc...

I hope this makes sense, little tough to type this out!

Thanks for reading

[west jetty]

Seems easy enough, you create a custom widget and the default code should give you a baseline ready to listen to any event happening on the stream — the code to compute the formula would depend on you though

[lofty gale]

Thanks for the reply.

I can't seem to find a widget through the stream labs templates that would calculate it in the way that I need to provide the "stream goat" idea. Any ideas or links you can suggest?

[granite niche]

Just a little up moment. I won't do this again after.

[west jetty]

As I said, this is probably going to require custom code in order to make this a reality. How familiar are you with coding? Just creating the default custom widget in the overlay editor should give you a pretty good insight into how viewer-events are listened to and processed, storing a per-user score depending on the events that happen and displaying the user with the maximum score should be of easy-to-medium difficulty in terms of programming

[lofty gale]

OK so my coding experience is pretty much zero at this point.

At this stage I was hoping that there was something out there that already excised as a template. Unless you have an recommendations on where I can resource this?

[west jetty]

No idea honestly

[lofty gale]

Ok thanks for getting back to me

[serene turtle]

Is there a StreamElements developer that can help me? I've asked several times and even made a support ticket, but no developer has yet to chime in.
I'm trying to figure out why most all twitch slash commands work with the say endpoint except for /delete {{uuid}}
<#dev-chat message>
Thanks!

[mild cipher]

My guess is a command whitelist, e.g. you can't make the StreamElements bot whisper people either (unprompted), since it could be abused to look like it came from SE. Probably wouldn't be many issues with allowing the delete command, so maybe it just wasn't added (yet)

[hardy walrus]

Reading the docs again I think that only lists the message id and not wanting it https://dev.twitch.tv/docs/irc/tags#clearmsg-twitch-tags

It displays the action and not allowing it.

[mild cipher]

This isn't exactly what you're looking for, but it's a start - it aggregates primary stream metrics into a common point system. You would need to adjust it to track individual users. #dev-chat message

[serene turtle]

Yeah that's kinda what I was thinking. Delete must not be on the list.
I hope they can get it added at some time. Thanks!

[viral patrol]

@serene turtle With delete that takes message only as parameter it would be problematic as you could create a command on your channel that deletes messages on another channel where SE bot is modded. And to avoid that bot would require to store data of parent of each message.

I think this may be IRC limitation.

(I know that timeout takes one parameter only and it is channel scoped, but I am afraid of /delete endpoint not being set to that)

[serene turtle]

Ah-ha! Thank makes sense. I think I can test if it is channel scoped. Thanks

[serene turtle]

I believe it is channel scoped.
With an alt account I posted a message in my channel.
Then in another channel in which I am modded I ran the /delete {{uuid}} command and the test message remained undeleted.
I then ran the same /delete {{uuid}} command in my own channel, as me, and the test message was properly deleted.

[viral patrol]

I have forwarded that request to developers.

[serene turtle]

Thanks very much!

[lofty gale]

hi @mild cipher really appreciate that. Any ideas on how to do the adjustments to track individual users? Sorry, noob here

[solemn viper]

is there a way for a custom widget to play sound effects

[flint mirage]

does anyone know if you can make a custom alert widget where i can upload images/svg as frames and specify the delay between them (aka stay on this frame for 16ms, then this one 64 ms, etc.)? i'm trying to make these alerts that use differing levels of opacity between frames, and have an translucent layer on all that is the same.

I know that sounds a bit much to wrap your head around, so here's an example:

frame 1

frame 2

i want to do the fade-in in the animation itself, so i have more accurate control of it

and when i make it into a webm, it only has 100% opaque or 100% transparent

[glacial dune]

hey guys, I'm new to SE widget customization, but I was doing some tests specially with chat and messages stuff, but got some questions left open and it seems that the documentation couldn't help.

my question is about retrieving message metadata

in the docs they say we have a bunch of stuff we can use from messages

in particular these

{
"time": 1552400352142,
"tags": {
"badges": "broadcaster/1",
"color": "#641FEF",
"display-name": "SenderName",
"emotes": "25:5-9",
"flags": "",
"id": "885d1f33-8387-4206-a668-e9b1409a998b",
"mod": "0",
"room-id": "85827806",
"subscriber": "0",
"tmi-sent-ts": "1552400351927",
"turbo": "0",
"user-id": "85827806",
"user-type": ""
},
"nick": "sendername",
"userId": "123123",
"displayName": "senderName",
"displayColor": "#641FEF",
"badges": [
{
"type": "broadcaster",
"version": "1",
"url": "https://static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/3",
"description": "Broadcaster"
}
],
"channel": "channelname",
"text": "Test Kappa test",
"isAction": false,
"emotes": [
{
"type": "twitch",
"name": "Kappa",
"id": "25",
"gif": false,
"urls": {
"1": "https://static-cdn.jtvnw.net/emoticons/v1/25/1.0",
"2": "https://static-cdn.jtvnw.net/emoticons/v1/25/2.0",
"4": "https://static-cdn.jtvnw.net/emoticons/v1/25/4.0"
},
"start": 5,
"end": 9
}
],
"msgId": "885d1f33-8387-4206-a668-e9b1409a99Xb"
}

but I saw some examples extracting data from obj.detail.event.data instead of obj.detail.event

is that correct? I haven't saw anything about this in the GitHub docs

[pulsar willow]

Yes, custom widgets can display images, play videos and/or sounds.

Benno's "Video on command"-Widget (in #widget-share) demonstrates that very well 👍 (can also play sounds)
#widget-share message

[pulsar willow]

Since webm supports transparency, it should be able to display that correctly? 😅

At least in my test, the fade in / out seems to work. 🤔

[flint mirage]

hmm, i'm not sure why it won't render out correctly

i've been using gimp to render things out but i'm looking into learning blender for animating it since it'll be better down the line and it might be a gimp problem

i'm not sure if my way of animating makes sense for blender tho, from what i've seen

[pulsar willow]

@flint mirage As far as i know, those are the steps to render a webm with transparent background:

Activate in Render Properties -> Film -> Transparent, to allow transparent backgrounds

Make sure that in Output Properties -> Video -> Video Codec, a Codec is selected that supports transarency.

Activate the RGBA Option for the output

[flint mirage]

if i'm making stream alerts, should I open it as a VFX session?

[pulsar willow]

@flint mirage You want to move an image around and change the opacity?
If that's the case Video Editing should be able to that 🤔

If it's more complex stuff, I usually do that in General.

Afaik, VFX would be only necessary if you want to track footage and/or compose it into existing material.

But you can almost always achieve a certain result with different approaches.

[flint mirage]

i appreciate all your help @pulsar willow! one more thing if you can: i made all the graphics/frames in affinity designer and they're all vectors. I see blender can import svg, but when i import it it doesn't show any indication it's in my scene or has even been imported? if there somewhere i should navigate to?

i doin't see any layers/meshes listed under scene or world properties

[pulsar willow]

@flint mirage Did File -> Import -> Scalable Vector Graphics not work for you?
https://www.youtube.com/watch?v=ctwiT8LYjVQ&t=123s

@flint mirage At least in the tutorials it looks not too painful, maybe it's a bug in the current blender version?🤔
https://www.youtube.com/watch?v=MURBr0GTHuo
https://www.youtube.com/watch?v=3kimib7POzc

[ocean fractal]

I believe it does need to come from obj.detail.event.data, or at least that's where I'm presently able to pull it from

[flint mirage]

hmm, it shows his vector as having curves listed under it, but mine just says .svg

[pulsar willow]

@flint mirage I assume you don't want to share / pm me the SVG?

You could test it with another SVG, just to verify that it's not a bug of the current blender version. 🤔
If nothing works, I would ask on https://blender.stackexchange.com/ 😅

Or you export it as high resolution PNG and work with that in blender (might be the easiest solution).

[flint mirage]

i tried it with a couple other svg and got it to show up as curves for other ones, but i still can't see it in the scene? i tried selecting everything with A and scaling it, but no difference

[valid drum]

I'm trying to find out how to make a one click add theme guide and my google searches are not returning anything good. Does anyone have something I can reference?

[pulsar willow]

It seems like an error occures while blender is importing the curves from your SVG.
Maybe you can find some error messages in the system console (Window -> Toggle System Console).

[flint mirage]

so i was able to import one of the svg's into blender, but it erased one of the vector layers, which was a black transparent background behind the main shapes

this layer has no blur applied, where as the first few frames that i was trying to import do

it seems some programs import it fine but render it out fully opaque (GIMP) or erase the layer that's translucent

it's not importing my text layer (which should be vector-based) either

[flint mirage]

i think what i need to do is remove all the effects that i applied in affinity designer to get a clean import into blender for animation, then apply the same effects in blender (hopefully as easily)

[glacial dune]

@ocean fractal thank you for helping, I haven't tested without the "data", but if that's the case I haven't saw anything in the documentation speaking about it, so are we able to ask for updates and more details in the github repo?

[solemn viper]

Is there a way to merge your overlays so don't need to have multiple of them

[pulsar willow]

You can copy widgets from one overlay to another.

[solemn viper]

Can you merge YouTube and Twitches or no

[pulsar willow]

I can't think of a reason why you shouldn't be able to group twitch and youtube widgets in the same overlay ...
so yes, should work 🤔

[hardy walrus]

The answer is no.

The widgets are platform specific unless they're custom made ones.

[pulsar willow]

ah kk, thanks for the clarification 👍

[ocean fractal]

yeah the docs on the message details aren't well explained... Since it's on github, if you have an account, you might be able to make a PR on the documentation so it's more accurate?

[onyx lily]

does StreamElements support custom arguments? (like streamlabs has $arg1 to $arg9?) I can't find this anywhere.

[ocean fractal]

in the chat bot? @onyx lily ?

erm, custom commands

[onyx lily]

yes

[onyx lily]

yes 🙂

[ocean fractal]

Someone correct me if I'm wrong here, but I believe it exists as ${arg[1]} or something like that?

oh its actually like ${1}

^^^ is basically the raw first argument of the command

@onyx lily

[onyx lily]

@ocean fractal thank you. Is there any "official" documentation on this? As I could not find anything related to ${1} at all ?

[hardy walrus]

https://streamelements.com/dashboard/bot-commands/variables

[ocean fractal]

that screencap I posted above was from the variables list

[onyx lily]

Thank you

[onyx lily]

Thanks 👍

[pulsar willow]

Is it possible that a function associated with "onEventReceived" is executed, while the one associated with "onWidgetLoad" is still running?

[wraith flame]

Hey guys, I'm new to SE coding and I want to swap out my overlay video when a subscriber alert is triggered.

My HTML looks like this:
<div id="ViewHolder">
<video id="video" width="2560" height="1440" autoplay loop>
<source id="videoSource" src={{BorderRed}} type="video/webm">
</video>
</div>

My question would be, how can I swap out the {{BorderRed}} with e.g. {{BorderGreen}}, {{BorderBlue}}, etc.
None of the online solutions have worked so far.

[mild cipher]

Uncommon, but possible. I usually just set a boolean flag to only accept onEventReceived events once everything in onWidgetLoad is ready

[mild cipher]

You will need to listen to when a subscriber event happens in onEventReceived to then swap your video source. Check the third link in the channel header for examples of listening to events

[wraith flame]

@mild cipher thanks, I'm going to check it out

[pulsar willow]

thanks @mild cipher 👍

[pulsar willow]

hey! i have been making a widget to show the latest sub, tip, follow ect, and i have added fields with checkboxes so you can decide if you want to show the separate events, so you can configure it to only show follows and subs for example. the widget also gets the most recent event when it loads so there is always data here. this all works in the code but to make the changes come into effect you need to save the widget, go back to all the overlays and then reopen the overlay. i am getting the fieldData in the onWidgetLoad event using obj.detail.fieldData and then using that throughout my js.
I am wondering if there was a way to reload the widget when the field data is changed, or if there is an event called when the field data is changed that i can use to update the widget. i hope this question makes sense and im very sorry if someone has answered it already but i couldnt find anything. thank you for your time!!

[elfin arch]

The check boxes don't proc an update. Use a drop-down with yes/no instead

[pulsar willow]

oh ok thank you so much!

[wraith flame]

Hey I'm back, I have a performance question. When I enable my custom widget which swaps out my overlay videos all of my alerts start to freeze or are laggy. What would be the main cause for it to be more lagging in obs than online? Is it because I have so many webms?

[ocean fractal]

Could be the framerate of your browser source

[wraith flame]

@ocean fractal It doesn't happen when I disable the widget, I'm trying my best to find a way to add an OBS Script and work with the SE API to trigger a local scene change so that it doesn't affect the browser performance

[cyan nimbus]

Can u insert another boxchat url into StreamElement?

[gentle current]

Quick question, is it possible to send webhook notifications to SE? Say a third party app has push notifications and you can enter a url for notifications to be sent, can SE listen for those POST events?

[mild cipher]

You would need a server for that, something you can't host with client side code

[gentle current]

I’m aware, I just wasn’t sure if that was possible though SE website or not. Thanks!

[pulsar willow]

Can several "instances" of the function associated with onEventReceived be executed in parallel? 😅
In other words: Do I need to block calls while the function is executing?

[glad urchin]

Getting "GET https://api.streamelements.com/kappa/v2/widgets/STUFF/youtube-chat" failed when trying to use my custom widget on YouTube channel stream, any thoughts?

[tame sparrow]

@pulsar willow no, if they are being called from something, it's part of the stack, meaning that the call that called that function contains it within its scope

[echo ruin]

Hello, quick question. BMC (Patreon alt) provides their own events alert box as a url. What's the easiest way to have it imported with their presets into SE scene?

[wraith flame]

Hello I have a question regarding the SE-API. I'm trying to save a string to the global database. I don't completely understand the documentation.
What exactly does: "SE_API.store.set('keyName', obj);" do?
Is the key name an object in the fields tab or how do I enter the string I want to save?

[pulsar willow]

thank you @tame sparrow 👍

[pulsar willow]

As far as I understood the documentation (https://github.com/StreamElements/widgets/blob/master/CustomCode.md#se-api)

• keyName is a string that is used as id for your stored object (can be an alphanumeric string only).
• obj is the object you want to store.

For example:

window.addEventListener('onWidgetLoad', function (obj) {    
    
    // Afaik single values get wrapped in an object anyway, so I put it in an object and assign the key 'k' to the string.
    SE_API.store.set("someUniqueID", {k: yourString});
    
    // "someUniqueID" is the name under which you can find your object afterwards.
    SE_API.store.get("someUniqueID").then(obj => {
        console.log(obj['k']);            // "Test 1, 2, 3, ...";
    });
});```

So, you can simply decide in your code what the value of *keyName* should be.

[wraith flame]

@pulsar willow Thanks, that really worked

[glad urchin]

Does anyone here use the custom widget on youtube chat?

[flint mirage]

Does SE support CSS’s backdrop-filter? I was wondering if I could apply it to my chat box

[muted moat]

One question, how can I get the list of viewing time of the users of a channel ?, I follow the docs but it does not return values, simply {_total: 0, users: []}

[ocean fractal]

i dont think you can do that 🤔
You'd just have to include it as a browser source in your streaming software. From there you can place it wherever in your stream

[echo ruin]

Thanks for the answer :)
Has noone ever missed this feature? That's a bummer :(

Oh, one more question;
In OBS I can have a root scene and share it to other layers. Changes in the root scene then propagate into the slave layers.
Can that be done in SE?

[ocean fractal]

Not as far as I know

You can duplicate a widget to other obs overlays, but I don't think they reference the same widget. You'd have to make the same change in both places

[flint mirage]

is it possible to use CSS's backdrop-filter on a chat box to blur the background? i tried messing around with @viral patrol's cyber chat widget to adapt some code to it, but no success yet

or maybe through obs's browser source custom CSS?

[ocean fractal]

I'd expect the blur to work on html elements below the background, but it doesn't cause a blur on sources behind the browser source in obs

[echo ruin]

So how do people have, say, an identical alert box across all scenes? When they decide to update it later on, they'll have to manually do the update on all their scenes?

[flint mirage]

@echo ruin you could either:

a) use the same overlay in multiple scenes [more limiting for layout reasons]

or b) duplicate that alert widget to other overlays, so when it saves/updates, it will do so across every overlay it's in

[echo ruin]

I'm trying to minimize number of overlays I am stuffing into OBS, but it's a good fallback alternative.
Duplication in my testing created an independent copy that wasn't affected by changes to the original anymore

[flint mirage]

hmm, interesting, i thought it should update it correctly? i'll look into it some on my overlays

[ocean fractal]

you can have a single scene that you put your overlay into.
then you can use that scene as a source in all your normal scenes in obs.
this is called scene nesting and it's pretty powerful

[solemn viper]

so the new game is o most done

[solemn viper]

is there a way to have a sound effect play during a command during a chat commands

like this {user} has waking up from their nap and ready to continue the quest {SFX noise}

[ocean fractal]

#widget-share message

^^ there's a streamelements widget for that

[pure flax]

does our JWT token ever expire?

[ebon jungle]

I'm trying to use the http api + websocket api to send custom tips that would be re-emitted by the socket api, but it seems that the provider field acts inconsistently

When posted via http, and fetched via http, it works fine, but over the websocket api the provider always come up as twitch regardless of what's sent in that field

I wanted to use it to discern between different sources of the donos

is there something I'm missing here? Or some better way to send custom events?

also, is there a way to send other kinds of custom events, like a "sub" event that isn't a tip event?

[pulsar willow]

how important is the order of the events?
because I assume that it's nearly impossible to get always text -> sfx considering the stream delay 🤔

[keen ivy]

Hello, I've been using PHP library for api, that lx once sent me, but lately it started throwing errors about missing header, specifically x-ratelimit-bucket and x-ratelimit-limit
I want to ask, if these headers were removed and should I remove rate limit check.

[solid kettle]

Not sure if i should post this here but where can i look up on how to extract a donation message ? Using custom css and html but not succeeding to get the message

[severe shell]

Hi, if I have a question about a widget that is not working correctly, where should I ask? Is this channel the right place?
I'm having some trouble with the Instant Replay v2 widget (#widget-share message). It is working fine to generate the clips and showing on the stream, but the option Permission Level is not working correctly. Any permission I set will not change anything. If I set to Mods Only or VIPs and Mods Only any person that types the command will trigger the clip.

[cosmic grotto]

Hello! im looking to see what id change in the CSS to delay the name switching until the pink banner covers the name?

the name is the latest subscriber but you'll see from the gif, the name switches before the animation plays

when i click "use custom CSS" i lose all the graphics and stuff from the banner and it's the default shark

[hardy walrus]

@cosmic grotto See ya made it here

[cosmic grotto]

finally

[hardy walrus]

Not that I can help

[cosmic grotto]

[elfin arch]

I'll let sudo handle this one

@cosmic grotto you doing that with some custom code?

[cosmic grotto]

no, this is all been done through after effects key frames and some layers

each alert has a different one as a webm video

[elfin arch]

how are you getting the usernames in there?

[cosmic grotto]

the username is the "sub name" layer. it's the "recent subscriber" asset without "recent subscriber" at the start

[elfin arch]

oo. i see what you've done. very creative

it's um... the way you have it set up. i don't think it can be done.

[cosmic grotto]

i was thinking if i used a Custom CSS assest for the "latest subscriber" instead of the default one that SE provides, i could put in the code somewhere about delaying the name switch. im not clued up a lot for coding tho 😦

[elfin arch]

i'm more of a 'f it' i'll just code it... but... i like how you've tried to trick the system to make it work .... this may work

try to up the text delay

that might delay the name change time

[cosmic grotto]

hmm, i'll give that a shot! that's all i need is the name to switch maybe 2 seconds into the animation.
heres hoping that works

[elfin arch]

🤞 🙏

[cosmic grotto]

this is the label i use for the name. there is no animation option within that

[elfin arch]

oh ... that's a label there. 🤣

[cosmic grotto]

yea! so the label is under the video animation and switches when a new sub subs. but the name switch is instant when the animation take around 2 seconds to cover the bar

[elfin arch]

ya ya. i thought the name was part of the alert.

so you got 3 pieces there .... 'label' .. animation, & alert?

[viral patrol]

Those headers should be back shortly (today or tomorrow probably).

[cosmic grotto]

No, the animation is the alert. The animation is the red bar coming across saying "new subscriber, thank you 'sub name'" and under it is the label that switches. I have the text over the alert in the sub alert panel

[elfin arch]

your set up is quite .... um, "hacky" and i love/hate it at the same time.

i think you can get it working; but just need a simple widget to replace the label part of it. (the latest sub label)

but... i donno how followers/tippers/bits play into it. is that for subs only on the bar?

[cosmic grotto]

yea just the subs

all my other recents are in a different source

[elfin arch]

i think you just need a custom label then?

[cosmic grotto]

yea i just need to learn to code a recent sub css that has a delayed switch

[elfin arch]

it's just the "latest sub" lil widget you want to delay

🤣 delay this:

are you familiar with JS (javascipt) ? ... and it can get complex with gift subs (.... a gift of 5 will trigger 5 alerts)

[cosmic grotto]

i don't have much coding experience at all. simple things 😂 a friend of mine is good at coding but he has never touched the twitch side of it 👀 i might see if he can figure it out

[elfin arch]

it's super easy what you want to do 🙂

...but .... then can get complex... if you want just a basic "last sub" label with a delay. easy

[autumn spear]

Hey guys, did someone found a way to avoid videos with audio being stopped when autoplayed by SE widgets?

I've developed an extension where we had like 5 different video sources starting and looping on different events, and one was wrongly exported with audio, so "chrome" (or in general the Browser Overlay from OBS) would not autoplay it (https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)

I believe this behaviour in general should be stopped in obs, because generally it's super common to have an alert or something else that gets autoplayed with audio.

So again, my question would be more generally "is there a way to make autoplay on SE widgets work"?

[pulsar willow]

Hi peeps..
I want to ask if there's anyone here that can help me. I want to show the current session top 3

• Facebook star senders
• Facebook Gifted Supporter Badge senders
• StreamElements direct donations
  And somehow have these 3 items replacing each other every couple minutes..
  (Image is a screenshot of the current list of star senders we use)

[young shard]

does anyone know what the community sub gift event json actually looks like? is there a way to recognize who gifted the sub?

[severe shell]

I think you can find it here:
https://dev.twitch.tv/docs/api/reference#get-broadcaster-subscriptions

[young shard]

right i should clarify, i mean from the streamelements widget event, from using window.addEventListener('onEventReceived', ...) in custom widget js

[severe shell]

I'm not a developer or anything and I may be disturbing instead of helping. But I opened the console on browser and triggered an old sub gift event that happened in my channel. This was the result, not sure if that will help (if not, just ignore and let's wait for the people who really know something 😅):

[young shard]

ooo
pretty useful
i forgot that triggering past events was a thing we could do

[thick trail]

Hi, what is the correct way to acquire editor JWT token, for making requests to Kappa api?

[thick trail]

found /roleplay endpoint, I assume this undocumented route is fine to use?

[tribal topaz]

Hey guys, I'm trying to make a Python API for my game to make contests automatically and seems to need an OAuth2 credential, am I correct?

[heavy vapor]

Hi everyone! I'm Ari and I'm working on a personal project called Twijay that focuses on helping DJs who stream on Twitch. I've been requested to create a random text widget that puts out a line of text when a command is put into chat. That text would live in a remote file so that the moderators could update it without having to access the streamer's SE account. It's useful for teams that have text that they share among members. I hope to polish it off this week.

[burnt yoke]

Is there a way to get url params in a stream elements overlay? I've tried both window.location.href & window.location.search & neither return what I'm expecting inside an overlay.

[heavy vapor]

It depends on how you're using them. I'm adding a file location and using a text file.

in the widget.json:
"fileLocation": {
"type": "text",
"label": "File to pull text from",
"value": "some.url"
},

in the widget.js "obj.detail.fieldData.fileLocation" gives the the value in the field.

[wraith flame]

Hi there, I have a question regarding the performance of several webms in one scene. I programmed a custom widget which changes the active webm of the overlay to another when an alert is triggered. When the alert triggers it stutters heavily but when I run the custom widget in a seperate scene and implement two browser sources in OBS then everything is smooth.
Any idea why having both in one scene causes this stutter?

[tribal zenith]

do you have hardware-acceleration turned on?

[wraith flame]

@tribal zenith I tried both, the issues only start to happen when I put both the alert box and the custom widget in one browser source

[tribal zenith]

do both widgets react to the same event?

like subscriber

[wraith flame]

@tribal zenith Yes both react to a MemberAlert (YT)

[tribal zenith]

does the alert-box play a video too?

[wraith flame]

Yes it does

[tribal zenith]

sounds like there is too much media-changing going on and that causes the stutter

[wraith flame]

So it's possibly a video player issue? Because compression/file size didn't impact anything

[tribal zenith]

it's more of a hardware issue, I guess

[wraith flame]

But as mentioned before I have no stutters if I put the custom widget in a seperate browser source and use the two sources in one obs scene

[tribal zenith]

So both widgets in one SE overlay stutter, but in separate overlays they run smooth?

[wraith flame]

@tribal zenith Yes, exactly so I think it's more of a player/playback issue

[tribal zenith]

I am not 100% sure how resource allocation in browser-sources work, but I would assume each source runs in a separate thread (?)
So each widget in another browser-source would let them render in parallel and be probably a little bit more performant

But again I don't know enough about the technical side of browser-sources, so this might be more of an OBS Discord question

[wraith flame]

Alright I'm gonna look up, if I can change some stuff regarding threads but thanks for your help 👍

[tribal zenith]

but if separate sources work, then the problem is fixed

[mortal wagon]

So i was trying to use this widget by OverAchiever but the bar doesnt go up as the goal does and its meant to anyone able to take a look to see whats broken, More than happy to give you a couple bucks for a fix
#widget-share message

[tribal zenith]

If you click on "Open Editor" and go in the CSS tab to line 45, you probably see {{FgColor1}} as value. Just remove the 1 and the bar should be visible again.
Also you can delete the margin: left line above that, since that doesn't do anything. (left is not a valid margin property)

[mortal wagon]

@tribal zenith thanks man 🙂

[tribal topaz]

[just repeating my not answered question] Hey guys, I'm trying to make a Python API for my game to make contests automatically and seems to need an OAuth2 credential, am I correct?

[mild cipher]

If it's for your own channel only, then you can use your personal JWT token, as long as no one else would be able to see it (it's like your account password). if you're building something for other people to use then you would need oauth2, but not sure if they're accepting applications atm

[tribal topaz]

Nah, just for my game, it's a free bet game like saltyBet

[karmic panther]

has there been any talk about realtime.streamelements.com in NodeJS?

[karmic panther]

or any way to get events atleast

[mild cipher]

You can use socket.io-client in NodeJS and refer to the socket examples in the pinned messages of this channel

[karmic panther]

tried that one but the connection event never triggers, maybe i just need another link idk 🤔

[pulsar willow]

@here if anyone can help me, please DM me

[west zephyr]

I pulled up the development page. I am looking at working on the tips API. Any chance there is some sort of documentation as I can't see how to use any endpoints. All the pages are empty

[left rampart]

My previously working SE API wrapper started failing recently. It's claiming that the x-ratelimit-bucket header is missing entirely... has something changed with rate limiting?

[hardy walrus]

@left rampart IIRC something "oopsed" and it was being fixed. Unfortunately said person to answer about that is most likely asleep.

[left rampart]

okay @hardy walrus. I'll hope for an update tomorrow then. Thanks for the info.

[stable pebble]

does anyone have the server icon gif i want to put in on my streamdeck 😉

[karmic panther]

this server icon?

[tulip mist]

Hello guys. Problem with widgets -> LATEST YOUTUBE VIDEO

The timer doesnt work. Somebody have fix?

[winged cosmos]

Anyone here have any idea why my overlays keep resetting?

[ocean fractal]

double-check that this checkbox is not selected

(in your browser sources)

[keen ivy]

I've noticed the headers come back for few hours but they were immediately removed afterwards and the error is back again.

[tribal topaz]

Hi, me again, I'm having technical difficulties with contest scheduling, basically, anyone know the body model for the post on create contest?

Or a step-by-step for it

[jade spruce]

does anyone know how to call out the text to speech using code in streamelements overlays?

[tribal topaz]

in fact, I'm really into the "update data of the contest" info

[keen ivy]

From what I know, you are required to pass at least this structure

{
  "botResponses": true,
  "title": "Contest title",
  "minBet": 10,
  "maxBet": 100,
  "duration": 10,
  "options": [
    {
      "title": "Option 1",
      "command": "option1"
    },
    {
      "title": "Option 2",
      "command": "option2"
    }
  ]
}

[charred vortex]

I think i found a bug when I was working on a widget yesterday. i noticed that when emulating a sub event the tier might be 1000 as a string or 1000 as a number. this only happens on tier 1 subs though, tier 2 and 3 are always integers.

when clicking this button, or the 1 in the next menu

the tier is a string

but when you do a tier 1 sub using the custom dialog the tier is an int

[elfin arch]

you'll always get a number @charred vortex. although that is a good catch for the dev's to note. (those are the emulated events) .. but your widget/webhook will only see the 'listener' object

[charred vortex]

meaning when actual twitch events trigger, it will always be int and the bug is only for the emulated ones, right?

[elfin arch]

correct; you will only see the {listener: ...} object (the middle image you have is a console.log of the event) ... you see the last image.

i haven't personally played with the sub tiers but it should be integrator or 'prime' (not sure on case).

[charred vortex]

great. just thought i'd mention it cause it drove me nuts trying to figure it out yesterday 😆

[elfin arch]

if you get a type error when testing please correct me 🙂 .... but i think that is just the 'test object' reporting in the log

[charred vortex]

i was trying to do something depending on the tier of sub, and since emulating tier 3 gives 3000 as an int and tier 2 is 2000 as an int, i assumed that tier 1 is 1000, as an int, but when i was emulating the event it from the button i showed, it wouldnt work, because the emulated one sends the tier as a string.

anyway, its all good now. hopefully some of the staff will see it and correct it 👍🏻

[elfin arch]

so you don't get an int for a normal sub?

[charred vortex]

when pressing the button in my first picture, it emulates a sub (tier 1) event but the tier is a string for some reason. when you do it from the custom dialog its correct for all tiers

[elfin arch]

you are correct.

see #270206314561404928 message @charred vortex 😉

[charred vortex]

oh cool. i didnt see that

i see you already reported that. thanks

[elfin arch]

ya i thought it was just in the emulation side; but you are right. 'prime' and '1000' are string, 2000 & 3000 are int

[tribal zenith]

If you check with == both still return true. Only === will check for types
So tier == 2000 should work regardless

[elfin arch]

should be all int or all string imo; either way, still need to handle the 'prime' as well. 1000/2000/3000 should match in type though

[wraith flame]

Hey guys, does anyone know why OBS refuses to turn the opacity to 0 in a custom css script?
I'm trying to make an image fade out. It works fine in the SE Overlay scene but in OBS it doesn't change the opacity, the rest is working fine.
Any idea what's causing this?

[tribal zenith]

how are you updating the opacity?

[elfin arch]

^ that ....and are you using Windows?

[vestal crane]

Wonderful been looking for this everywhere!!

[wraith flame]

I made a css class ".animation" which changes the opacity with keyframes.

The HTML has the image and the corresponding class added.

[elfin arch]

are you using Windows @wraith flame ?

[wraith flame]

@elfin arch yes

[elfin arch]

alright; just wanted to check (the iOS or w/e it is has some issues with animations sometimes)

[wraith flame]

animations are getting through, I tested moving animations but opacity is the only one not working (in SE editor it's fine)

[elfin arch]

can you post your .animation class and the keyframe class here in a code block?

[wraith flame]

#viewHolder {
position: absolute;
opacity: 100%;
}
.run-animation {
animation-name: fade;
animation-duration: 4s;
}

@keyframes fade {
0% {opacity: 100%}
10% {opacity: 0%}
90% {opacity: 0%}
100% {opacity: 100%}
}

[tribal zenith]

opacity is in fractions between 0 and 1, so newer chrome versions might support the percentage syntax, but OBS might not

100% = 1, 0% = 0

[wraith flame]

@tribal zenith That's it thanks. I never thought of that 😅

[pulsar willow]

Hi all, I've seen a lot of custom widgets, but about 99% are for Twitch. Does anyone know how to get session top tip and star lists rotating for Facebook Gaming?

[elfin arch]

ooohhh a facebook user? #widget-share message ... check video and see if interested

[pulsar willow]

Lol, yeah Facebook Gaming Partner.. over 600k followers

[elfin arch]

i can't test fB cause i don't use it; that video is Twitch and that widget will work for fB (in theory) ... try it and if you wanna get wild i might have some beta 2.0 code for "session"

[pulsar willow]

@elfin arch I've send you a DM explaining what I'm searching for

[potent vessel]

Hey folks, trying to use the Extra-Life donation tracker, but I'd like to have it incorporate subs and bits (all money from the stream is being donated to charity) -- any ideas on how to modify the tracker to include subs / bits?

[hardy walrus]

@potent vessel This one? #widget-share message

[potent vessel]

that one is fine, I was looking at the built in one, but that one also works

[hardy walrus]

Um... The built in one is tiltify

[potent vessel]

I was looking at this one ^

[hardy walrus]

oh

Yeah. You can't do that with it.

Default widgets don't allow customization options.

[potent vessel]

ah bummer, thanks for your help!

I'll give it a shot with the other one you linked

[pulsar willow]

Hello I created one widget a progress bar html css code. How can I upload it in streamlabs or streamelwments inside to updated automatic?

[ocean fractal]

@pulsar willow if you're trying to share it so anyone can use it, you can submit a form for it as a widget share https://strms.net/codeshare

[pulsar willow]

I don't want to share I want to put it in my channel. How can I put it in streamlabs browser? And after in my stream?

How can I upload it and works in streamelements I mean.

[daring bluff]

Hello~ I hope this is the right place to ask but I recently downloaded a widget called Boxed chat by Cocahh

I'm trying to edit the CSS of this widget to edit the spacing (in red) of the chat messages. I'm not sure if its an extra line that I have to add

I tried playing around with all the existing stuff like padding or margins or aligns but I'm not sure i'm doing something wrong

[daring bluff]

oh! I figured it out 😄 o7 problem solved

[woven sandal]

Is there a possibility to create you're own design donation bar ?

[versed merlin]

Hey!

I'm quite new to creating a custom widget, and I was wondering if someone could write a short example of how to display a JS variable on screen?

Very simply put:

window.addEventListener('onEventReceived', function (obj) {
    const listener = obj.detail.listener;
    if (listener === 'message') {
        //Here I'd like it to read the variable listener and display it on screen. 
    }
});```

When it receives an event it should trigger, it stores the information in 'listener' and then if it's a chat message, I'd like for it to display on screen in the window.

On a side note: Is it possible to set a JSON field value to a JS variable?

Like;
const jsonfieldvar = {insertFieldOptionName}
?

I'd really appreciate it!

[summer geyser]

Does anyone know why I've encountered host and raid events simultaneously? Additionally, when I'm raided live, the raid and host events don't respect the queue of events from StreamElements. I've disabled my host-related functionality for the time being but I'm curious to understand this more. The StreamElements event queue sending both events simultaneously ends up causing some race conditions in the widget I've designed since I designed it around respecting the queue :\

[summer geyser]

I know that sounds like more of a Twitch infrastructure question than a StreamElements question, but I was curious if anyone knew how to handle it. It seems like it's implied that when you're raided, you're also being hosted. But that doesn't explain why the events seem to occur at the same time.

[young shard]

use a jquery selector and then the text function
for example if somewhere in your html you have

<p id='message'></p>

then in the js do

if (listener === 'message') {
  $('#message').text(obj.detail.event.data.text)
}

if you use console.log(obj.detail.event.data) you can see what values you get for every message in the browser inspector

[grand wadi]

Hey everyone, I sent a message in the help desk channel and was directed here for a possible custom widget
doing a 12hr stream in a few days and I wanted to have a leaderboard that had the top 3 or 5 viewers for the stream based on view time. Hoping to have it update on stream in real time.
I was thinking I could use SE loyalty module set to give 10 'minutes' every 10 minutes, but I'm wondering if there's a way I can display the leaderboard live? Or would I need to add a browser source to OBS and then refresh it when I can?
Also, if you think I've missed something here and it won't work, please let me know

[young shard]

there is the !watchtime command so it might be possible? but i don't think streamelements keeps track of that for their widgets you'd have to get that data from the twitch api
i did actually make something very similar just recently, except instead of based on view time i did it based on chat messages, which is very easy to track with a streamelements widget

[versed merlin]

That's working wonders, thank you!

I was previously using
document.getElementById("chatmessage").innerHTML= ..

Mind if I ask if you could elaborate more on your suggestion, to someone who is quite new to this?
$('#chatmessage').text(obj.detail.event.data.text);

[elfin arch]

you can get the top watchtime list from https://dev.streamelements.com/docs/kappa/api.yaml/paths/~1points~1{channel}~1watchtime/get

then set a timer for like every 10 minutes to update your HTML/CSS visual

[grand wadi]

I am a complete stranger to all things coding, HTML/CSS, so are you able to explain this in a way I may understand? What do I need to actually do here to get my desired result? 🙂

But thank you for the input!

[young shard]

sure, so streamelements js has jquery built in, which just makes a lot of javascript stuff easier
i recommend utilizing it instead of document.getElementById and such
for selectors, it's similar to how you'd select in css
https://api.jquery.com/category/selectors/basic-css-selectors/

whenever you see $() being used, it's jquery
and then for the actual message data, that's stored in obj.detail.event.data
specifically all of this
https://github.com/StreamElements/widgets/blob/master/CustomCode.md#message

[elfin arch]

You'd want a HTML/CSS list. this is the visual part of the overlay that viewers will see; something like:

#2: User2
#3: UserThree

Then in your javascript; you would get the data and update the names. The example that I gave will pull ALLTIME watchtime though and not a session or that stream watchtime

[grand wadi]

Is it pulling data from the SE bot? As I have not had it enabled to record watchtime yet, so theoretically could get it to record for the one stream?

[versed merlin]

Alright! That gets me somewhere.

So $() is jquery's selector and '.data' will allow me to access details of any of the events?
And am I right if I say an event is essentially an object? (In terms of terminology)

Also, you mentioned console.log(obj.detail.event.data)can be used to see what values are stored in it, but I would see this in the browser inspector? Where could I access the browser inspector to see these values?

[elfin arch]

that link pulls from your leaderboard; https://streamelements.com/dashboard/leaderboard/watchtime

[grand wadi]

Yep, didn't have loyalty enabled until now so should be able to start for just the stream! How do I create a HTML/CSS list in OBS?

[elfin arch]

That is something that is more difficult and would require some previous knowledge in creating websites or coding

[young shard]

do streamelements widgets have a way to listen for a ban/timeout event? or is the delete-messages event the only option to indirectly check if someone has been banned?

[elfin arch]

ya; to my knowledge it's the delete message; i don't think it gives the type of removal though

[young shard]

yeaaa an object
press ctrl+shift+i to bring up the inspector/dev tools, and click on the console tab
then send a chat message and watch it send an object through, and you can click on it to see all of the data in it

alright good to know, guess i'll rely on delete-messages then

[elfin arch]

are you doing it for a personal project or for community share widget?

[versed merlin]

You've been an invaluable help, thank you so much ! I'll see how far I can get

[grand wadi]

Oh I thought when you said I'd want that type of list that it was already functional in OBS haha.

[young shard]

community share
it's a widget that displays the top chatters based on number of chat messages
but, if someone is timed out or banned, i'd want their number to be cleared so that they won't appear on the leaderboard
since i'm not saving any chat message data, just userId, seems the best way would be to check if the delete-messages event happens and then grab the userId from there to clear them out of the leaderboard

[elfin arch]

not that I know of. here is a basic example; https://codepen.io/neogomo/pen/epoMJj ... basically you'd send request for the watchtime every 10 minutes then update this visual with that data

[grand wadi]

Oh that's neat. I could use that site to generate the list every 10 minutes and have it show in OBS?

[elfin arch]

ahhh nice. ... ya; i've not played with the deleted messages much; but it would be nice if you could tell difference between single message (i.e. Emote spam filter) and actual ban. I know a way to do it, but it's not community share friendly

[elfin arch]

no; that is example HTML/CSS code that you would use to make on the SE overlay editor. Then you would need to code the update part. That's just an example of the HMTL/CSS part

[grand wadi]

Ah ok... I feel like I've learned so much yet have no idea yet how to achieve my goal 🤣

[elfin arch]

There's no simple solution that I know of for what you are trying to do; you'd have to make it custom. If you want to learn, it's fun but will take a few weeks to get into it

[grand wadi]

RIP doing 12 hour stream in 2 days.
I think what I'll do for sake of simplicity is have the SE bot award 10 'minutes' every 10 minutes, and manually refresh the leaderboard and just have the browser source in OBS

[young shard]

going off of this https://github.com/StreamElements/widgets/blob/master/CustomCode.md#message-deletion
i'd assume the delete-messages event would only trigger when multiple messages are removed at once, like when someone is banned, vs delete-message which would be just a single message
im not sure though, it's kinda vague on the details

[elfin arch]

oh ya. i didn't realize there were 2 there; single and multiple.

[versed merlin]

@young shard Sorry to bother you once more, in an 'if' condition, I'm comparing my obj.detail.event.data.text to another string;

if (data === 'Test') {
  $('#chatmessage').text(obj.detail.event.data.text);
}

However, it's caps sensitive. How could I make it not caps sensitive?

[elfin arch]

you could set up the SE leaderboard Twitch widget and use that as the OBS source? https://dashboard.twitch.tv/extensions/uaw3vx1k0ttq74u9b2zfvt768eebh1-0.4.1

just add that to your panel on Twitch; then get the source link with the pop-out button

[young shard]

convert both strings to lowercase when doing the comparison: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase
if (string1.toLowerCase() === string2.toLowerCase())

[versed merlin]

Perfect! 😄

[grand wadi]

PERFECT thank you

[versed merlin]

How does one divide 5 different strings/words over 5 separate columns?

Context:
I'd like to have 5 different words at the bottom of the window, one in the bottom left, one in the bottom center, one in the bottom right, and then in between. So, 5 columns. Is this something I could specify in CSS or through HTML?

[tribal zenith]

Flexbox could do this with justify-content: space-evenly; or space-between
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[keen ivy]

Hello, I've been using PHP library for api, that lx once sent me, but lately it started throwing errors about missing header, specifically x-ratelimit-bucket and x-ratelimit-limit
I want to ask, if these headers were removed and should I remove rate limit check.

I was told (four days ago), that those headers will be back and they really were. But only for a few hours and they went missing again.

[hardy walrus]

@viral patrol ^^^^^^

[wraith flame]

It seems like when you run more than 1 webm in one SE-Overlay, alerts or other webm files start to stutter. Is this a known issue platform wise or is this a hardware problem? (GTX 1080, i7 6700k)

[sturdy oak]

@wraith flame Can you try enabling this?

That is if you're talking about them lagging in OBS

[rare carbon]

Hey everyone, I've been trying to set up an alert box for my store redemption alerts in SE. Do you know how/if we can use custom HTML/CSS code for them? I understand that we can use the custom widget, but that's as far as I know

[wraith flame]

@sturdy oak Of course but it happens in the browser to

[versed merlin]

Thank you 😄 ~I'm curious though, is Flexbox more efficient than let's say grid?

Also, I'm having trouble writing it into SE's HTML and CSS tab. Do you think you could give me an example?

I'm curious how some people manage to define a container once, in the HTML tab and it's structure in CSS. But, looking at the documentation, I feel like I have to define the amount of items and it's properties aswell, in the HTML tab.

Or if someone else could lend me a hand in this, that'd be wonderful.

[ocean fractal]

do y'all know if message events in a twitch message leave the displayColor empty if the user hasn't selected a text color?

[versed merlin]

Does it not show it in the browser inspector? I think by default it's #FF0000, looking at mine

[rare carbon]

Hey guys, bumping it again, can we at least know if this can be done?

[ocean fractal]

I didn't have a way to test it because my color was set on both my accounts 😅

I wasn't sure, because for a chat widget I wrote, some folks had their display color set to some sort of white color and it had me confused and thinking that maybe sometimes it comes back empty

[versed merlin]

I know for some chat widgets they define the color, with the option to change it to the username color, in the event the user types /me in chat, they can match the text to the username color. Even if by default it's white. Or at least, this is what I assume

[ocean fractal]

gotcha. I think I have resolved to just say that if I can't find a display color, I'll assign a random one for that user for as long as the widget is running

[versed merlin]

Can I use a JSON field value as a variable in JS?

E.g:

    "type": "text",
    "label": "Write your option",
    "value": ""
  }```

Can I parse "Option" in JS?

[ocean fractal]

yes

sorry I'm working on verifying info buti know its possible

window.addEventListener('onWidgetLoad', function (obj) {
    const fieldData = obj.detail.fieldData;
    someVariable=fieldData["someText"];
    // OR
    magicNumber=fieldData.someNumber;    
});

inside the widgetloadevent, the obj object should have your fielddata, converted to a js object you can access

what you might want to do is set a global variable that is set on widget load. then, on onEventReceived events, you refer to that global variable to get your config options

i believe it's also just a one-way binding. I don't believe you can update the property in js and see it update in the settings on the UI

[versed merlin]

So, you're saying I can't change the value in the fields (on the left) and have it work in JS? I do apologise, I'm quite new to this.

[ocean fractal]

Sorry, I was saying you can't to the other way around

changes in your fields on the left will cause your widget to reload

and when your js runs the code above, it will be set to the new settings

[versed merlin]

Ah I see! That's quite alright.-

If, as in my example above, the value is given to "Option", how can I use this to access it?

[ocean fractal]

you could do something like the following

var fieldData;

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

window.addEventListener('onEventReceived', function (obj) {
    if (fieldData.option === "the thing I want to compare against") {
      //  do stuff;
    }
});

whoops, lemme edit

that's better

that should work for you

[versed merlin]

It works! Awesome, thank you so much 😄

[ocean fractal]

np!

[versed merlin]

Mind if I ask a silly question or two?

What'd happen if I don't create a var fieldData; at the beginning?
Wouldn't it just create a var named fieldData when the widget loads?

[ocean fractal]

not a problem

main thing is that in javascript (and many programming languages) scope matters. Setting it at the very beginning lets you use it in the global scope. Whereas if you set the variable inside of that code block, I believe that the variable will be deallocated when that codeblock finishes executing

i forget what specific stuff happens between the keywords let and var which are two ways of denoting a new variable in javascript, but just to be safe with scoping, leaving it at the top also makes it clear its a global variable 🙂

[versed merlin]

I see 😄 So this way I don't have to re-define the scope in each codeblock?

[ocean fractal]

right! And not only that, but I'm pretty positive that the object that comes in on an onEventReceived event doesn't include field settings. So if you want to use them there, you'll have to pull them from somewhere

actually, it looks like var is pretty loose. You could technically define the var in the load event and it should still be usable in the event function

this stack overflow might give better info then I can 😅 https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var

[versed merlin]

Gotya! So var lets me use the variable even outside it's function block. 😄

[ocean fractal]

yep!

[versed merlin]

Though I do wonder why someone wouldn't use var all the time, rather than let? I suppose there's no harm in holding onto a variable?

[ocean fractal]

one example:

for (var i = 0; i < 10; i++) {
  // do stuff
}

console.log(i); // this will output 10!

it might not get too messsy here, but imagine that you relied on i in multiple places. Where would you go to find the definition of i? If it's not in your immediate scope, it can be hard to track down where it could be

granted, the same can be said with global variables, which is why both should be avoided 😅

let basically promises that any variables used in a scope won't be used anywhere else, unless explicitly assigned to some other variable that's in a higher scope

like in the example above, if I replace var with let then I'll feel pretty confident that the variable i which I don't want to use anymore in the lines below it, won't exist in my scope as a variable to pull from

idk if I'm making a compelling or coherent argument here, but I hope it helps a little bit. And I think that article above can give you a pretty good explanation of pros and cons. It's just a little technical 😅

[versed merlin]

No no, you're doing a great job explaining. I'm surprised this usage slipped my mind. 😄 It seems so obvious looking at it now

I'd have had to go through the whole alphabet if I wanted to create more than one loop

(If I were to use Var)

[ocean fractal]

you could re-use i, but there's always the risk of pulling it with data that doesn't make sense

and using the alphabet would be your safest bet to avoid that 😂

[versed merlin]

I think I'd go nuts -I'd be using 'a' for a loop and later use the var and wonder where the hell the value came from

[ocean fractal]

lmao!

well now you know 😄

[versed merlin]

Thank you very much 😄 I hope it wasn't too bothersome to answer my silly questions. 😅 Most people that start writing these things start off with more experience

[ocean fractal]

nah it's awesome you're digging into it. Hope all this info helps!

[versed merlin]

Definitely! Makes this so much easier. I was about to give up on accessing field data, and straight up re-write the values each time in JS.

[inland ice]

@pulsar willow First off, AWESOME video widget!!! I've been looking for that in SE forever. I do have one or maybe a few questions. The first one, is it possible to resize the widget, and then have the video fill out the resized value? Thank you for creating the widget, and for your time. 🙂

[indigo flume]

@pulsar willow Don't post links unless asked to!

[pulsar willow]

why

[indigo flume]

Do you know what this channel is for?

[pulsar willow]

ni

no

[indigo flume]

Then don't post random links

[pulsar willow]

y

[rare carbon]

What is this channel for?

[indigo flume]

If you have questions regarding our API

[rare carbon]

Thank you for the response, could you please let me know if this can be done?

[elfin arch]

are you familiar with HTML/CSS & JS? ... and ya i'm not seeing the custom CSS option for that widget .... would have to go custom

[rare carbon]

I am familiar enough to copy and paste the HTML and custom fields into the widget editor, but somehow when I try to emulate the store redemption or save the widget to use it as a source, it does not trigger the event

[elfin arch]

hmmm.... ya i'm not seeing any of the default alert boxes that respond to store redemption that can be edited

unless i'm missing something obvious as well; but here is some JS to get you started if you go the custom widget route ```js
window.addEventListener('onWidgetLoad', obj => { console.log('widget loaded') });
window.addEventListener('onEventReceived', obj => {
if (!obj.detail.event || typeof obj.detail.event.itemId === "undefined") return;
const event = obj.detail.event;
console.log('redemption event: ', event)
});

[versed merlin]

Could someone help me for a moment?

In HTML Im using a class based on fieldData, but it's case sensitive.
Is it possible to accept any case? Like transforming it to lowercase?

E.g:

fieldData:

"Option 1": {
  "Type": "text",
  "label": "Type your option",
  "Value": ""
}```

Right now, if my CSS class is lowercase, and my field data value is not completely lowercase, it doesn't recognize it

[pulsar willow]

Hey @inland ice 🖖

To stretch a video instead of scaling it you could add

  object-fit: fill;
}```
to the widget's CSS code *(Edit Overlay -> Select the Widget -> Settings -> Open Editor -> CSS)*.

Now when you trigger a video, it should be deformed to fit the shape and size of the widget box.

(Also thank you for your kind words 🙂 .)

[versed merlin]

Perhaps there's a way to only allow lowercase input in json field data? Or maybe there's an HTML attribute I can use to turn class input into lowercase?

[tribal zenith]

The best-practice for JSON is writing keys in lowercase without dashes and spaces

so it's

"option1": {
  "type": "text",
  "label": "Type your option",
  "value": ""
}

the actual input of the user gets stored in the "value" part not in the key name

[versed merlin]

I apologise, I wrote it on my phone and it auto capitalises.

With lowercase, I was referring to the value you type into the fields on the left side of the screen

[tribal zenith]

If you reference the value directly with {{option1}} in your HTML/CSS, then no.
If you apply the value inside of the JS code, then you can of course transform it how you like

[versed merlin]

Alright, thank you 😄

[tribal zenith]

For example

let option1;

window.addEventListener('onWidgetLoad', function(obj)
{
  const fieldData = obj.detail.fieldData;
  option1 = fieldData.toLowerCase();
  // option1 now contains the value in lowercase and can be used further
}

[rare carbon]

thank you for the JS code, I've pasted it into the custom widget, but it still does not trigger the redemption event, should I add this over the existing JS or should I wipe it clean?

[versed merlin]

That'll come in handy, thank you 😄

Is it possible to align a flexbox container at the bottom/end of the stretchable window?

[tribal zenith]

what "stretchable window" do you mean?

[versed merlin]

The widget window 😄

[tribal zenith]

if you set the width and height of your root element to 100% it should automatically fill it and align correctly 🤔

[versed merlin]

I'd set the height of the containers, I just would like it to be positioned near the bottom 😄

[tribal zenith]

if your flexbox already has the full height align-items: flex-end; should do it

[versed merlin]

I believe that only affects the item containers, but not the actual flexbox the items are in

[tribal zenith]

then

position: absolute;
bottom: 0;

[versed merlin]

It works 😄 Although it resets the container spacing and sizing.

It limits the container size to the width of the container items and doesn't space the items

[tribal zenith]

Well it all depends on the rest of the markup. Another solution could be to nest flexboxes and align them within

[versed merlin]

I should clarify that I'm using

  flex-wrap: wrap;```

Positioning seems to work well 😄 Although it unfortunately messes up the alignment. Quite confusing

[stoic night]

Hey guys, I'm relatively new to SE and I'm searching for a possibility to create one textbox that displays all the standard alerts for twitch like last follow, last sub and so on in a marquee style. Would be great if someone could tell me if this is possible with the custom widget 🙂

[inland ice]

You are most welcome for the kind words! 😃 It's awesome codery, and you shared it. Again, thank YOU. Where in the CSS do I put that snippet?

[pulsar willow]

The position shouldn't make an difference as long as you don't put it inside of an existing css ruleset.
So, I would just append it at the end.

[inland ice]

OK. Thank you again 🙂

[pulsar willow]

np. I hope it does what you was looking for 👍

[inland ice]

And THEN some

[versed merlin]

Is it possibly to use JQuery to change a div style? Specifically 'bottom'

Atm
$('#option1id').style.bottom = 5px;

isn't working for me

Instead I get the following error in the console:
Uncaught TypeError: Cannot set property 'bottom' of undefined

[mild cipher]

You're combining jQuery and vanilla JS :)

It would either be,
document.getElementById('option1id').style.bottom = '5px';
or
$('#option1id').css('bottom', '5px');

[versed merlin]

Thank you! I still have trouble differentiating them 😄

[digital magnet]

Hello 🙂
Is there a way for the follow alert to play different videos depending on the followers name length? I want to write the followers name into a frame fitting around the name so I need different frames for different text lengths so it looks good.
Hope you can help me ^^

[keen ivy]

Hello, I've been using PHP library for api, that lx once sent me, but lately it started throwing errors about missing header, specifically x-ratelimit-bucket and x-ratelimit-limit
I want to ask, if these headers were removed and should I remove rate limit check.

I was told (six days ago), that those headers will be back and they really were. But only for a few hours and they went missing again.

[elfin arch]

^thats an @viral patrol question

[pulsar willow]

Hey smart people!😉 I'm trying to get a rotating list widget going for Facebook streamers.
Field 1: star - session - <show 3 items> [" name" - "amount"]
And
Field 2: tip-session-<show top 3> ["name" <local currency> "amount"]
Field 3: a list of the top 3 Gifters of Supporter Badges

I can't find the location and function for the Data field in custom widget.
If anyone has an idea, please contact me!

[viral patrol]

I have forwarded it to devs. I hope it will be back soon.

[keen ivy]

Thank you very much ❤️

[versed merlin]

Would someone know how a Field Button could interact with Javacscript? 😄

I've set up the button in the fields, but I'm not sure how to utilize it

[pulsar willow]

When the button is pressed, it creates an event you can listen for. (At least it worked in my tests 🤔 )

    const data = obj.detail.event;
    
    if (data.listener === 'widget-button') {
        console.log("greetings from the button");
    }
});```

[versed merlin]

Wonderful, thank you 😄

I tried this:

  var event = obj.detail.event;
  console.log(event);
});```

But I keep getting a console error saying 
```about:srcdoc:152 Uncaught TypeError: Cannot read property 'text' of undefined
    at about:srcdoc:152
    at about:srcdoc:34```

I'm not sure what's wrong with it?

[pulsar willow]

My guess would be: a reference in your HTML or CSS to a field that doesn't exist? 😅

[versed merlin]

It happens exclusively when I press the button 😅

    "type": "button",
    "label": "Reset Votes",
    "value": "Reset Votes"
  }``` this is the field

[pulsar willow]

I can execute it without an error 🤔
Very strange

[versed merlin]

[versed merlin]

Is there any way I could identify the problem more accurately? I've tried excluding the rest of the JS code,

Unfortunately to no results.

..I press the button in a new widget, different variable names and fields, and it activates the other widget's button aswell?

[pulsar willow]

hmmm ... I don't think that this behavior is normal 🤔
Did you try to log out + log in again?

at least for me, your code works:

https://jsfiddle.net/qxhv2amc/
https://pastebin.com/SwTs0E9x

output to the console:
{listener: "widget-button", field: "someButton", value: "Reset Votes"}

[versed merlin]

This is worse than having a song stuck in my head that I can't remember the name of. It's driving me nuts.

Yours works like a charm. I replaced it with my button attempt. I suppose the problem lies elsewhere, but I can't find where.

[versed merlin]

Re-logging unfortunately did nothing for me. I'm stumped 😅

Completely different values in either widget, and they still interact with each other

[versed merlin]

I may have identified the cause..?

I had a few other widgets on the overlay, all without a button however, but moving my widget and yours to a new overlay fixed the issue. I guess there was an unexpected link somewhere.

Completely removing the button function from my widget and using yours, still set off the error. Despite very random values.

(I changed all values copied from yours to completely random ones to assure there's no unexpected links.)

I have no idea what caused it. It's not that the button didn't work, so I suppose I shouldn't pay as much attention to the console. But a link could've been concerning 😄

[versed merlin]

Would someone know why this

  var listener = obj.detail.event;
  console.log(listener);```

Suddenly returns '[object Object] ?

[versed merlin]

Or why this some times works and often doesn't ?

var fieldData = obj.detail.fieldData;

[carmine atlas]

@elfin arch , I have a Question about the AIO Rotating Goals Widget. What is the "Time Period" for the Goals or is it just Static?

[young shard]

obj.detail.event is an object
you probably want obj.detail.listener

[young shard]

this only works with the onWidgetLoad event
save the data into global variables to access it later
look at this for an example https://github.com/StreamElements/widgets/blob/master/CustomChat/widget.js
or anything in here really https://github.com/StreamElements/widgets

[young shard]

does anyone know how i can use this api:
https://dev.streamelements.com/docs/kappa/api.yaml/paths/~1bot~1{channel}~1say/post
to have my widget send a message in chat through the bot?

i have a widget that visually displays the top 5 chatters based on how many messages they send
i want it to listen to a command, like !rank or something (that part is easy i can do that), and then send a response with their rank data
so that users can check their rank if they're not on the leaderboard

[versed merlin]

That's awesome! I'll definitely have a looks at these, thank you for the help. I'll compare it with my attempts.

I ran into another problem that I'd like to ask about; my images won't load in OBS, but they do in SE. I've used CSS content: url() and background-image, and loaded them into a flex box using divs. Is there anything I can do to have the images load? (And hopefully keep their spot in a div.. or my entire widget falls apart..

@young shard forgot to tag, sorry.

[young shard]

do images load if you just use a normal <img> tag?

[versed merlin]

I could try- Does that usually work through OBS?

[young shard]

yea

[versed merlin]

I'll try that and hope for the best 😄

[faint gazelle]

Hello, how can I import html2canvas on streamelements?

[young shard]

as far as I know, any external javascript must be available on a known js CDN (including but not limited to jsdelivr, cdnjs, code.jquery.com), imported via html script tag

[flint mirage]

could someone help me with adding proper padding to this chat box? I was messing around with Yet Another Chat Box (my favorite chat widget now) and I want to add padding to the top and bottom so that the background color of the chat is there, but the chat messages won't appear and cover up my Now Playing widget and Recent Event Feed widgets.

it seems like it should be able to be done by just changing the padding-top and padding-bottom valkues, but i'm not seeing any effect?

[ocean fractal]

hmm i might have ended up nixing the left-right padding between messages and the box at one point or another

lemme see if I can give you a good answer for a solution

[flint mirage]

i was able to add space at the bottom by changing the 20px in the height calc to 50

but i'm not sure if i can do anything about the top

[ocean fractal]

the top is tricky because you're either going you have to turn off overflow so it cuts off from inside the chatbox but that doesn't look too good when you start throwing animations in there

but for the left-right padding, you could try with some margins instead.

I'd keep those padding values, but you could also throw

margin: 10px;

to apply a 10px margin to all sides

or

margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

then fiddle with them until they look right

[flint mirage]

i'm guessing it wouldn't work if i had only margin-top, right?

i'll mess around with it in a bit, thanks for the perfect chat widget btw 🙂

[ocean fractal]

looks liek throwing a margin-top up there does let you cut the text off

[flint mirage]

i also noticed testing alerts in the overlay editor sends test messages btw

[ocean fractal]

iiinteresting

I'm not sure if I know how to make that not happen

[flint mirage]

i'm assuming if someone subs it wouldn't also send a test message tho LOL

[ocean fractal]

lmao it shouldn't for IRL messages and alerts

but I'm glad you like it! I suppose it's not going to do everything though I'd love it to haha

[flint mirage]

so now it will cut off the top but it's not cutting off the bottom anymore

even adding a bottom margin is having no effect

okay finally found a work-around

[ocean fractal]

you can add some margin to the bottom too, yeah?

[ocean fractal]

I'll fiddle around with somethin this evening

[flint mirage]

margin bottom didn't seem to have any effect for me

[ocean fractal]

i dm'd you a fix @flint mirage

[rare carbon]

Hi, I’ve used the JS code for the custom widget, but it still does not trigger upon the item redemption event, am I missing something?

[rocky aspen]

Hiii! I'm currently using the Streamathon Widget by @viral patrol And i was wondering if there was an option to actually reduce the timer, made a little mistake by repeating an alert and the timer went up, and I want to cut it back down if possible D:

[viral patrol]

The easiest way to do so is to set actual duration in widget settings as "initial time". Then click save (so data is populated to Overlay in OBS). And then click "Start/Reset"

So it should start with the time there.

[rocky aspen]

Got it! Thank you so much ❤️

Sorry one last question @viral patrol Do I add the remaining time on top of that as well?

I've streamed a total of 55 hours and 43 minutes, and I have 6 hours and 40 remaining

[viral patrol]

Just the time since now

[signal jetty]

I need notify my livestreams in discord the streamelements have a api or a bot for this? Ps: sory my english is fron the translate

[pulsar willow]

You need to create a webhook in the Discord server you want to post a notification

[obtuse island]

how can i increase the Widget Height in the All-in-one Widget. because only the width can be adjusted. and also i cant seem to be able to add the icon "tiktok" to my socials and yes i checked that its free on fontawesome @broken coyote

[broken coyote]

you'll need to take the verison of fontawesome up one.

[orchid cobalt]

Hi! I was trying to find out how to do this on google, and an article by the widget creator led me here - the Level Up goal widget by AnneDorko, I was wondering if there was any way at all I could make it track subs instead of donations? I'm clueless with code, so in my mind there should just be the one parameter to change right? But if its not possible for an idiot then don't worry! Alternatively, is there anything similar floating around?

[broken coyote]

https://streamelements.com/dashboard/overlays/share/60885c85384293d42f327467
@orchid cobalt maybe this will help

[orchid cobalt]

Oh that does help thank you! Sorry if it was a silly question

[broken coyote]

no problem. i did a quick edit on it to change it to subs. so i hope it works for ya lol

[sudden crown]

Hi! I am currently using the Recent events - last even rotator by co6studios and I am noticing that it works for part of my stream, then will stop for a while, then pick back up again all in the same stream. Wondering if there is any reason for this?

[lime mountain]

Hi! I'm using the credit roll widget by Grot, and no names will come up when I roll it at the end of stream. I have an events rotator that goes all stream, so I know data is showing up, but it won't roll in the credits. I've tried starting fresh with a new widget and that still didn't help.

[pulsar willow]

Hi can you help me with my command?
Shout out to ${1}, a streamer friend of Keira. Go check them out at https://twitch.tv/${1} They last streamed ${game ${1}}
This works but if a mod types @woven arrow it gives a link with the @ symbol which is not the correct link then to their channe

[pliant bridge]

Is there a variable alternative to !filesay? I've tried ${urlfetch <link>} but it doesn't post the full thing/doesn't do the same as !filesay

[ocean fractal]

Is it possible to send a chat message from the custom widget?

via the streamelements chatbot

[viral patrol]

@ocean fractal directly - not recommended, but you can use proxy. Take a look on #widget-share - for example Bot Trivia (as it one seems to be not complicated) 🙂

[hardy walrus]

I was planning on using a feature that a competitor had but it appears that they're closing up shop with that and other similar things in a couple weeks. So I'm hoping that one of you lovely Code Gurus would be willing to take a shot at it and make something as closely similar as possible.

Basically as the video shows as bits are cheered the bar progresses from each color value of the bits tiers. Along the left side it shows a stationary yet animated bit of the current level along with the progress to the next one.

[ocean fractal]

thanks! I'll take a gander

[sudden bramble]

Hi, is it possible to do math with the variables? Lets say I have a follower goal for the week. i want to make a command that takes my goal and subtracts ${channel.followers} and spits out the amount needed to hit the goal

[hardy walrus]

@sudden bramble As long as you don't mind manually updating at each point this will work ${customapi.https://twitch.center/customapi/math?expr=FollowerGoalNumber-${channel.followers}}

[sudden bramble]

What part would i manually be updating?

[hardy walrus]

The FollowerGoalNumber replacing it with the actual number.

[sudden bramble]

Thanks, i'll give it a shot!

[sudden bramble]

That works, thanks!

[outer jewel]

Hey! I am having a small issue with making an alert in stream elements. Its a video file and i set the layout of text to be "text over image" but nothing shows up.

the column and row shows up
the video is designed for alerts

[mortal knot]

Text not showing up over your alerts? Go to the Advanced Text Settings and set the top margin to 50, you can work your way to the right position from there.

[outer jewel]

perfect! i had to go to 180 but i found it. Thank You!

[modern solar]

hey, I have an issue with my overlay in the elgato software
I added it to my Capture Screen and it was instantly working, but now it just stopped and I can't figure out what happend. Can you help me?

[mortal knot]

@modern solar If you are having issues with Elgato hardware or software, we recommend reaching out to their support here: https://e.lga.to/help

[modern solar]

thx

[sudden crown]

Hi! I am currently using the Recent events - last even rotator by co6studios and I am noticing that it works for part of my stream, then will stop for a while, then pick back up again all in the same stream. Wondering if there is any reason for this?

[sudden crown]

@wooden pulsar

[fervent rock]

To get a list a latest subscribers, there is no single endpoint. "sessions" is where to get them?

[elfin arch]

are you trying to get it from widget data or an API endpoint?

[fervent rock]

API

[pale crown]

Hi! Sorry to bother but does anyone else use this widget and could help me out with smth?

I'm having some issue with the pet responding to Tips. It seems to not be changing to the image I chose, yet everything else works fine. 🤔

[pulsar willow]

Hey! When im changing animations in the harris heller overlay with the recent events. Nothing happens, pressing save all the time. Please help

Hi, so I have a SE widget that shows recent feed like Follows, Subs, Cheers, and Donos, but is there a way to add Raids on it too? I personally don't know how.

[versed merlin]

I was wondering if someone could tell me how, in most chat widgets, there's a single container in the HTML DOM, and when new messages come in, it slides the text up, to make space for a new message container

[ocean fractal]

so, there's two parts to it, there's what you throw into the DOM (via jquery or javascript)

And then there's how the data is displayed, via css.

there's a css feature you can use called flexbox, which has a bunch of settings you can tweak (for reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

But I can tell you what I did for mine, first, you insert your message into the dom, and then, on the div element that holds all the chat messages, you can add at least these two properties in the css:

.messages {
  display: flex;
  flex-direction: column-reverse
}

which, if you apply it to some code likse

<div class="messages">
  <div class="message">message 1</div>
  <div class="message">message 2</div>
  <div class="message">message 3</div>
</div>

it would display them like

[message 3]
[message 2]
[message 1]

it gets trickier with animations. That's another story, but for my chat widget, I use a 3rd party tool called animate.css that helped with animating new messages as they come in without writing my own code for keyframes 😅

[versed merlin]

This is what I do aswell, yeah 😄
What I saw was that people making chat widgets only define one container and a class, and that's it. (Or two) Allowing a seemingly 'infinite' amount of messages, depending on the container height. I'd love to know how to do it with animations.

Unfortunately chat widgets contains much more code than I'm looking for in JS, it's hard to dissect 😄

I guess similar to a Recent Events Widget?

[ocean fractal]

yeah I'm not sure how to make a chat widget without mostly JS 🤔
what you can do is inspect the code in a browser to see what is ultimately spat out as a result of JS processing. Once the javascript finishes it's part, it's all html/css doing its work

I haven't looked at the recent events widget so I couldn't say 😅

[versed merlin]

I'm okay with using JS, but I can't figure out how it can seemingly create a new / add a container I'm currently pre-defining them and editing the container contents, like you suggested

[ocean fractal]

Do you mean like how does a new message get added via js?

My understandings a bit foggy atm

[versed merlin]

Essentially, yes. I apologise for my phrasing;

<div class="container">
    <div class="chatContainer">
    </div>
</div>```

This is what the HTML DOM looks like, in one of the chat widgets I opened as an example

For every message in chat, it seems to add a new item to the chatContainer

[ocean fractal]

yeah I believe it's called like a messageContainer or something

it could probably be named better tbh 😅

[versed merlin]

I've been trying to dissect the widget to find out how it pushes the previous message up one line, and makes space for the new message / item

[ocean fractal]

So, it's a combination of the flexbox thing earlier, and the fact that by default, html uses relative positioning for things

when a new message is appended to the dom, it suddenly has space that it has to take up in order to render. The flexbox stuff tells it how all the messages sit relative to one another

i believe the message gets prepended. So it's at the top of the list. And when it's flex-direction is set to column-reverse, it's being told to render everything, but from bottom-up

btw, that's being set in the chatContainer. When messages get inserted, they're inside that container. chatContainer's css basically says "any child element that's inside of my container gets arranged in a column from the bottom-up"

maybe container isn't even the best word there. it's just a dom node, that has children. And each node child is a message

[versed merlin]

I'm following you so far; So, what's adding a new child to the container? If not a new element defined in HTML?

[ocean fractal]

so, in that same widget, (and this is using jquery so it's kinda doing this stuff on easy-mode), there's a line that's a bit further down

  // create a dom reference of the generated message
  let domMessage = $(message);

  // add message to beginning of list
  $(".chatContainer").prepend(domMessage);

message is a string, which has the computed html that should be displayed for a message. in the first line, it's getting parsed into an actual html dom element.

in the bottom line, we're getting a reference to the dom element with a class name chatContainer and is prepending the new domMessage as the first child element of chatContainer

prepend i guess is kinda a misnomer. It should really be something like appendAsFirstChild() or something lol

but those two lines are what does the work of adding the message as a new child to the container in html

[versed merlin]

So prepend allows you to add a new child to a DOM element? And the first line simply storing the information to add?

[ocean fractal]

So prepend allows you to add a new child to a DOM element?
yep!

And the first line simply storing the information to add?
almost! The message string gets parsed into an html object first, and then it's stored in domElement for adding

[eternal cipher]

HELLO

[versed merlin]

Wonderful! I can't wait to play around with it and see how it goes. Thank you so much ~in the event that I can't .prepend in the chat widget(s), is there another (function? I think it's called?) that could be used instead? Like a JS variation instead of Jquery?

[ocean fractal]

Yeah there's a way. I'll be at a keyboard in a bit and can write it out

[ocean fractal]

@versed merlin
so, the way to do that in regular javasacript might look something like this. I haven't tested it but this is what I could throw together with js documentation 😅 :

var domMessage = document.createElement('div');
domMessage.innerHTML = message;

var chatContainer = document.getElementsByClassName("chatContainer")[0]; // getElementsByClassName returns an array, so get the first

chatContainer.insertBefore(domMessage, chatContainer.firstChild());

that should insert it, but my gut also tells me that when you createElement on a div, you might end up with something like

  <div>
    <div class="message">
      <!-- all your message goodness -->
    </div>
  </div>

which could throw css off

[elfin arch]

that works right in my head. I would suggest giving each chat domMessage element an ID & class though so you can target it later. (say a bad message is sent to chat; you can remove them from the overlay. good option would be, say id was the message id and class is the userID). You can also add a class for the animation when it comes in. One other note with the chats, if you don't have them timeout and fade away after a set time, i'd suggest cleaning them up after X amount so a 6 hour streamer isn't building a DOM with 5000 chats that are buried

[ocean fractal]

yeah if you've got an active chat it could really start to take up some ram on your pc

[dry oak]

Hello. Please tell me, streamelements have something like .on('tip', (event, data)=>{})? Or should I periodically make a request for "https://api.streamelements.com/kappa/v2/tips/channel "?

[elfin arch]

are you using a widget @dry oak

[dry oak]

I'm not sure if I understood the question

[elfin arch]

if you are using a widget/overlay @dry oak you can get that from the each event; or if you are using external code you'd get it from webhooks.

short answer is 'no'; there is no need to check, the system will send them to you

[dry oak]

using a socket I can get the tip event by connecting to socket.on('event', (data) => {}), right?

[elfin arch]

correct

[dry oak]

Thank you

[elfin arch]

no problem; here is the reference doc: https://dev.streamelements.com/docs/kappa/docs/Websockets.md

[dry oak]

the example on this page should work and all I need to do is insert the JWT key? If so, then I get a socket connection message, but authentication is silent

[elfin arch]

did you get this console.log?

[dry oak]

yes

[elfin arch]

did you get this console.log?

[dry oak]

no

accessToken is a JWT key? or should I get the token in some other way?

[elfin arch]

it should be JWT

[mortal knot]

You can find your JWT token on your account channels page (Show Secrets to reveal the token): https://streamelements.com/dashboard/account/channels

READ ME: This is a private security token. Do NOT share this token here or other public places, only with a StreamElements staff member in private.

[elfin arch]

you are passing that as a String, right?

[dry oak]

Yes of course

[elfin arch]

hahah; just had to check. sometimes i never know cause i can't see your code

[dry oak]

I understand you😆

[viral patrol]

Try to use this one. This one has integrated websocket <#dev-chat message>

The code there may be bit outdated, but it does the trick and will allow you to extrapolate from there.

[elfin arch]

socket.on('unauthorized', (res) => { console.log(res); })
may also help

[dry oak]

{message: "Failed to authenticate"}

[elfin arch]

ooohhh change 'method' to JWT

lowercase jwt

[dry oak]

it really worked, thanks a lot

[elfin arch]

you said it first 🤣 ; just took 15 minutes for it to click in my head

[dry oak]

😆

[elfin arch]

...ohhhhh; yup. that needs to be changed in the example.

[versed merlin]

Thank you so much for your time and help I managed to make exactly what I wanted !

[idle pelican]

on commands is there an option to change the text to italic aswell as replying?

[hardy walrus]

Simply add /me at the beginning.

As far as making it look italic for you gimme a sec.

[idle pelican]

Did that, but if you ask the command to reply it says the text as well "/me"

plus for me "/me" goes italic and not the colour of the name

[hardy walrus]

In OBS settings for stream are you using a stream key or logged in with account?

[idle pelican]

how u mean mate

[hardy walrus]

In the stream tab of obs settings does it say disconnect or connect account?

[idle pelican]

disconnect

[hardy walrus]

What does the box by it say?

[idle pelican]

https://gyazo.com/8a93fd6f79dcc2ff6a0114e6980a3d7f

[hardy walrus]

Follow this #helpdesk-selive message

[idle pelican]

ty

but @hardy walrus

if I ask a command to reply.

instead of "say"

Im presuming it wont work

[hardy walrus]

As long as you do that it will.

Albiet just for you.

[idle pelican]

ok illl try

https://gyazo.com/c5703770da11b575faa137ac9d1cfdd6 @hardy walrus

that was what i meant 😛

[hardy walrus]

Ah.

Yeah. Gonna say no-go.

[idle pelican]

Yep so its just best to go reply then

and then other commands Im presuming will still work

[hardy walrus]

Yup

Gonna bring it up in tomorrow's meeting.

[tribal zenith]

can't you just let the bot "say": /me @${user} YourText and that would have the same result as replying?

[hardy walrus]

@idle pelican ^^^

That should work exact same.

[tribal zenith]

actually it might be /me @${sender} YourText. One of them refers to the Bots name

[idle pelican]

oh?

let me try Pog

sendeer one dont work

aint both dont work

aye*

[tribal zenith]

ah yeah, my bad, I forgot the $

should work now

[idle pelican]

ty

tyvm it worked 🙂

[tribal zenith]

[wicked forum]

dont know who can help but i cant update any settings on my tip page. There is always a message that something went wrong then it never saves.

[young night]

can anyone help me figure out how to set up a list using api or whatever to get randomized lurk command responses? the 'random pick' feature already in streamelements doesn't have enough space for the options i want

• plz @ or dm me

[tidal valve]

Has anyone ever played a Twitch Clip in a widget before? I'm getting CORS errors that I'm unable to work around.

[mild cipher]

https://thefyrewire.com/docs/api/twitch/pastebin/

[tacit mortar]

Anyone familiar with getting "NaN" as a result when an event (follow/sub) occurs live (emulated events seem fine)? Seeing that with @left notch using the simple goal bar from widget share.

[idle pelican]

Anyone found that the feed rotater from alpha gaming doesnt work?

[dry oak]

Yesterday, with your help, I was still able to go through the socket authentication step. But I can't figure out how to listen for events I'm interested in, like chat message, tip, etc.
If I understand correctly, this link is only for the custom widget on the overlay page
https://github.com/StreamElements/widgets/blob/master/CustomCode.md

[viral patrol]

@dry oak For chat messages you will need twitchJS (tmi), SE doesn't forward chat events.

[dry oak]

what about tip events?

[elfin arch]

should be same as https://github.com/StreamElements/widgets/blob/master/CustomCode.md#on-event

obj.detail.listener.tip-latest *webhook example has data instead of obj

[dry oak]

socket.on('event', (data) => {
    console.log(data);
    // Structure as on https://github.com/StreamElements/widgets/blob/master/CustomCode.md#on-event
});

will this piece of code be called in response to a new tip?

[viral patrol]

Yes. If you replay a tip from Activity Feed it should be logged.

[dry oak]

thanks, I'll try

really works, thanks👍

[young shard]

I've seen it before with a continued sub event, which doesn't seem to send an amount

tho not sure why that'd occur for a goal bar

seems like the code assumes that every sub/follow event has a count, amount, or quantity property
but for those events, wouldn't a simple increment work instead of trying to read those properties?

[elfin arch]

did you see 'quantity' in the code? It should only be count or amount. .... or i missed something and my widget is broke 🤣

[elfin arch]

^ and for the bars; there is no need to keep an internal counter; as each new event will send all the information

[young shard]

going off of this widget #widget-share message

[young shard]

huh never realized that, good to know

[elfin arch]

ya; quantity is not a thing. (at least inside of the SE widgets)

[faint lake]

Has anyone worked with something to embed the bot into discord?

[hardy walrus]

No plans atm.

And I mean nothing rather than can't tell when.

[elfin arch]

i mean i've worked on it; if you are doing something custom; ... but it's not a default feature

[sharp ginkgo]

Hi Guys, could you help me? I'm trying to use the "Get userpoints for specific username" but the response is

{
  "statusCode": 404,
  "error": "Not Found",
  "message": "abe_br was not found"
}

I know that this user has points

[lofty moss]

how do i get a command from keyword or allias

ping^

[glass kettle]

Hello, are you going to correct the widget edit on FireFox pls?

this

[lofty moss]

nvm

[glass kettle]

end in clone in firefox :

in edge or google :

[mortal knot]

@glass kettle Our Dashboard and Overlay Editor are Chromium Optimized. We strongly recommend using Chrome. Opera GX and the new Microsoft Edge Chromium might work closest to Chrome as its also Chromium built. Firefox also works, but some things might look a bit different or not work. We do not recommend using Internet Explorer with our Dashboard as it does not support functions.
If the website doesn’t work on chrome, be sure none of your plugins is blocking our website or clear your cookies. You can try if the website works in an incognito tab.

[faint lake]

@elfin arch Yeah was wondering because the stream I mod for like having the commands popping in discord too, since it's a CoD channel and they search for weapon loadouts all the time, but Streamelements doesn't do it

[vivid vector]

hello guys
i have DL your widget
[20:16]
and i have a problem with
[20:17]
i have only 4 follow in the roll's but i have more 40 follow only yesterday in my stream

[viral patrol]

Hi. There's most updated version in #widget-share (Credit Roll by Grot) which contains alternate version (This one allows to collect more events over stream as default one is limited up to 100 of them). For alternate version make sure you have "shutdown source when not visible" NOT ticked in OBS (for default one it should be ticked).

[fresh oxide]

hello 🙂 I would like a bot response to display the last message the user typed, before the command. is that possible ?

well it would be the last message before they use the command

[idle pelican]

anyone found that the animation settins for the event feed rotater from alpha gaming doesnt work?

or do i just need to add something to the editor?

[scarlet storm]

Hi everyone. Sorry if this is answered already. Does anyone know if its possible, to set up alerts through stream elements, to a merch store on Woocommerce?

[tropic finch]

looks possible to me using javascript in overlay and API for the woo, have a good coding 🙂

[scarlet storm]

thanks Mateus. So itll have to be manual? theres no plugin or anything for this?

[tropic finch]

yes and no

[old cairn]

Howdy, who do we contact to look at getting Oauth2 access?

[hardy walrus]

https://streamelements.com/contact @old cairn

[old cairn]

Baller, thank you!

[solemn zephyr]

can someone help me with my alert. im trying to have the text center and ontop of the gif but it keeps be on the top

[solemn zephyr]

this is the gif i want to have vertically center on top of

[solemn zephyr]

im having issues with centering vertically my alert message to be center on top of the gif i have. everytime i try to center it vertifcally within the css it removes my gif and puts a dancing shark. can someone please help me

[young shard]

when you enable custom css, you need to adjust all the code manually, it overrides all of the settings
instead of custom css, you could try selecting the layout "text over image"

then go to text settings > advanced > adjust top to a positive number and mess with it until the text shows to where you'd like

[pulsar willow]

Can I dm you about this? I have a custom eventlist (eventpop) and I can't seem to get this to work :/

[abstract solar]

Has anyone tried anything with them? Twitch Launches Beta Prediction and Survey API Yesterday

[pulsar willow]

Nvm, I have found it, it was in the JS tab Thanks again!!

[hardy walrus]

@abstract solar Given that it's that soon and a specific niche for what it's for I'm fairly certain that's a no.

[tropic wagon]

Hi guys ! I have a problem with my chat, text is cropped if too long. I tried to add "box-sizing: content-box" usualy it solves my problem but not here ...

[sudden ingot]

I am searching for a custom text css that i clean

But not standart

[ocean fractal]

give this a shot. Copy/paste this whole text file into the CSS text section of the widget

if that's for the chat widget in #widget-share , this should work for that

[tropic wagon]

No i'm pretty sure i used Cocahh Boxed Chat widget but not sure 100% I use this for a moment now but didn't notice before ^^

[ocean fractal]

ah okay! Sorry!

[tropic wagon]

But I tried yours just now, even with your fix it breaks the chat

[ocean fractal]

yeah I should have mentioned that the css I sent shouldn't be used for the Cocahh Boxed Chat

[tropic wagon]

No I mean I download your widget and tried your css

^^

[ocean fractal]

ah

[tropic wagon]

If I change width, it break the chat

(change manually not the code)

[ocean fractal]

right

hmm

its strange because when I mess with it I don't see that weirdness

[tropic wagon]

(by the way i like the fact you put different text messages for testing)

[ocean fractal]

I'm glad you find it helpful!

I'm not quite sure how to help you here. My one guess is that maybe, the padding settings might not have anything in them? I know that width is set based on the maths there

but I can't replicate, at least based on my version of the widget

[tropic wagon]

I'll try yours for my next stream to seewith real message ^^

[ocean fractal]

i hope it helps!

[tropic wagon]

I just look the widget and you did a great job !

[daring tangle]

Question: Hello! Has little problem with variables pls help (can in Russian:) ).
How can I get the sum of the variables and show them on command?

[thick blade]

Anyone know why this Widget keeps creating multiple clips when called !replay?

[elfin arch]

is this something you are building for SE; or a general question?

[thick blade]

This is from SE widget editor @elfin arch

#widget-share message To be specific

[elfin arch]

Do you have it on different overlays by chance and one is open in the background? (not shut down)

[thick blade]

@elfin arch If I had the same overlay on two tabs, would that create 2 clips?

[elfin arch]

correct; if the one isn't shut down

[thick blade]

I had the overlay editor on, if that counts as a tab

[elfin arch]

that would count.

[thick blade]

Tho I tested it closing that tab, still it created duplicate clips

[elfin arch]

so if you had OBS open and the editor it would double clip

[thick blade]

If I close the editor and it still created duplicate clips, would that conclude something is wrong with the code?

[elfin arch]

possibly; but less likely since that code has been around for a while and I haven't seen any reports of double clips. But there could be an API change or no one noticed before 🤷

close OBS; and open just a single tab of the overlay; then try to create a clip from Twitch chat

[thick blade]

The command only works if you are live. Is it possible to go live and close OBS? 😄

[elfin arch]

🤣 nope; good call

[thick blade]

Actually they have a test mode option

[elfin arch]

do you have it on 2 different scenes inside of OBS? like; 'gameplay' and 'chatting' ?

test mode might work; if it actually creates a clip (or 2)

[thick blade]

Test mode just recycles clips from their library

const getTestClip = () => {
  return new Promise(async (res, rej) => {
    try {
      const data = await fetch(`https://api.thefyrewire.com/twitch/clips/create/${prefs.key}?channel=${channel}&test`, { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' } }).then(d => d.json());
      res(data);
    } catch (e) {
      rej(e);
    }
  });
}

Even if the link was changed to make a new clip on a different channel, it doesn't work :/

@elfin arch To answer your question, I have 3 scenes and 5 different sources

Only one of them has this browser source

[strong tulip]

guuuyyysss

how can I permamently change data by js

hope it's a good place for widget docs

or if anybody know docs location

[ocean fractal]

I'm pretty positive data's read-only. Or at least that's how I've treated it

because that data's tied to settings, i believe

if you want to persist app data even when the widget isn't in use, you should be able to leverage SE_API to do crud operations on saved data

[reef granite]

hello, im looking for a quiz buzzer effect both visual and audio for a streamelements overlay. (maybe a widget)

[strong tulip]

I hope you're not right because that would suck

Are you sure about that?

And can I maybe use cookies then?

[young shard]

what's your use case for changing the data?

[strong tulip]

I need to somehow reset data every day

the data is just an int

so I came up with a plan to save date of first data occuring

so if it's another day it can reset blah blah blah

do you have a plan

[young shard]

well, every time the overlay is reopened, refreshed, etc, like when you reopen obs, everything is reset other than the field data, that's the only thing that saves between sessions

[strong tulip]

yuuup

and can I change it by js?

[young shard]

temporarily, but i don't see why you would need to if everything resets anyway? it's hard to tell what you need without knowing more about what you're trying to make

[strong tulip]

I'm trying to do a daily kills counter

app >> api >> app >> data >> screen

it wouldn't be a problem

but OBS is sometimes crashing

thus loosing ram

[tribal zenith]

can't you just use a Bot counter for that?

[strong tulip]

googling...

what

[tribal zenith]

you (or your mods) can set the value via chat commands

[young shard]

do you have an api that automatically tracks kills for you and you're pulling that data? or is it just all through the overlay

[strong tulip]

api

gives just amount of kills

I save the initial value

and then display difference on overlay

I'm trying to save it somewhere else than just js ram

is it really not possible? wtf

If not I'll make it read chat and make a command

[young shard]

saving that shouldn't take up much ram at all? i have no idea how that'd lead to obs crashing

[tribal zenith]

as I said you can combine the API storage and bot counter value

Bot counter > initial value set via chat, API -> updated values

[young shard]

yea that could probably work
and then pull from the counter via

SE_API.counters.get('counterName').then(counter => {
    // counter is of the format { counter, value }
});

[strong tulip]

I know I'm being stereotype

but that's not very elegant

like I've got 7123 kills

I need as a user see that number

type it in chat

what

what is that SE_API.counters anyway

[young shard]

https://github.com/StreamElements/widgets/blob/master/CustomCode.md#se-api

grabs from counters you make via the StreamElements bot !editcounter command

can also make a more elegant command than that, for specific counters
tho you'd still have to manually input the initial number

[strong tulip]

super eurobeat mix starts playing in the background as I finally read through all the docs

SE API
A global object is provided to access basic API functionality. The overlay's API token is also provided (via the onWidgetLoad event below) for more direct REST API calls to be used as authorization header.

SE_API.store.set('keyName', obj); // stores an object into our database under this keyName (multiple widgets using the same keyName will share the same data. keyName can be an alphanumeric string only).
SE_API.store.get('keyName').then(obj => {
    // obj is the object stored in the db, must be a simple object
});
SE_API.counters.get('counterName').then(counter => {
    // counter is of the format { counter, value }
});

SE_API.sanitize({ message: "Hello SomeVulgarWorld"}).then(sanityResult => {
/*
    sanityResult={
        "result":{
            "message":"Hello Kreygasm" //Message after validation
        },
        "skip":false // Should it be skipped according to rules 
    }
*/  
});

SE_API.setField('key', 'value'); // Set's the fieldData[key] = value. This does not save, so should be used with Editor Mode so the user can save.

like...

it literally let's you set variables

thanks for the API link bro

I appreciate all help

[tribal zenith]

the store has to be updated within code, counters can be updated via chat.
depends on what you need

[strong tulip]

I'll make it update via chat in case it needs some change

thank you

[tribal zenith]

in case you want to look at an example:
#widget-share message

[tribal zenith]

Release
I wrote a "little" library to support new developers/designers in creating more advanced overlays and make event-handling easy.

Also the docs cover a lot of use-cases with code examples, so you might want to check them out:
https://reboot0-de.github.io/se-tools/

If you find any bugs, please report them to me.

[strong tulip]

It's working yaaya

that SE_API is good stuff

[wise galleon]

If I wanted an image to come up when I typed in a certain "!" Command, how would I do that? I seem to not be able to find that widget

[elfin arch]

look into some of the 'shoutout widgets' you can probably get something set up easily with one of those

[sleek spire]

I am trying to connect to the Streamelements websocket using my JWT, but i dont get a connect event only random disconnect events. Am i missing something? Here is my code for reference:

require("dotenv").config();
let JWT = process.env.JWT;
const io = require("socket.io-client");
const socket = io('https://realtime.streamelements.com', {
    transports: ['websocket']
});

socket.on('connect', onConnect);

socket.on('disconnect', onDisconnect);

socket.on('authenticated', onAuthenticated);

function onConnect() {
    console.log('Successfully connected to the websocket');
    socket.emit('authenticate', {
        method: 'jwt',
        token: JWT
    });
}

function onDisconnect() {
    console.log('Disconnected from websocket');
}

function onAuthenticated(data) {
    const {
        channelId
    } = data;

    console.log(`Successfully connected to channel ${channelId}`);
}

[pulsar willow]

The subx3 both are gift subs, how do I make it say gift sub?

[olive aurora]

hi, I've been trying to use the video on command widget by @rugged rapids no to let my chat play stupid videos i've made but currently seems like i can only let the commands be used by either: streamer, streamer and mods, or streamer, mods and vips
I'd love some of these commands to be used by anyone, is there a way to do this?

[rugged rapids]

I recommend to use the stream store for this use case.

[olive aurora]

the stream store?
i don't want people to tip to play videos if that's what you're saying?

[rugged rapids]

No, they can use your SreamElements currency or just use them for free, depending on how you set it up.
https://www.youtube.com/watch?v=BXGMjHqwVFE

[olive aurora]

I'll give that a look, thank you 🙂

[lofty moss]

How do edit and add commands using api

[lyric nymph]

Alright so I've been following this guide (https://www.specialagentsqueaky.com/blog-post/ma6edcyg/2021-02-21-how-to-control-smart-rgb-lights-with-twitch-channel-points/) and it's set up to accept a specific kind of rgb change via channel points. I don't really need all that in my case though. There's gotta be a way to make this just simply react to a channel points reward without the extra fluff, but I don't know what to remove or change to make that happen Any ideas? (all the code is in that link)

Also in case I hear "use Lumia Stream" - I would, but my plugs are unfortunately not supported right now, so I have to manage a 3rd party way around it

Edit: got it. New question below

[lyric nymph]

does channel points require text input to be triggered this way? It's the only way I got it to work, but if I can avoid it I'd be ecstatic

[hardy walrus]

We cant help with channel points as we have no integration with it.

[autumn solar]

MINECRAFT

[severe shell]

I had this situation and what I did was commenting the if clause that looked for userlevel. It isn't the most elegant way to do that, but it was the quicker.
Click on Open editor and go to JS tab and comment the lines 41 and 72 adding a double '/' symbol

// if ((userState.mod && userOptions['managePermissions'] === 'mods') || ((userState.vip || userState.mod) && (userOptions['managePermissions'] == 'vips')) || userState.broadcaster || (userOptions['otherUsers'].indexOf(user) !== -1)) { let video = $("#video"); [...] sfx2.play(); sfx2.onended = function () { allowed = true; } }; // };

Click Done and the if clause will not be checked anymore. In case you want to work with the permissions, just remove the comments //

[faint gazelle]

How can I import js from another cdn?

I tried this

But it doesn't work

[young shard]

use the script tag in the html, you don't need to append it in with js

[faint gazelle]

I do that, but that doesnt work

In my local is working fine

[young shard]

any errors showing up in the console?

[faint gazelle]

Ou yes

So what can I do?

[young shard]

hmm odd it shouldn't block cdnjs scripts
I'm not sure, hopefully someone from StreamElements will see this and let you know what the issue is

[faint gazelle]

Okay, many thanks to you too

[mild cipher]

Script loads fine for me, maybe double check you don't have any ad blockers running

[sour topaz]

hi, is it possible through css/html/js to create a webcam overlay that recognizes when an image has to disappear to make an alert appear?
my idea was to create an overlay with my logo and when a sub arrived for example, my logo would disappear with an animation to make room for the logo to enter the scene for the sub.
I don't know if I've made myself clear

[young shard]

yes
you can read this to learn about how to write code that responds to different events (follow, sub, raid, etc): https://github.com/StreamElements/widgets/blob/master/CustomCode.md
there are also various widget examples here: https://github.com/StreamElements/widgets
the CustomEventList one handles various different events

[hexed vector]

Hello. How is the request body to create a contest using the API? In the documentation this object is empty.

[viral patrol]

I think it should be like:

{
  "botResponses": true,
  "title": "Will I win the next game?",
  "minBet": 10,
  "maxBet": 10000,
  "duration": 5,
  "options": [
    {
      "title": "Win",
      "command": "win"
    },
    {
      "title": "Lose",
      "command": "lose"
    }
  ]
}

[hexed vector]

@viral patrol thanks

[pulsar willow]

hello i downloaded a widget twitch poll but it doesnt work @viral patrol

can u please help me ?

[viral patrol]

Hi. Are you sure you have proper privileges to type !poll question?|answer1|answer2|answer3 ?

[pulsar willow]

yes

i type !startpoll and nothing

is poll only text in chat or it should be shows up in my screen?

[wheat jackal]

Is it possible to access uploads such as images and videos, without using json for each image? I know you can copy link for the image/video, but is there a better way?

[hexed vector]

I realized that the state of the contest after creating it is "created" and doesn't accept bets. How do I put it on state "running"?

[viral patrol]

@hexed vector It will be PUT to /contests/{channel}/{contestId}/start with empty object as body.

@wheat jackalYou can have a field *-input which have multiple:true

This will allow you to add more than 1 image to a field (which will be an array of uris in JS)

@pulsar willowIt should be on screen only

Do you see anything strange in console?

[pulsar willow]

@viral patrol so should show up in screen right?

[hexed vector]

thank you again

[viral patrol]

@pulsar willow

Try to grab it from this link: https://strms.net/chat_poll-by_lx

[hexed vector]

@viral patrol last questions about the contest I think. How do I close a contest? and, how do I chose the winning option?

[viral patrol]

@hexed vectorhttps://dev.streamelements.com/docs/kappa/api.yaml/paths/~1contests~1{channel}~1{contestId}~1winner/put

Hmmm, missing body

Body is:

{"winnerId":"optionId"}